Can't get ionic v4 CLI generated component to work

Ionic Framework
1

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.

2

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

3

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

4

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’]
})
5

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

6

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

7

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

8

don’t move, give me 5

9

@gcamporotondi here you go 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

1 Like
10

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

2 Likes
11

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
image.png1366×768 251 KB