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

Question

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.

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:

Any ideas?

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

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

Hi Jon, it is "C:\Sources\Search". This happens wheather I execute the command from Search folder, or from Search/src, or Search/src/app. Always the same result, cant find the app.module, just the files are put into different new folder in the tree. — Andrej Lucansky
– Andrej Lucansky, Commented Nov 21, 2016 at 16:05
@AndrejLučanský are you certain? the screenshot shows C:\Sources something here seems off. you generate a component named test but it places it in src/app/search even through that doesn't show at all. — Brocco
– Brocco, Commented Nov 21, 2016 at 16:08
Its like that only because I deleted the whole TFS repository path from there, but its basically "C:\Sources\xxx\\SRC\Branches\xxx\Sprint-branch\Search>". I forgot to leave the last "Search" part of the path in the snapshot. I updated the picture so it contains the working directory. — Andrej Lucansky
– Andrej Lucansky, Commented Nov 21, 2016 at 16:16
Yes, its still there. I will update the question and add a snip of my folder structure. — Andrej Lucansky
– Andrej Lucansky, Commented Nov 21, 2016 at 16:29

xenjacob · Accepted Answer · 2018-12-13 08:58:12Z

1

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

edited Dec 13, 2018 at 8:58

xenjacob

34 bronze badges

answered Nov 22, 2016 at 13:57

Andrej Lucansky

74511 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zhekaus Over a year ago

I've got the same problem. However in my case there's nothing wrong with @NgModule. (

Andrej Lucansky Over a year ago

This was probably a parser problem of the early Angular 2 version. I suppose the new Angular versions don't have this "same line" problem anymore.

Manivannan Murugavel · Accepted Answer · 2017-08-17 13:17:15Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related