Angular CLI generate component issue

Question

When generating a new component using ng g c my-component I get the error:

Could not find an NgModule. Use the skip-import option to skip importing in NgModule.

If I then use the skip-import option Angular generates the component in my e2e folder.

I'm assuming it's something to do with my angular.json file which used to be called angular-cli.json prior to me running ng upgrade which is no doubt what caused the issue as there seems to have been some structural changes.

Is there way to fix this without creating a new project with the CLI and then manually copying over files..?

ng g c ran from root "my-app" folder.

Folder structure:

my-app
 - dist
 - e2e
 - node_modules
 - src
 - app
 - etc

angular.json within my-app folder

**Angular Versions:**
@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cli 6.0.8
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 5.5.2
typescript 2.5.3
webpack 4.8.3

• Pankaj Parkar: did you upgraded your application to Angular 6 using ng update command.?
• Muhammad Vakili: What is your project's folder structure? Where (inside which folder) do you execute ng g c my-component?
• Mark Jones: Yes I unwisely ran ngupdate. Edit - folder structure added. ng g c ran from my-app folder
• Andy King: Try ng g c my-component --module app.module (or --module ../module.app, or however many parent levels are needed).

Answer 1

I smell ng finds multiple module files on app root, please supply module while generating component

ng generate component componentName --module=<MODULE-NAME>
ng generate component componentName --module=app.module

• Mark Jones: I get specified module does not exist error...the module does exists of course.
• Andy King: A relative path may be required, e.g., --module=../app.module.

Answer 2

Answer/update for anyone having the same issue.

You can cd to the component directory and ng g c will work fine.

To be able to run this from the root folder I rolled back my version of @angular/cli to version 6.0.3. I had 6.0.8 installed previously.

npm i @angular/[email protected] to install older version

ng g c your-component will then work from the root folder as normal.

Answer 3

I had the same problem after upgrading a project from Angular 4.3 to Angular 6. The problem turned out to be the sourceRoot value in angular.json under the [project-name]-e2e project. It was set to "e2e". When comparing to other projects created initially with Angular 6 (not upgraded), I noticed that they had an empty string specified for sourceRoot on the e2e project. After changing mine to that configuration, this problem was resolved.

Please note that sourceRoot for the primary project should still be "src", you should only need to change it to an empty string on the e2e project.

• Tallerlei: Thanks for your answer. I was going through a lot of posts about this bug and people keep telling "delete e2e project" or "move to project root". I mean WTF this was never an acceptable solution to the problem for me. So your answer helped me. I switched the position of e2e project and my main project and it works like a charm.

Answer 4

I had the same issue in one of my projects.

Check here: Angular CLI in ASP.NET Core 2 Angular template? the answer from @Ashkan Rahmani.

For Angular 6 projects you need to go to angular.json, find "root" inside the file and set it as the name of the child of your src folder (in most cases it is app).

Therefore you need to replace

"src": "" 

with

"src": "app"

Then run ng g c my-component

Answer 5

I resolved this issue in a .net core 2 configured Angular CLI app by simply moving the project object in the angular.json file to the bottom of the projects list.

In my case the main app project was first, followed by the e2e project. I switched them and the CLI went back to creating schematics in the appropriate src/app folder.

I will speculate that whatever ng-update does to the configuration, causes the schematics generator to look at whatever is last on the projects list in the angular.json.

Answer 6

I also have encountered the same problem when i was trying to generate a new component,i don't know the actual reason behind it but i guess its there because of angular update. I have solved it though,which you can try:

use: ng g c (component Name) --project=(project Name*) --module=app

project name= you can find it in angular.json file

it will be mentioned as

 "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
 "version": 1,
 "newProjectRoot": "projects",
 "projects": {
 ***"angular.io-example"***: {
 "root": "",
 "projectType": "application",

Your project name is angular.io-example.

• Abhi: Using --project did the trick

Answer 7

If you want to create a new component in an Angular project

• The best way is by using Angular CLI with the following command ng generate component sampleComponent or ng g c sampleComponent

The two main aspects to consider in this scenario is

1. You have to be either in the main root (my-app) project folder or inside the src/app folder and then use the generate component commands.
2. Either way, the new generated component will be created inside the src/app folder and also importing those new components into the app.module.ts file

• But in your case, I am having a strong feeling that you might be in e2e folder, that is the reason why you got this message

enter image description here

• and if you follow it by using ng generate component sampleComponent --skip-import that's creating the component in e2e folder. ( similar case if you are inside the src folder but outside the app folder- this creates a new component in src folder.)

follow these steps

• get out from the e2e folder in the terminal ( MAC OS ) cd .. Note: you can also use the ng g c sampleComponent here itself and this creates the component inside src/app.
• change directory to src cd src/
• change directory to app cd app/

use the command - this creates the component in src/app.

Answer 8

I got this issue after integrating cypress e2e testing, the solution was changing this in angular.json from

"cli": {
 "packageManager": "npm",
 "schematicCollections": [
 "@cypress/schematic",
 "@schematics/angular"
 ]
},

to

"cli": {
 "packageManager": "npm",
 "schematicCollections": [
 "@schematics/angular",
 "@cypress/schematic"
 ]
 },