can't get ionic v4 CLI generated component to work

问题

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 {}

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.

update:

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() {
  }

}

回答1:

In order to use a custom component inside another component you have to include it in exports array.

@NgModule({
  ....
  declarations: [AppComponent, MyComponentComponent],
  entryComponents: [],
  exports:[MyComponentComponent]
  ....
})
export class AppModule {}

You can either do this way or you can make all your custom components inside another customModule and then import that module in app.component.ts page.

The name you are referring to the component is wrong. selector for your MyComponentComponent class is app-my-component, so you have to use <app-my-component></app-my-component> instead of <my-component></my-component>.

来源：https://stackoverflow.com/questions/52808342/cant-get-ionic-v4-cli-generated-component-to-work

标签

javascript

angular

typescript

ionic-framework