I'm currently facing a challenge while working with the latest version of Ionic. I am struggling to make a CLI-generated component work properly.
After starting with a blank project, I create a new component using the following command:
ionic generate component my-component
The command runs successfully and generates 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)
Next, I attempt to use the newly created component in my main page as follows:
<ion-content padding>
<my-component></my-component>
</ion-content>
I update the app.module.ts file accordingly:
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 {}
However, upon running the app in ionic lab, I encounter the following error:
ERROR Error: Uncaught (in promise): Error: Template parse errors: 'my-component' is not a known element
Here are the details of my system:
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 insights on why this issue is occurring? I have previously worked with Ionic 3 without encountering this problem.
update:
Below is the default content of 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() {
}
}