无法将组件导入页面-Ionic 4

时间:2019-04-08 22:04:01

标签: angular typescript ionic-framework ionic4

我正在使用Ionic 4和Angular 7。

我只想构建一个组件以便稍后在应用程序中重用,但出现经典错误:

  

错误:未捕获(承诺):错误:模板解析错误:'home-cmp'   不是已知的元素:   1.如果“ home-cmp”是Angular组件,请验证它是否是此模块的一部分。   2.如果“ home-cmp”是Web组件,则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。

我做了一个here之类的共享模块,但仍然无法正常工作。

I did the same

共享模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule
  ],
  exports : [ HomeComponent]
})
export class PagesModule { }

我使用它的模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { PagesModule } from 'src/app/components/pages/pages.module';


const routes: Routes = [
  {
    path: '',
    component: HomePage
  }
];

@NgModule({
  imports: [
    PagesModule,
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

这是文件树:

file tree

编辑

我使用使用自己的路由模块的标签

编辑2

Same problem但没有答案

1 个答案:

答案 0 :(得分:0)

如果您在另一页的html文件中使用<home-cmp>,请在该页的module.ts中的@NgModule内添加以下内容:

schemas: [CUSTOM_ELEMENTS_SCHEMA]

从文档中

  

定义一个架构,该架构允许NgModule包含以下内容:

     

以破折号(-)命名的非角度元素。

     

以破折号(-)命名的元素属性。破折号大小写是自定义元素的命名约定。