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

did you upgraded your application to Angular 6 using ng update command.? — Pankaj Parkar
– Pankaj Parkar, Commented Jun 17, 2018 at 12:47
What is your project's folder structure? Where (inside which folder) do you execute ng g c my-component? — Muhammad Vakili
– Muhammad Vakili, Commented Jun 17, 2018 at 12:53
Yes I unwisely ran ngupdate. Edit - folder structure added. ng g c ran from my-app folder — Mark Jones
– Mark Jones, Commented Jun 17, 2018 at 13:42
Try ng g c my-component --module app.module (or --module ../module.app, or however many parent levels are needed). — Andy King
– Andy King, Commented Feb 17, 2019 at 3:06

Alok G. · Accepted Answer · 2018-06-17 13:04:20Z

5

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

answered Jun 17, 2018 at 13:04

Alok G.

1,5683 gold badges16 silver badges26 bronze badges

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

2 Comments

Mark Jones Over a year ago

I get specified module does not exist error...the module does exists of course.

Andy King Over a year ago

A relative path may be required, e.g., --module=../app.module.

Mark Jones · Accepted Answer · 2018-06-20 12:53:00Z

4

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.

answered Jun 20, 2018 at 12:53

Mark Jones

1791 gold badge2 silver badges9 bronze badges

Comments

Anshul Rawat · Accepted Answer · 2018-12-13 08:17:16Z

2

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.

answered Dec 13, 2018 at 8:17

Anshul Rawat

17 bronze badges

1 Comment

Tallerlei Over a year ago

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.

kboul · Accepted Answer · 2018-06-19 07:27:29Z

1

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

edited Jun 19, 2018 at 7:27

answered Jun 18, 2018 at 15:37

kboul

14.7k5 gold badges50 silver badges60 bronze badges

Comments

John Gallego · Accepted Answer · 2018-07-18 14:23:57Z

1

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.

answered Jul 18, 2018 at 14:23

John Gallego

6917 silver badges10 bronze badges

Comments

leopal · Accepted Answer · 2018-12-06 10:16:38Z

1

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.

edited Dec 6, 2018 at 10:16

leopal

4,9791 gold badge28 silver badges35 bronze badges

answered Dec 6, 2018 at 9:31

SanketSingh

112 bronze badges

1 Comment

Abhi Over a year ago

Using --project did the trick

PRagh · Accepted Answer · 2018-08-21 21:14:46Z

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

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

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.

Ahmet Emre Kilinc · Accepted Answer · 2024-06-22 07:11:41Z

0

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

edited Jun 22, 2024 at 7:11

Ahmet Emre Kilinc

7,05119 gold badges37 silver badges49 bronze badges

answered Jun 21, 2024 at 17:50

Moe Shair

11 bronze badge

Collectives™ on Stack Overflow

Angular CLI generate component issue

8 Answers 8

2 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related