延迟加载Angular / Ionic 3 Component AOT“不是已知元素：错误”

Posted 2023-03-13

【中文标题】延迟加载Angular / Ionic 3 Component AOT“不是已知元素：错误”

【英文标题】：Lazy Loading Angular / Ionic 3 Component AOT "is not a known element: Error"

【发布时间】：2019-04-27 14:31:29

【问题描述】：

这让我发疯了，希望有人可以解决这个问题。我懒加载我的 Ionic 组件在开发中一切正常，但是当我去编译 AOT 时会抛出一个错误。我花了大约 4 个小时尝试不同的方法来加载它，我迷路了，不断收到同样的错误。

根据我在示例中阅读和发现的内容，这应该是正确的。我在这里想念什么？

'tester' is not a known element: 1. If 'tester' is an Angular component, then verify that it is part of this 
            module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" 
            <ion-list *ngIf="!id"> <ion-list-header> [ERROR -><tester></tester> 

//  components/tester/tester.ts

import  Component  from '@angular/core';
@Component(
  selector: 'tester',
  templateUrl: 'tester.html'
)
export class TesterComponent 

  text: string;

  constructor() 
    console.log('Hello TesterComponent Component');
    this.text = 'Hello World';
  

// components/components.module.ts

import  NgModule  from '@angular/core';
import  TesterComponent  from './tester/tester';
import IonicModule from "ionic-angular";
@NgModule(
    declarations: [TesterComponent],
  imports: [IonicModule],
    exports: [TesterComponent,
    ]
)
export class ComponentsModule 

//  pages/faq/faq.module.ts

import  NgModule  from '@angular/core';
import  IonicPageModule  from 'ionic-angular';
import  FaqPage  from './faq';
import ComponentsModule from "../../components/components.module";

@NgModule(
  declarations: [
    FaqPage
  ],
  imports: [
    IonicPageModule.forChild(FaqPage), ComponentsModule
  ],
)
export class FaqPageModule 

// pages/faq/faq.html
 <tester></tester>

编辑

感谢@Joel Joseph - 显然视图需要与父组件位于同一目录中。我在共享目录中有视图 .html 文件，因此出现了问题。

templateUrl: '../shared/view/list.html'

改为

templateUrl: 'list.html'

现在可以正常编译了。如果其他人有这个问题，会留下这个。

【问题讨论】：

你能在你的主路由器中为你延迟加载功能模块的根模块或 app.module.ts 发布代码

还要确保你使用这些语法来lazy load the feature modulepath: '', loadChildren: '../views/views.module#ViewsModule',

如果您使用了任何其他语法，它将最终出现错误

@Joel Joseph - 谢谢。是的，这就是问题所在。显然，视图需要与父组件位于同一目录中。我在共享目录中有视图 .html 文件，因此出现了问题。再次感谢。

【参考方案1】：

感谢@Joel Joseph - 显然视图需要与父组件位于同一目录中。我在共享目录中有视图 .html 文件，因此出现了问题。

templateUrl: '../shared/view/list.html'

改为

templateUrl: 'list.html'

现在可以正常编译了。如果其他人有这个问题，会留下这个。