angular - ng-cli 不会将组件添加到应用程序模块

Question

我在使用 anglular-cli 生成组件时遇到了问题ng-cli 不会将全新创建的组件添加到应用程序模块:

$ ng g component Try
installing component
  create src\app\try\try.component.css
  create src\app\try\try.component.html
  create src\app\try\try.component.spec.ts
  create src\app\try\try.component.ts
  update src\app\app.module.ts
No app module found. Please add your new class to your component.

我没有移动任何文件。项目结构是默认的。 src\app\app.module.ts 存在并具有以下内容:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';

import {HttpModule} from '@angular/http';
import {RouterModule} from '@angular/router';

import {AppComponent} from './app.component';
import {ROUTES} from "./app.routes";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(ROUTES)
    ],
    declarations: [
        AppComponent
    ],

    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

一切正常。

Answer 1

所以，最后，让我们结束我的问题。非常抱歉，我会很啰嗦，因为这个问题一直让我很紧张。

对我来说，这是最新版本的 ng-cli 中的一些错误之王，或者可能与最新版本的相关组件不兼容。问题的根源在于我将 package.json 中提到的所有模块更新到最新的稳定版本。

问题是可以重现的。但是现在看来 Angular 团队已经解决了一些问题，并且在上次更新之后，一切都变得很好。我做了什么来解决它:

npm uninstall -g angular-cli @angular/cli
npm uninstall angular-cli @angular/cli -–save-dev
npm cache clean
npm install -g @angular/cli@latest
npm install --save-dev @angular/cli@latest


# let’s update all the local again packages to the latest ones with this funny utility:
npm install -g npm-check-updates
ncu -u -a --packageFile package.json
rm -rf node_modules
npm install

现在我有以下版本并且一切正常:

  "devDependencies": {
    "@angular/cli": "^1.0.0-beta.31",
    "@angular/compiler-cli": "^2.4.7",
    "@types/jasmine": "2.5.42",
    "@types/node": "^7.0.5",
    "angular2-template-loader": "^0.6.2",
    "bootstrap": "^4.0.0-alpha.6",
    "codelyzer": "~2.0.0",
    "css-loader": "^0.26.1",
    "css-to-string-loader": "^0.1.2",
    "file-loader": "^0.10.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.28.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.1",
    "pug-html-loader": "^1.1.0",
    "pug-loader": "^2.3.0",
    "raw-loader": "^0.5.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.4.0",
    "ts-loader": "^2.0.0",
    "ts-node": "2.1.0",
    "tslint": "^4.4.2",
    "typescript": "~2.1.6",
    "typings": "^2.1.0",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  }

让我们再试一次:

$ ng generate component NewOne
installing component
  create src\app\new-one\new-one.component.css
  create src\app\new-one\new-one.component.html
  create src\app\new-one\new-one.component.spec.ts
  create src\app\new-one\new-one.component.ts
  update src\app\app.module.ts

很好。