TimTheEnchanter
TimTheEnchanter

Reputation: 3671

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

I get the error in the subject of this post when I use the CLI to create a new component: ng g c my-component --project=my-project (No component is created)

I've seen other posts with the same error message, but none of them also include Nrwl/Nx, which I believe is somehow involved. Project started as Ng4 and was upgraded to Ng6.

Environment:

UPDATE #1

I tried dropping the --project flag entirely ( so just ng g c my-component) and still get the same problem. Not sure what that means, yet.

Upvotes: 100

Views: 164624

Answers (28)

Nishan
Nishan

Reputation: 4441

This happened to me after converting my project to have only standalone components. When generating new components in a standalone project, you need to explicitly tell Angular CLI to generate them as standalone components. You can use the --standalone flag:

ng g c my-component --standalone

Upvotes: 1

Metcalfe
Metcalfe

Reputation: 121

First create the module for your project component with.

ng g module --project my-project

You'll then be prompted to name your module.

Then run the generate component command again.

Upvotes: 0

Emmanuel Cuevas
Emmanuel Cuevas

Reputation: 133

For older versions of Angular when you have a module.ts file you just need to change to your folder /app For new version where you don't have a module.ts file you just need to create it.

Upvotes: 0

Vedant Singh
Vedant Singh

Reputation: 101

I was facing the same issue, and it got resolved by upgrading node version.

Upvotes: 0

abovetempo
abovetempo

Reputation: 150

This worked for me with angular 16.2.8. Here is my package.json showing my angular version dependencies: enter image description here

In this example answer I have not converted my angular application to use standalone components yet. If you use --skip-import then imports will not be added to your app.module.ts which will lead to your application having problems. In order to make sure imports are added to app.module.ts, when creating a component I had to cd to my directory where my app.module.ts was located. In my case that was the folder:

(base-folder)/src/app enter image description here

After being in my folder where my app.module.ts was located I typed the command

ng g c NewComponentName -m app

If you have changed your app.module.ts to a new name then replace app in the command above with that name.

For a real example in my example below I created a component called PrivacyPolicy enter image description here

You can see my app.module.ts added the imports successfully from the blue UPDATE text.

Here is what the import looks like in my app.module.ts after adding the component. Notice I moved my component to a components folder manually after creating my component which is why my path starts with components: enter image description here

Upvotes: 0

jawn
jawn

Reputation: 1029

Hopefully helps someone, I had 2 issues:

  1. I had 2 modules on the same folder level as app.module.ts that referenced NgModule, I moved it to a separate folder

  2. My components folder was outside of the app folder, you have to be cded into app in order to run the command for it to find NgModule

Upvotes: 1

RONAK THAKOR
RONAK THAKOR

Reputation: 1

you have to move to the src/app folder

simple use $cd app command to go inside

Upvotes: 0

edward rodenburg
edward rodenburg

Reputation: 1

I got this same error because I was in the wrong file location. For some reason I thought I had to do it from the file location src instead of the location above (where angular.json is and ofcourse src/ itself)

Doing the command from root location solved it (in my case cd ..).

Upvotes: 0

Melih
Melih

Reputation: 1

I created empty folder my own and move my old module into it. After when I tried to create component inside the folder I got same error. I deleted the empty folder and create module folder. After that I was able to create new components etc.

Upvotes: 0

Miguel Angel
Miguel Angel

Reputation: 21

Enter ** cd .\app\ ** in the terminal or type "cd app + Tab". Once you are in the app folder, the ng command works!

Upvotes: 2

TimTheEnchanter
TimTheEnchanter

Reputation: 3671

I ended up totally deleting node_modules, clearing out the yarn cache and then running yarn to reinstall all packages. I also edited my angular.json file so that my pathing looked like this for all applications and libraries:

"root": "libs/my-lib",
"sourceRoot": "libs/my-lib/src"

I'm not sure which of those fixed the problem, but all appears to be OK now. At least the immediate problem went away.

Upvotes: 2

Nenad Štrbić
Nenad Štrbić

Reputation: 397

You are not inside app folder... cd app on windows, and then run command

Upvotes: 16

Laky
Laky

Reputation: 39

Please check the location for .module.ts file. I was running this command from /src folder, while app module was inside /src/app folder.

