2

I have an Ionic4/Angular 7/8 app. I want to create a component and have it auto configured in a specific module using the Angular CLI 7.3.9 and 8.1.3, but keep getting the error "File ... does not exist."

None of the answers in this post works either. Create component to specific module with Angular-CLI

Steps to reproduce the issue:

  1. Create module: ng g module pets

This created a file named pets.module.ts in the [my_project_dir]/src/app/pets directory.

  1. Generate a component and add to specified module using CLI 7.3.9 or 8.1.3
ng g component pets/cat --module=pets.module.ts
ng g component pets/cat --module=pets/pets.module.ts

Executing the either the above command from my project directory or from the [my_project_dir]/src/app directory triggered this error message File pets/pets.module.ts does not exist.

Issuing this command ng g component pets/cat -m pets.module.ts in 7.3.9 created the component cat, but neither pets.module.ts or app.module.ts was updated.

Issuing the command ng g component pets/cat -m pets.module.ts in 8.1.3 caused this error message: Unknown option: '-m'

As a workaround, I could update the module.ts file manually but would like to know the solution for future reference. Any help is appreciated. Thanks.

Updated 10/16/2019 6:30pm

It works if the Angular app is created using ng new app-name command, but does NOT if the app is generated via the ionic start app-name blank --type=angular command although the project structure is very similar between the two apps.

Ken Dano
  • 21
  • 1
  • 4
  • `ng g c pets/cat` – JB Nizet Oct 16 '19 at 21:46
  • That just creates the component within the pets directory without updating the module. I wanted the component automatically configured in the module. – Ken Dano Oct 16 '19 at 21:51
  • No, it does update the module too. – JB Nizet Oct 16 '19 at 21:55
  • Did you verify? If so, what version of Angular CLI did you use? I don't think it makes a difference, but my Ionic/Angular project was created using this Ionic v4 command: `ionic start my-app blank --type=angular` – Ken Dano Oct 16 '19 at 22:04
  • Yes, I did verify. It does that since forever, but I verified with 8.1.3. Did **you** verify? – JB Nizet Oct 16 '19 at 22:08
  • Yes. I created a fresh Angular app via the `ng new ...` command and it worked. There could be a bug with Ionic 4 or some setting in my Ionic 4/Angular 7 app that prevents the `ng g component pets/cat` from updating the module. – Ken Dano Oct 16 '19 at 22:35
  • I have the exact same problem in an ionic5/Angular11 project... None of the answers provided here has worked. If starting a project with `ionic start` is causing it, then i guess the `--module` option is broken in ionic? – Jette Feb 19 '21 at 10:33

4 Answers4

1
ng new petstore --skip-install
cd petstore
ng g module pets
ng g component pets/cat -m pets

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CatComponent } from './cat/cat.component';



@NgModule({
  declarations: [CatComponent], // <- note this
  imports: [
    CommonModule
  ]
})
export class PetsModule { }


ng version

Angular CLI: 8.3.10
Node: 10.15.3
OS: linux x64
Angular: 8.2.11

I can't reproduce ng-cli v8.1.3 since I don't have that installed. "works for me". Try issuing the exact same commands as I did. aka just naming the module pets not pets.module.ts or other

tree src/app 
src/app
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
└── pets
    ├── cat
    │   ├── cat.component.css
    │   ├── cat.component.html
    │   ├── cat.component.spec.ts
    │   └── cat.component.ts
    └── pets.module.ts

2 directories, 10 files
0

You should not need to specify the module if you already created the module.

ng g m pets

this should generate a folder called pets with a file called pets.module.ts

then when you run

ng g c pets/cat

It should generate a cat.component.ts inside pets/cat folder.

I'd recommend to change a little bit your structure to something like:

app/
  modules/
    pets/
      components/
        cat/
          cat.component.[ts, html, scss, spec.ts]
      pets.module.ts
      pets.component.[ts, html, scss, spec.ts]
app.component.ts
app.component.html
app.module.ts

So you do: ng g m modules/pets and then ng g c modules/pets/components or using the --module(-m) flag

Hope it helps

jalex19
  • 201
  • 2
  • 7
0

I also have the same problem and I fixed it using below command.

ng g component pets/cat --module=/src/app/pets/pets.module.ts --export=true

or

ionic g component pets/cat --module=/src/app/pets/pets.module.ts --export=true
Nirmal
  • 1
  • 1
0

Nirmal's answer should be the accepted one, confirmed with the latest ionic 5 + angular 10

I also have the same problem and I fixed it using below command.

ng g component pets/cat --module=/src/app/pets/pets.module.ts --export=true

or

ionic g component pets/cat --module=/src/app/pets/pets.module.ts --export=true
darkxinyu
  • 1