时间戳

首页 > 解决方案 > 两个页面的 ionic 4 translateModule 将导致 ERROR RangeError: Maximum call stack size exceeded

module - 两个页面的 ionic 4 translateModule 将导致 ERROR RangeError: Maximum call stack size exceeded

问题描述

我正在使用 ionic 4 创建我的应用程序项目。在过去，即 ionic 3，我可以为每个页面 module.ts 导入 TranslateModule.forChild()。但是对于 ionic 4，如果两个页面加载 TranslateModule.forChild()，则会导致超出最大调用堆栈大小。如果我删除其中一个，它会在没有堆栈大小的情况下正常工作，但只是该页面无法再翻译。

实际上，我的离子版本是 5.4.6。

这是我的代码：app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { 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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
  exports: [ TranslateModule ]
})
export class AppModule {}

**home.module.ts**

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HomePage } from './home.page';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    TranslateModule.forChild()
  ],
  declarations: [HomePage]
})
export class HomePageModule {}


**auth.module.ts**

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { AuthPage } from './auth.page';
import {TranslateModule} from '@ngx-translate/core';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TranslateModule.forChild()
  ],
  declarations: [AuthPage]
})
export class AuthPageModule {}

标签： moduleionic4translate

解决方案

我只是通过了相同的问题并解决了它，您应该将所有页面视为 LazyLoad，就像您在 home.module 中实际执行的操作一样：

RouterModule.forChild([
    {
      path: '',
      component: HomePage
    }
]),

因此，在您的 auth.module 中，导入声明也必须包含 RouterModule：

RouterModule.forChild([
    {
      path: '',
      component: AuthPage
    }
])
...

这应该可以解决问题并避免超出堆栈大小。如果您将某些东西用作 SharedModule，我建议您在其中添加 TranslateModule 以使其在您的应用程序结构中更容易：

import { TranslateModule } from '@ngx-translate/core';

@NgModule({
    declarations: [],
    imports: [
        ...
        TranslateModule,
    ],
    exports: [
        ...
        TranslateModule,
    ]
})
export class SharedModule { }

然后在您的任何下一页模块中，只需导入 SharedModule 即可完成：

imports: [
    ...
    SharedModule,
]

希望能帮助到你！

推荐阅读