When run the same command from /src/app path. It is working.

Upvotes: 3

Esdras Clairmius
Esdras Clairmius

Reputation: 1

From visual studio code I made a: right click on the app folder -> click on "open in integrated terminal -> run the cmd: ng g component user. 4 files have been created. It works successfully!

Upvotes: 0

Ina Tiganas
Ina Tiganas

Reputation: 71

Make sure you are in the right path (I mean in the path you are working in) so just verify this in the console by print working directory (pwd) and change it. This worked for me

Upvotes: 2

Harish Cholla
Harish Cholla

Reputation: 249

Working 100%

Try --skip-import

ng g c mycomponent --skip-import

or change directory src/app ;

open the terminal on click on app -> enter comand ng g c 'your component name' and hit enter

I think These are the error you getting click once and check it https://i.sstatic.net/RSG7c.png

Upvotes: 9

Manuel
Manuel

Reputation: 31

You may have changed the file app.module.ts to other folder (out of folder app). Ionic is not finding the file.

Upvotes: 3

JarmoP
JarmoP

Reputation: 361

I had the same issue. My problem (in ionic 4) was that the file app-routing.module.ts was missing. I had to create an empty one, before adding new pages worked:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Upvotes: 1

tarÚn kÚmar
tarÚn kÚmar

Reputation: 81

Your current directory in cmd window matters. Run this command from the 'src/app' folder in the project. It should work.

Upvotes: 8

melo
melo

Reputation: 56

This is pretty weird answer, but the problem occur because I have open my project in the src directory only. Reopening the entire project folder resolves the issue.

Upvotes: 2

Muzaffar Mahmood
Muzaffar Mahmood

Reputation: 1908

Run component generation command(ng g c component-name) from where the app.module.ts file is located.

Upvotes: 23

vikas thakur
vikas thakur

Reputation: 150

  1. First way:
    I think first you have to go to inside your app folder then type cmd;
    ng g c your_com_name --spec false
    or ng g c your_com_name
    It will definitely create your component or solve your problem.

  2. second way:
    Remove your e2e from your angular.json->projects:
    definitely

    { 
        your_project_name-e2e:{}
    }
    

    example: my-first-app-e2e

    {
          "root": "e2e/",
          "projectType": "application",
          "architect": {
            "e2e": {
              "builder": "@angular-devkit/build-angular:protractor",
              "options": {
                "protractorConfig": "e2e/protractor.conf.js",
                "devServerTarget": "my-first-app:serve"
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": "e2e/tsconfig.e2e.json",
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            }
          }
        }
    

Upvotes: 2

user9480735
user9480735

Reputation:

This also happened to me and in my case it was due to me generating a new component outside of the app folder, I bought the new component inside the app folder and the issue was solved.

Upvotes: 1

Koustav
Koustav

Reputation: 615

I removed the line "cli": { "defaultCollection": "@nativescript/schematics" } from angular.json file and it worked for me.

Upvotes: 3

bvdb
bvdb

Reputation: 24770

The generate of components aims to do 2 things:

  • create source code for the component
  • registers the component in a module (by default, in the app.module.ts)

The problem is, that you don't have an app.module.ts. You renamed it to something else, or perhaps even have multiple of them. In that case there are 2 possible solutions:

  1. you do the registration of the component manually. (easiest)

    ng g component mycomponent --skip-import

  2. you specify the module with the -m switch. (might be broken) There is a long thread about it here: https://github.com/nrwl/nx/issues/526

Upvotes: 40

lanchana gupta
lanchana gupta

Reputation: 329

I had the same issue, In angular.json file, I searched for my-project-e2e (replace my-project with your project name) and then I changed:

"root": "" to "root": "e2e" and saved it. Everything was working again.

The solution was specified in this link.

Upvotes: 2

Aleksei Protopopov
Aleksei Protopopov

Reputation: 1

Had same issue. Turned out to be somehow related to the name of the root component. Renaming back to 'app' resolved the problem

Upvotes: 0

Debojyoti
Debojyoti

Reputation: 4841

Quick fix

1) Change current directory in cmd/terminal to src/app

cd src/app (linux)

cd .\src\app\ (windows)

2) Run commands now

ng g c myComponent

Upvotes: 171

Related Questions