Ionic 4 and Angular 7/8 CLI command to generate a component with specific module

Question

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:

Create module: ng g module pets

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

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.

That just creates the component within the pets directory without updating the module. I wanted the component automatically configured in the module. — Ken Dano
– Ken Dano, Commented Oct 16, 2019 at 21:51
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
– Ken Dano, Commented Oct 16, 2019 at 22:04
Yes, I did verify. It does that since forever, but I verified with 8.1.3. Did you verify? — JB Nizet
– JB Nizet, Commented Oct 16, 2019 at 22:08

score 1 · Accepted Answer · 2019-10-16 22:14:08Z

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

jalex19 · Accepted Answer · 2019-10-16 22:10:40Z

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

answered Oct 16, 2019 at 22:10

jalex19

2012 silver badges7 bronze badges

Comments

Nirmal · Accepted Answer · 2020-04-11 14:06:55Z

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

edited Apr 11, 2020 at 14:06

answered Apr 11, 2020 at 13:55

Nirmal

11 bronze badge

Comments

darkxinyu · Accepted Answer · 2021-01-04 09:50:11Z

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

answered Jan 4, 2021 at 9:50

darkxinyu

1

Collectives™ on Stack Overflow

Ionic 4 and Angular 7/8 CLI command to generate a component with specific module

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related