Question

我有一个ModalComponent

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

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

现在，如果我在页面page.module.ts中进行同样的操作并尝试使用模式，则该方法将不起作用。为什么？

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

我已经读到这可能由于离子4而已过时，因此我确保package.json的基础与其模板相同。

我的理想解决方案是在页面内的某个组件中显示模式，但由于上述错误，我无法使其工作。

我该如何注册我的组件，以便可以以编程方式将其绑定到页面内和/或嵌套在该页面内的组件内？

下面的更多信息

这是我显示模式的方式：

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 { }

完全错误：

ERROR Error: Uncaught (in promise): Error: No component factory found for ModalComponent. Did you add it to @NgModule.entryComponents?

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

Answer 1

此答复者来自Ionic FrameWork Forum

中的“ razmans”

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

app.module.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 {}

home.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();
  }

Answer 2

只需将模式页面模块导入到app.module.ts的imports数组中

app.module.ts

    import { NgModule } from '@angular/core';
    import { ModalPageModule } from './modal/modal.module';

    imports: [ ..., ModalPageModule]

然后在需要模态的页面中，导入模态页面本身和ModalController

modal.page

    import { ModalController } from '@ionic/angular';
    import { ModalPage } from '../modal/modal.page';

    @Component({
    selector: ...,
    templateUrl: ...,
    styleUrls: ...,
    })

    export class MyPageThatRequiresModal implements OnInit {

    constructor(public modalController: ModalController) { }

    ...

     async presentModal() {
      const modal = await this.modalController.create({
        component: ModalPage,
        componentProps: { value: 123 }
     });

     return await modal.present();

    }

    ...


    }

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

2 个答案: