CODEWITHSUNDEEP
angularangular-cli
Andrej Lucansky
Andrej Lucansky

Reputation: 735

Angular 2 CLI "ng generate component" command does not find app.module

I have been trying to generate new components using Angular2's CLI tool using this command:

ng generate component test

After execution, new component files are generated, but the references are not added into the app.module.ts file:

No app module found. Please add your new class to your component.

enter image description here

I was trying to find the solution to fix this so I dont have to always import new component and add it to declarations manually, but I couldn't find anything about this issue online.

I think it may have something to do with my angular-cli.json file, but it seems to be ok:enter image description here

Any ideas?

UPDATE: This is my project folder structure, simplyfied. I removed folders which are not relevant:

enter image description here

Code in the app.module.ts is following:

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { HttpModule }       from '@angular/http';
import { AppComponent }     from './app.component';
import { SearchComponent }  from './search/search.component';

@
NgModule({
    declarations: [
        AppComponent,
        SearchComponent
    ],
    imports: [
        BrowserModule,
        HttpModule
    ],
    providers: [
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

Upvotes: 4

Views: 6678

Answers (2)

Andrej Lucansky
Andrej Lucansky

Reputation: 735

The issue why angular-cli couldn't find app module was that the "@" sign and the "NgModule" name where not on the same line. This does not make the code fail on execution, but it prevents the CLI from detecting the module:

@
NgModule({

if you write both on the same line, cli is able to find the module successfully:

@NgModule({

Upvotes: 1

Manivannan Murugavel
Manivannan Murugavel

Reputation: 1578

It No Problem. But Not added, your installed component. So add your component name to app.module.ts.
example 

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

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';<!-- My Installed Component -->
import { FooterComponent } from './footer/footer.component';<!-- My Installed Component -->

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,<!-- My Installed Component -->
    FooterComponent<!-- My Installed Component -->
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 0

Related Questions