ng-cli不会向app模块添加组件

Question

我遇到了使用anglular-cli ng-cli生成组件的问题,但没有将全新创建的组件添加到app模块:

$ 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中的一些bug,或者可能与最新版本的相关组件不兼容.问题的根源在于我更新package.json了最新稳定版本中提到的所有模块.

问题可靠地重现.但是到目前为止,看起来Angular Team已经解决了一些问题,在最后一次更新之后,一切都变好了.我做了什么来解决它:

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

精细.