Specified module does not exist Angular 6

Question

Can you tell me why I cannot use below CLI? It says Specified module does not exist. Same error for both CLI commands.

Note: I have upgraded this app from ng 5 to ng 6. Is that this error due to some issue on upgrading?

ng generate component messages --module=core

ng generate component messages --module=app

app.core.module.ts

export class CoreModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule
    };
  }
}

app.module.ts

export class AppModule { }

ng --version

Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                           Version
-----------------------------------------------------------
@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.2
@angular/cli                      6.0.8
@angular/material                 6.3.2
@angular/tsc-wrapped              0.5.2
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

package.json

{
  "name": "Abc",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "run-s build:client build:aot build:server",
    "buildclient": "ng build --prod --build-optimizer --app 0",
    "build:aot": "ng build --aot --app 1",
    "build:server": "webpack -p",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev": "ng build --prod =cd dist http-server",
    "build:firebase": "ng build --prod && cp src/manifest_app.json dist && firebase deploy"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.0.7",
    "@angular/cdk": "^6.3.2",
    "@angular/common": "6.0.7",
    "@angular/compiler": "6.0.7",
    "@angular/core": "6.0.7",
    "@angular/forms": "6.0.7",
    "@angular/http": "6.0.7",
    "@angular/material": "^6.3.2",
    "@angular/platform-browser": "6.0.7",
    "@angular/platform-browser-dynamic": "6.0.7",
    "@angular/platform-server": "6.0.7",
    "@angular/router": "6.0.7",
    "@angular/service-worker": "6.0.7",
    "@auth0/angular-jwt": "^2.0.0",
    "@cloudinary/angular": "^2.1.1",
    "@jaspero/ng2-confirmations": "^0.3.3",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8",
    "@ng-select/ng-select": "^0.36.2",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0",
    "@types/moment": "^2.13.0",
    "angular2-useful-swiper": "^5.0.1",
    "cloudinary-core": "^2.4.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "moment": "^2.20.1",
    "ng-pwa-tools": "0.0.15",
    "ng2-cloudinary": "^0.9.2",
    "ng2-file-upload": "^1.3.0",
    "ng2-img-max": "^2.1.15",
    "ng4-geoautocomplete": "^0.1.0",
    "ng4-loading-spinner": "^1.1.1",
    "ngx-bootstrap": "^2.0.2",
    "ngx-toastr": "^6.5.0",
    "ngx-youtube-player": "^0.1.0",
    "raven-js": "^3.26.3",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "swiper": "^3.4.2",
    "webrtc-adapter": "^6.1.4",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.8",
    "@angular/compiler-cli": "6.0.7",
    "@angular/language-service": "6.0.7",
    "@types/googlemaps": "^3.30.8",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.18",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "npm-run-all": "^4.1.2",
    "protractor": "~5.1.2",
    "ts-loader": "^3.5.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "2.7.2",
    "webpack-node-externals": "^1.6.0",
    "@angular-devkit/build-angular": "~0.6.8"
  }
}

I think you have to specify file name like this `ng generate component messages --module=app.module.ts`. — hrdkisback, Jul 20 '18 at 09:00
Same error for this too: `ng generate component messages --module=app.module.ts` @hrdkisback — Sampath, Jul 20 '18 at 09:13

score 18 · Answer 1 · answered Feb 28 '19 at 10:21

18

Below code works on latest CLI version.

ng generate component messages --module app.core.module

It doesn't requires .ts

If we want to create new component which points to specified module inside the folder, specify folder path. Folder path should root of app folder.

ng g c ./components/messages/messages --module message.module

Hope this helps.

answered Feb 28 '19 at 10:21

Manoj

2,000
2
16
21

1

Thanks this worked for creating a component under a folder where Module name is different from Folder name – Maravarman Manoharan Sep 18 '19 at 11:02

eduPeeth · Answer 2 · 2018-07-20T08:52:31.470

13

Please use the path relative to your base-href that is src/app

Try

ng generate component messages --module ./app.core.module.ts

edited Jul 20 '18 at 08:52

answered Jul 20 '18 at 08:37

eduPeeth

1,840
13
21

Same error for this too: `ng generate component messages --module ./core.module` – Sampath Jul 20 '18 at 08:39
Sorry, I missed `.ts` please retry. – eduPeeth Jul 20 '18 at 08:40
Same error for this too: `ng generate component messages --module ./core.module.ts` – Sampath Jul 20 '18 at 08:41
Whats your current directory location? – eduPeeth Jul 20 '18 at 08:48
Please see my post's image above. – Sampath Jul 20 '18 at 08:51
Your module name was incorrect in command . Please retry with updated . – eduPeeth Jul 20 '18 at 08:53
Same error for this too: `ng generate component messages --module ./app.core.module.ts` – Sampath Jul 20 '18 at 08:54
Same command working on my side. Hope your module should be annotated with `@NgModule`. – eduPeeth Jul 20 '18 at 08:55
Yes, It is there on all modules. – Sampath Jul 20 '18 at 09:04

score 7 · Answer 3 · answered Sep 09 '19 at 19:53

7

I stumbled upon this issue and solved it by using a command like below:

ng g c core/header --module core/core.module.ts

I used this command and got error:

ng g c core/header --module core.module.ts

answered Sep 09 '19 at 19:53

Rathma

1,196
2
33
65

1

Yes, for modules in subfolders I also had to specify the path twice like this, or else change to the subfolder first. – Noumenon May 21 '20 at 03:21

score 4 · Answer 4 · answered Jul 05 '20 at 21:52

4

You can save yourself time and effort, instead of adding the command --module ../path/to/name.module each time for a new component, just add this configuration in your angular.json file:

 "projects": {
    "projectName": {
      "schematics": {
        "@schematics/angular:component": {
          "module": "../path/to/name.module"
       //.... other config

After that you can add a component as you would normally.

answered Jul 05 '20 at 21:52

Yassir Khaldi

1,452
1
17
30

how do you define multiple modules – kewur Jun 26 '22 at 17:53

score 2 · Answer 5 · edited Dec 21 '21 at 13:36

2

Just to update below command worked for me :

ng g c complete-path-of-folder/ComponentName --module ../complete-path-of-folder/home.module.ts

edited Dec 21 '21 at 13:36

Sampath

63,341
64
307
441

answered Dec 21 '21 at 10:14

Pankaj Toshniwal

159
1
9

score 0 · Answer 6 · answered Jun 14 '23 at 14:28

you must create a routing (in the parent componenet) before create a module.

ng g m componentParent --routing --flat true

after that ou can create a module:

ng g c messages --module coupens

NB: dont forget to delete ComponenetParentModule from app.module (or parentModule)

Specified module does not exist Angular 6

6 Answers6