无法使ionic v4 CLI生成的组件正常工作 [英] can't get ionic v4 CLI generated component to work

问题描述

我目前正在使用最新的Ionic，并且很难使CLI生成组件正常工作.

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

我从一个空白的proyect开始，然后使用以下命令创建一个新组件:

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>

app.module.ts文件的更新如下:

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:

错误错误:未捕获(承诺):错误:模板解析错误:"my-component"不是已知元素

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

这是我的系统信息:

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

任何想法为什么会这样?我之前曾在Ionic 3上工作过，却从未遇到过这个问题.

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

更新:

这是我的默认my-component.component.ts文件:

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

}

推荐答案

要在另一个组件中使用自定义组件，必须将其包含在 exports 数组中.

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

您可以这样做，也可以将所有自定义组件放入另一个 customModule 中，然后将该模块导入 app.component.ts 页面.

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.

您所指的组件名称是错误的.您的 MyComponentComponent 类的选择器是 app-my-component ，因此您必须使用< app-my-component></app-my-component> 代替< my-component></my-component> .

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>.

这篇关于无法使ionic v4 CLI生成的组件正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！