# Can't get ionic v4 CLI generated component to work

**URL:** <https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578>\
**Category:** Ionic Framework\
**Created:** [October 15, 2018, 12:04pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578 "2018-10-15T12:04:27Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![gcamporotondi](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gcamporotondi](https://forum.ionicframework.com/u/gcamporotondi)\
**Post date:** [October 15, 2018, 12:04pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/1 "2018-10-15T12:04:27Z")

</div>

I’m currently working with the latest Ionic and I’m having a hard time trying to get a CLI generates component to work.

I start with a blank proyect and then create a new component with:

```
ionic generate component my-component

```

The command runs fine and creates the following files:

```
CREATE src/app/my-component/my-component.component.html (31 bytes)
CREATE src/app/my-component/my-component.component.spec.ts (664 bytes)
CREATE src/app/my-component/my-component.component.ts (293 bytes)
CREATE src/app/my-component/my-component.component.scss (0 bytes)

```

Then I proceed to use the new component in my main page like this:

```
<ion-content padding>
<my-component></my-component>
</ion-content>

```

The app.module.ts file is updated like this:

```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { MyComponentComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [AppComponent, MyComponentComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

```

This is my default my-component.component.ts file:

```
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

```

When running the app in ionic lab I get the followin error:

> ERROR Error: Uncaught (in promise): Error: Template parse errors: 'my-component' is not a known element

This is my system info:

```
ionic (Ionic CLI) : 4.2.1 
Ionic Framework : @ionic/angular 4.0.0-beta.12
@angular-devkit/build-angular : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli : 6.1.5
@ionic/angular-toolkit : 1.0.0

```

Any ideas why is this happening? I worked before with Ionic 3 and never get this problem.

---

<div class="post-metadata">

**Author:** ![Amoun](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/amoun/32/114548_2.png) [@Amoun](https://forum.ionicframework.com/u/Amoun)\
**Post date:** [October 15, 2018, 1:56pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/2 "2018-10-15T13:56:27Z")

</div>

> [@gcamporotondi](#):
>
> @Component({ selector: ‘app-my-component’, templateUrl: ‘./my-component.component.html’, styleUrls: [‘./my-component.component.scss’] })

Try to change this

> @Component({  
> selector: ‘app-my-component’,  
> templateUrl: ‘./my-component.component.html’,  
> styleUrls: [‘./my-component.component.scss’]  
> })  
> By this

> @Component({  
> selector: ‘app-mycomponent’,  
> templateUrl: ‘./mycomponent.component.html’,  
> styleUrls: [‘./mycomponent.component.scss’]  
> })

Good luck

---

<div class="post-metadata">

**Author:** ![gcamporotondi](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gcamporotondi](https://forum.ionicframework.com/u/gcamporotondi)\
**Post date:** [October 15, 2018, 3:39pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/3 "2018-10-15T15:39:05Z")

</div>

Still no luck. I don’t understan why I should change the file name reference in the templateUrl and styleUrl though.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 15, 2018, 6:12pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/4 "2018-10-15T18:12:11Z")

</div>

in the module where you `declarations` your component, you have to `exports` it too

```
 @NgModule({
    declarations: [
    MyComponentComponent
    ],
   imports: [...],
   exports: [
       MyComponentComponent
   ]

```

p.s.: also if you changed your `@Component` as described above, revert that, that isn’t the problem, following as created by the cli is valid as long as you didn’t changed the file names `my-component.component.xxxx`

```
@Component({
 selector: ‘app-my-component’,
 templateUrl: ‘./my-component.component.html’,
 styleUrls: [’./my-component.component.scss’]
})
```

---

<div class="post-metadata">

**Author:** ![gcamporotondi](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gcamporotondi](https://forum.ionicframework.com/u/gcamporotondi)\
**Post date:** [October 15, 2018, 6:53pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/5 "2018-10-15T18:53:53Z")

</div>

Thanks I’ll try again, do you mean the app.module or the home.module (or whatever page I use the component)?

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 15, 2018, 7:05pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/6 "2018-10-15T19:05:42Z")

</div>

Depends you architecture, in the module where you declare you page. If you’ve got one single `component.module` for all your module, that would be there. If you’ve got one module pro component, then that would be in that specific module

And then of course, where you use your component, you should `imports` its module, so I guess in what you call `home.module`

---

<div class="post-metadata">

**Author:** ![gcamporotondi](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gcamporotondi](https://forum.ionicframework.com/u/gcamporotondi)\
**Post date:** [October 15, 2018, 7:10pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/7 "2018-10-15T19:10:03Z")

</div>

Still couldn’t make it work. Any idea where to find a working example? I can make my way out with that.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 15, 2018, 7:21pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/8 "2018-10-15T19:21:10Z")

</div>

don’t move, give me 5

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 15, 2018, 7:30pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/9 "2018-10-15T19:30:43Z")

</div>

@gcamporotondi here you go [https://github.com/peterpeterparker/demo-camera-capacitor](https://github.com/peterpeterparker/demo-camera-capacitor)

I did

```
ionic generate component my-component

```

then I reverted the automatic modification on `app.module.ts` and I have create a new module call `components.module.ts` to import/export my-component

then in `home.module` I import the `components.module`

for further components you could decide what strategy you would like to apply:

1. one components.module which contains all your modules, if so just import/export the new components in this components moduel

2. create one components.module like pro components

---

<div class="post-metadata">

**Author:** ![gcamporotondi](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@gcamporotondi](https://forum.ionicframework.com/u/gcamporotondi)\
**Post date:** [October 15, 2018, 10:22pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/10 "2018-10-15T22:22:29Z")

</div>

Man, you are the best! Thanks so much for your help I was truly stuck :-/

---

<div class="post-metadata">

**Author:** ![harrySinghRawat](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/harrysinghrawat/32/124986_2.png) [@harrySinghRawat](https://forum.ionicframework.com/u/harrySinghRawat)\
**Post date:** [March 29, 2019, 6:13am UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/11 "2019-03-29T06:13:26Z")

</div>

wait dear @gcamporotondi , let’s type ionic generate  
then you will get a lot of options then choose page  
then CLI automatically add modul.ts for ur component

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/b/c/bcbc2e5adef2b6b9f90b68fdb90e524f0252c738.png)

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:13pm UTC](https://forum.ionicframework.com/t/cant-get-ionic-v4-cli-generated-component-to-work/144578/12 "2021-07-19T21:13:13Z")

</div>