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

【问题标题】：Lazy Loading Angular / Ionic 3 Component AOT "is not a known element: Error"延迟加载Angular / Ionic 3 Component AOT“不是已知元素：错误”
【发布时间】：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 module{path: '', loadChildren: '../views/views.module#ViewsModule'},
如果您使用了任何其他语法，它将最终出现错误
@Joel Joseph - 谢谢。是的，这就是问题所在。显然，视图需要与父组件位于同一目录中。我在共享目录中有视图 .html 文件，因此出现了问题。再次感谢。

标签： javascript angular typescript ionic-framework ionic3

【解决方案1】：

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

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

改为

templateUrl: 'list.html'

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

【讨论】：