21

I want to add a new component in asp.net core 2.0 SPAs with angular 4 with angular cli with this version:

@angular/cli: 1.4.2

node: 8.4.0

os: Linux x64

when I running this command ng g c vehicle-form on a directory of components got this error:

Error: Could not find an NgModule for the new component. Use the skip-import option to skip importing components in NgModule. Could not find an NgModule for the new component. Use the skip-import option to skip importing components in NgModule.

app.module.shared.ts

Also, I have 3 files for app.module.ts not one :\ :

app.module.browser.ts

app.module.shared.ts

app.module.server.ts

Improve this question
2

9 Answers 9

Reset to default
29

You're using the Angular CLI in a project that wasn't built with the CLI in mind, so you have to take a couple of extra steps. The error message tells you want to do.

First, run the ng g c vehicle-form command and include the --skip-import=true option.

Then, add the component declaration in the proper application module file by hand. In this case, the app.module.shared.ts, where all the other application components are declared.

Or, you can run the ng g c vehicle-form and include the --module='app.module.shared.ts'. You may have to fully qualify the path to the module file with this. I haven't tested it, so be prepared to try a few things with this on your own.

More on ng generate component: generate component.

UPDATE (2018-03-01)

Microsoft has delivered some new SPA templates for use with ASP.NET Core 2.0 applications. You can find more details about them here. The new Angular template includes support for the Angular CLI. So, if you are familiar with the CLI, then this should feel a little bit more like home. This means you can to the ng g commands to generate code with this new template.

Improve this answer
1
  • 1
    Thanks! Confirming that this works: ng g c vehicle-form --module='app.module.shared.ts'. To install the Angular CLI and get the .angular-cli.json in the root of the project I followed these instructions: stackoverflow.com/questions/46826352/…
    – Evil Pigeon
    Commented Oct 26, 2017 at 13:57
23

In my case problem was in e2e project. After I move my project from angular 4 to angular 6 a new angular config file was added "angular.json" instead "angular.conf.json". In a projects section appeared two project: One of them my "ng-app" and other "ng-app-e2e". When I try execute "ng g c" command i catch a same error. A cause was in root section of "ng-app-e2e". It had empty value. I set it into "e2e". Now all is ok! This occurs despite the fact that the default project set in "ng-app".

"projects": {
    "ng-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      ...
    },
    "ng-app-e2e": {
      "root": "e2e", <-- SALVATION
      "sourceRoot": "e2e",
      "projectType": "application",
      ...
    }
  },
  "defaultProject": "ng-app"
Improve this answer
1
  • 1
    thank you!! this was a headache-and-a-half, and your solution worked!
    – maia
    Commented Jul 18, 2018 at 17:08
6

In the case of an ASP Net Core Angular project, the app.module is split across 3 files as you've highlighted. The angular CLI has to decide where to add the reference to the component in the module, so you need to provide it with some help.

ng g c moduleName --module='app.module.browser.ts'

Improve this answer
4

in .angular-cli.json in part "apps" replace "./src" to "src"

"apps": [ { "root": "src", "outDir": "dist",

Improve this answer
3

ng generate component componentName --module=app.module

In my project also I got the above error I tried this command this works properly.I think this will help you.

Improve this answer
1

I ran into the same issue and then I realized I was not in to root folder of the project.

I did not work when

/c/some/path/your_project/src/bla/bla/bla

But it does work (for me it worked)

/c/some/path/your_project
Improve this answer
1

I had the same problem while converting 5 to 6 version. I found the solution from github. when I removed e2e from sourceRoot It solved the problem.

Improve this answer
1

This error will occur in case if app.module.ts file is not present. Please verify if the file is present and if it does not exist, create one manually.

Improve this answer
0

1- Copy an angular.json from a default angular project into your asp.net mvc core project. 2- maybe needs to install npm install @angular/cli@latest --save-dev 3- open angular.json and change 

 "root": "./ClientApp",
 "sourceRoot": "./ClientApp/src",

then you can use ng g c vehicle-form

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.