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, Jun 17 '18 at 12:47
What is your project's folder structure? Where (inside which folder) do you execute `ng g c my-component`? — Muhammad Vakili, Jun 17 '18 at 12:53
Yes I unwisely ran ngupdate. Edit - folder structure added. ng g c ran from my-app folder — Mark Jones, Jun 17 '18 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, Feb 17 '19 at 03:06

score 5 · Answer 1 · answered Jun 17 '18 at 13:04

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 '18 at 13:04

Alok G.

1,388
3
15
26

1

I get specified module does not exist error...the module does exists of course. – Mark Jones Jun 18 '18 at 10:43
1

A relative path may be required, e.g., `--module=../app.module`. – Andy King Feb 17 '19 at 03:03

score 4 · Accepted Answer · answered Jun 20 '18 at 12:53

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/cli@6.0.3 to install older version

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

score 2 · Answer 3 · answered Dec 13 '18 at 08:17

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.

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. — Tallerlei, Apr 03 '19 at 10:08

kboul · Answer 4 · 2018-06-19T07:27:29.407

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 '18 at 07:27

answered Jun 18 '18 at 15:37

kboul

13,836
5
42
53

score 1 · Answer 5 · answered Jul 18 '18 at 14:23

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.

score 1 · Answer 6 · edited Dec 06 '18 at 10:16

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.

Using `--project` did the trick – Abhi Jul 15 '22 at 16:24 — Abhi, Jul 15 '22 at 16:24

score 0 · Answer 7 · answered Aug 21 '18 at 21:14

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.

score -1 · Answer 8 · answered Jun 18 '18 at 09:32

-1

Your Command Statement : ng g c my-component may cause problem problem. please do try with

ng g c mycomponent

answered Jun 18 '18 at 09:32

Joel Wembo

814
6
10

Using hyphens in component names like this is standard practice? I tried anyway just in case, got the same error. – Mark Jones Jun 18 '18 at 10:42

Angular CLI generate component issue

8 Answers8