2017-02-07 33 views
6

我遇到使用anglular-cli生成組件的問題ng-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 { 
} 

一切看起來OK。

+0

@Kinduser這簡直是命令行提示符 – zhekaus

+0

@Kinduser但在哪裏呢?我希望我知道什麼東西發電機是基於當他尋找應用程序模塊... – zhekaus

+0

C:\ webProj \ EngMe \ web_engme – zhekaus

回答

7

所以,最後,我們來關閉我的問題。我很抱歉,我會變得冗長,因爲這個問題一直讓我很緊張。

對我而言,它是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/[email protected] 
npm install --save-dev @angular/[email protected] 


# 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 

精細。

0

試試這個:

ng generate component menu(Component name) --module=app(root app module).module 
相關問題