Question

我在src / component / accounting-setting

中创建了一个组件

计费setting.ts
计费setting.html
计费setting.scss
计费setting.module.ts

源代码是

import { NgModule , ViewChild} from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { AccountingSettingComponent } from './accounting-setting';

@NgModule({
  declarations: [
    AccountingSettingComponent,
  ],

imports: [IonicModule], 
  entryComponents: [
       AccountingSettingComponent
  ],

exports: [AccountingSettingComponent]
})

export class AccountingSettingComponentModule {}

但是当我在src / pages / accounting.module.ts

import { NgModule , ViewChild} from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AccountingPage } from './accounting';
import { Chart } from 'chart.js'; 
import { AccountingSettingComponentModule } from '../../components/accounting-setting/accounting-setting.module';
@NgModule({
  declarations: [

  ],
  imports: [
    Chart,
    IonicPageModule.forChild(AccountingPage),
    AccountingSettingComponentModule,


  ],
  entryComponents: [

  ],
})
export class AccountingPageModule {}

抛出错误没有组件工厂发现实际上我用这个popover html in account-setting.html popover。为了防止它延迟加载，我不会在app.module.ts

Answer 1

从account-setting.module.ts

中删除以下内容

entryComponents: [
       AccountingSettingComponent
  ]

<强>为什么吗

条目组件是Angular强制加载的任何组件   类型。

通过其选择器以声明方式加载的组件不是条目   成分

大多数应用程序组件以声明方式加载。 Angular使用了   组件的选择器，用于在模板中定位元素。然后呢   创建组件的HTML表示并将其插入   所选元素的DOM。这些都不是入门组件。

当您只应声明并导出模块文件中的组件时，您将以声明方式加载account-setting组件并作为条目。

Reference by Angular

Answer 2

在两种情况下可能会发生此错误：

您尝试将[navCtrl.push（...）]导航到页面。
您尝试导航到组件。

使用延迟加载时的正确方法：

创建一个与页面名称兼容的模块。
将页面/组件添加到模块的以下部分：声明，导出，entryComponents。
如果导航到组件，则需要将 module 添加到app.module.ts导入部分。
使用正确的语法导航到页面：

4.1页（页面名称为字符串”）：

this.navCtrl.push('ExamplePage', {})

4.2组件（组件类-不是字符串）：

this.navCtrl.push(ExamplePageComponent, {})

通过延迟加载导航到页面/组件：

example.page.module.ts

@NgModule({
  declarations: [
      ExamplePage,
      ExampleComponent
  ],
  imports: [
    IonicPageModule.forChild(ExamplePage),
    TranslateModule.forChild(),
    IonicImageLoader,
  ],
  exports: [
      ExamplePage,
      ExampleComponent

  ],
  entryComponents: [
      ExamplePage,
      ExampleComponent
  ]
})
export class ExamplePageModule { }

example.page.ts

@IonicPage({
    name: 'ExamplePage'
})
@Component({
   selector: 'example-page',
   templateUrl: 'example.page.html'
})

export class ExamplePage {
    constructor() {};
}

example.component.ts

@Component({
  selector: 'example-component',
templateUrl: './example.component.html'
})

export class ExampleComponent {
    constructor() {}
}

仅在导航到具有延迟加载的组件时添加此组件，添加延迟加载模块，该模块具有将成为entryComponent才能附加Factory才能创建它的组件：

app.module.ts

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IonicModule.forRoot(MyApp, {}),
    ExamplePageModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
  ]
})
export class AppModule { }

Answer 3

角度模块声明中不需要ViewChild。此外，您将需要IonicPageModule而不是IonicModule。你的声明没问题。在您的导入中：[IonicPageModule.forChild(AccountingSettingComponent)]。您不需要输入组件。

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {AccountingSettingComponent} from './accounting-setting';

@NgModule({
  declarations: [AccountingSettingComponent],
  imports: [IonicPageModule.forChild(AccountingSettingComponent)], 
  exports: [AccountingSettingComponent]
})

export class AccountingSettingComponentModule {}

在您的其他模块中，请遵循类似的方法，并在使用之前使用IonicPage（）装饰您的组件。

如果您的初始模块应该是共享模块，那么您不需要scss，html和ts文件。

共享模块的一个例子

import {NgModule} from "@angular/core"
import {CheckboxComponent} from "./checkbox/checkbox";
import {IonicModule} from "ionic-angular";
import {DeviceCardComponent} from "./device-card/device-card";
import {TemplateCardComponent} from "./template-card/template-card";

@NgModule({
    declarations:
        [
            CheckboxComponent,
            DeviceCardComponent,
            TemplateCardComponent 
        ],
    imports: [IonicModule],
    exports:
        [
            CheckboxComponent,
            DeviceCardComponent,
            TemplateCardComponent
        ]
})
export class ComponentsModule{}

并将此共享模块添加到您尝试使用其中任何组件的任何其他模块的导入中。

在ionic3中找不到组件工厂

3 个答案: