无法将组件加载到页面中 - Angular 4/Ionic 3

Posted 2023-02-22

【中文标题】无法将组件加载到页面中 - Angular 4/Ionic 3

【英文标题】：Not able to load component into page - Angular 4/Ionic 3

【发布时间】：2018-06-17 02:52:59

【问题描述】：

页面上显示一个按钮。但是，当用户选择按钮时，子组件会出现，但会出现以下错误 - 错误：未捕获（在承诺中）：错误：未找到 ModalComponent 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？

我设置的结构如下，这是与 Ionic 3 结合使用的 -

app (folder) 
 - app.module
 - app.component

components (folder)
 - modal-component.ts

pages (folder)
 - pageOne (folder)
   - pageOne.module
   - pageOne.ts

我把modal组件放在pageOne.module中

pageOne.module

@NgModule(
    declarations: [
        pageOne,
        modalComponent

    ],
    entryComponents: [
        modalComponent
    ],
    imports: [
        IonicPageModule.forChild(pageOne),
    ],
    exports: [
        pageOne,

    ]
)
export class pageOneModule 

pageOne.ts

@IonicPage()

@Component(
  selector: 'pageOne',
  templateUrl: 'pageOne.html',

)
export class pageOne 

【问题讨论】：

你是否尝试使用pageOne.ts中的任何组件

你是为延迟加载模块做的吗？

是的，我都在做

尝试删除entryComponents: [ modalComponent ],

得到同样的错误

【参考方案1】：

你在引导你的模块吗？

把它放在会加载的地方

import  platformBrowserDynamic  from '@angular/platform-browser-dynamic';
import  pageOneModule  from './pages/pageOne/pageOne.module';

document.addEventListener('DOMContentLoaded', () => 
  platformBrowserDynamic().bootstrapModule(pageOneModule)
  .catch(err => console.log(err));
);

我还建议使用 angular cli，它会为你做这种事情。

【讨论】：

仍然出现同样的错误。把它放在我的 app.module 中

我认为问题在于它没有被加载，如果你在 catch 之后放置控制台日志，我认为它不会被调用。我建议使用 cli 创建一个空项目，以便您了解 ppl 如何构建 angular 2 应用程序。我认为您在入口点中缺少的主要思想，这通常是在 .angular-cli.json （如果使用 cli）、 webpack-config.js （如果使用 webpack）中设置的，或者您的模块加载器会这样做。不知道ionic有没有自己的方法，我没用过。

【参考方案2】：

您的页面模块设置不适合延迟加载。我不确定究竟是什么导致了确切的错误，但是当您延迟加载时，您不会导出或声明入口组件。将您的页面模块更改为：

@NgModule(
    declarations: [
        pageOne,
        modalComponent ],
    imports: [ IonicPageModule.forChild(pageOne) ]
)
export class pageOneModule 

现在，您没有发布您的模态组件代码，所以我不确定它是否是您制作的。如果它类似于 Material2 Modals，则需要在 entryComponents 中。此外，您的导航堆栈现在应该使用页面的字符串名称，而不是导入以确保您正在加载相同的对象而不是克隆它。

【讨论】：

如果您查看我上面的评论，我删除了条目组件，并且完全按照您当前提到的方式完成了操作。我创建了模态组件代码。

你还在导出pageOne吗？

是的，不要那样做。如果您延迟加载模块，则对 IonicPageModule 的调用会将其注册到 Ionic。我的猜测是您正在导出它，然后将其导入您的主应用程序中，因此它是一个单例。虽然没有看到 pageOne 和您的 app.ts 的 html，但我并不完全确定