CODEWITHSUNDEEP
angularangular-cli
zhekaus
zhekaus

Reputation: 3194

ng-cli doesn't add components to the app module

I’ve encountered a problem with a component generation using anglular-cli ng-cli doesn’t add the brand-new created component to the app module:

$ 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.

I didn’t move any file. The project structure is default. The src\app\app.module.ts exists and has the following content:

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 {
}

Everything looks like ok.

Upvotes: 9

Views: 13619

Answers (2)

Khemraj
Khemraj

Reputation: 109

Try this:

ng generate component menu(Component name) --module=app(root app module).module

Upvotes: 1

zhekaus
zhekaus

Reputation: 3194

So, finally, let’s close my issue. I'm very sorry, I’ll be verbose, since this problem have been making my nerves.

As to me, it was some king of bug in the latest version of ng-cli or probably in its incompatibility with latest version of related components. The source of problem was in my updating of all the modules mentioned in package.json up to the latest stable version.

Problem was confidently reproducible. However by now it looks like Angular Team has solved something and, after the last updating, everything has become fine. What I did to solve it:

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

Now I have the following versions and everything is working:

  "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"
  }

Let's try again:

$ 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

Fine.

Upvotes: 11

Related Questions