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

AngularNrwl

Angular Problem Overview


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:

  • Angular CLI: 6.0.8
  • Node: 8.9.4
  • OS: win32 x64
  • Angular: 6.0.6
  • @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/cdk 6.3.1
  • @angular/cli 6.0.8
  • @angular/material 6.3.1
  • @ngtools/webpack 6.0.8
  • @schematics/angular 0.6.1
  • @schematics/update 0.6.8
  • rxjs 6.2.1
  • typescript 2.7.2
  • webpack 4.8.3
  • nrwl/nx 6.1.0

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.

Angular Solutions


Solution 1 - Angular

#Quick fix

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

cd src/app (linux)

cd .\src\app\ (windows)

  1. Run commands now

ng g c myComponent

Solution 2 - Angular

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

Solution 3 - Angular

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

Solution 4 - Angular

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

Solution 5 - Angular

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

Solution 6 - Angular

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.stack.imgur.com/RSG7c.png

Solution 7 - Angular

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

Solution 8 - Angular

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.

Solution 9 - Angular

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.

Solution 10 - Angular

  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/**"
                ]
              }
            }
          }
        }

Solution 11 - Angular

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.

Solution 12 - Angular

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

Solution 13 - Angular

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.

Solution 14 - Angular

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.

Solution 15 - Angular

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

Solution 16 - Angular

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

Solution 17 - Angular

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

Solution 18 - Angular

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 { }

Solution 19 - Angular

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!

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTimTheEnchanterView Question on Stackoverflow
Solution 1 - AngularDebojyotiView Answer on Stackoverflow
Solution 2 - AngularbvdbView Answer on Stackoverflow
Solution 3 - AngularMuzaffar MahmoodView Answer on Stackoverflow
Solution 4 - AngularNenad ŠtrbićView Answer on Stackoverflow
Solution 5 - AngulartarÚn kÚmarView Answer on Stackoverflow
Solution 6 - AngularHarish ChollaView Answer on Stackoverflow
Solution 7 - AngularKoustavView Answer on Stackoverflow
Solution 8 - AngularTimTheEnchanterView Answer on Stackoverflow
Solution 9 - Angularlanchana guptaView Answer on Stackoverflow
Solution 10 - Angularvikas thakurView Answer on Stackoverflow
Solution 11 - AngularmeloView Answer on Stackoverflow
Solution 12 - AngularManuelView Answer on Stackoverflow
Solution 13 - AngularLakyView Answer on Stackoverflow
Solution 14 - Angularuser9480735View Answer on Stackoverflow
Solution 15 - AngularIna TiganasView Answer on Stackoverflow
Solution 16 - AngularMiguel AngelView Answer on Stackoverflow
Solution 17 - AngularAleksei ProtopopovView Answer on Stackoverflow
Solution 18 - AngularJarmoPView Answer on Stackoverflow
Solution 19 - AngularEsdras ClairmiusView Answer on Stackoverflow