angular - 错误在 Ionic 4 中找不到组件工厂...

Question

我有一个 ModalComponent

如果我在我的 app.module.ts 中这样声明它，它工作正常，我可以在我的应用程序中使用它。

@NgModule({
  declarations: [AppComponent, ModalComponent],
  entryComponents: [ModalComponent],
  ...
})

现在，如果我在我的页面 page.module.ts 中做同样的事情，并尝试在那里使用模式，它就不起作用了。为什么？

我收到此错误 No component factory found for ... yadaayaydayada

我读到这可能是由于 ionic 4 而导致的过时脚本问题，因此我确保我的 package.json 基础与他们的模板相同。

我理想的解决方案是在页面中显示来自组件的模式，但由于上述错误，我无法让它工作。

我需要如何注册我的组件，以便我可以在页面内和/或嵌套在该页面的组件内以编程方式绑定(bind)它？

下面有更多信息

这是我显示模态的方式:

async presentModal() {
  const modal = await this.ui.modalController.create({
    component: ModalComponent,
  });

  return await modal.present();
}

• 我的嵌套组件和模态组件没有@NgModule 的

完成app.module.ts

//Omitting Imports

@NgModule({
  declarations: [AppComponent, ModalComponent],
  entryComponents: [ModalComponent],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    HttpClientModule,
    OAuthModule.forRoot(),
    IonicModule.forRoot(),
    AppRoutingModule, // <-- This is where the Page is imported
  ],
  providers: [
    OAuthService,
    UrlHelperService,
    InAppBrowser,
    StatusBar,
    SplashScreen,
    Camera,
    WebView,
    File,
    FileTransfer,
    VideoEditor,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: UnAuthorizedService, multi: true, }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './battles/tabs/tabs.module#TabsPageModule' }, <-- page registered here
   //omitting other routes
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

这是我的tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'battles',
    component: TabsPage,
    children: [
      {
        path: 'user',
        children: [
          {
            path: '',
            loadChildren: '../user/user.module#UserPageModule' <-- Here is my page (I think this might be lazy loaded not sure.)
          }
        ]
      }
      //Omitting other routes
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule { }

这是page.module

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

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

import { UserPage } from './user.page';

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [UserPage],
  // I would declare my modal like this same as in the app.module, 
  // but this isn't working, for now I'm storing it in app.module
  //    declarations: [UserPage, ModalComponent],
  //    entryComponents: [ModalComponent],

})
export class UserPageModule { }

完整错误:

错误错误:未捕获( promise ):错误:未找到 ModalComponent 的组件工厂。你把它添加到@NgModule.entryComponents了吗？

我想是因为我的页面是延迟加载的，所以我正面临 this issue由于缺乏 Angular 知识，我无法理解如何解决它。

Answer 1

此答案来自 Ionic FrameWork Forum 中的“razmans”

首先将 PageModule 导入到 app.module.ts 中，然后只有你可以导入到 Home 中。

应用程序模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FirstPageModule} from './first/first.module'


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,FirstPageModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

首页.ts

import { Component } from '@angular/core';
import { NavController,AlertController,ModalController } from '@ionic/angular';
import {FirstPage} from '../first/first.page';


@Component({
  selector: 'app-page-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor( private modalCtrl:ModalController,private alertCtrl:AlertController) {}

  async moveToFirst()
  {
    const modal = await this.modalCtrl.create({
     component: FirstPage
   });

   return await modal.present();
  }
}

这将打开我的模式。关闭它是另一回事，而不是让 ViewController 来做它，你需要让 ModalController 用 this.modalCtrl.dismiss 来做它。这是我从 first.page.ts 关闭模态的方式

import { Component, OnInit } from '@angular/core';
import { NavController,ModalController } from '@ionic/angular';


@Component({
  selector: 'first',
  templateUrl: './first.page.html',
  styleUrls: ['./first.page.scss'],
})
export class FirstPage implements OnInit {

  constructor(private nav:NavController,private modalCtrl:ModalController) {}

  ngOnInit() {
  }

  closeModal()
  {
    this.modalCtrl.dismiss();
  }