Webpack chunks无法在Android上加载。Web和iOS都很好( ChunkLoadError: Loading chunk pages-home-home-module failed.)。

Question

我有一个离子4电容应用，在iOS上正常工作。我正在使用Angular 8与懒加载。

然而，每当我想运行android应用时，我得到了大量的错误，说许多chunks未能加载。

我没有得到任何错误，做 ionic build --prod

以下是错误信息。

E/Capacitor/Console: File: http://localhost/polyfills-es2015.92885f6bd7b81e5291ae.js - Line 1 - Msg: Unhandled Promise rejection: Cannot read property 'isProxied' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'isProxied' of undefined TypeError: Cannot read property 'isProxied' of undefined
        at http://localhost/main-es2015.68cf7a0c19a90cf519a4.js:6:888639
E/Capacitor/Console: File: http://localhost/main-es2015.68cf7a0c19a90cf519a4.js - Line 6 - Msg: ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 29 failed.
    (error: http://localhost/29-es2015.34a50a13c82e01442deb.js)
    ChunkLoadError: Loading chunk 29 failed.
    (error: http://localhost/29-es2015.34a50a13c82e01442deb.js)
        at Function.r.e (http://localhost/runtime-es2015.cd4b72e95a2ee61bcb12.js:1:3840)
        at Je (http://localhost/main-es2015.68cf7a0c19a90cf519a4.js:6:1440589)
        at ln.loadModuleFactory (http://localhost/main-es2015.68cf7a0c19a90cf519a4.js:6:995746)
        at ln.load (http://localhost/main-es2015.68cf7a0c19a90cf519a4.js:6:995488)
        at l.project (http://localhost/main-es2015.68cf7a0c19a90cf519a4.js:6:984926)
        at l._tryNext (http://localhost/main-es2015.68cf7a0c19a90cf519a4.js:6:39787)
        at l._next (http://localhost/main-es2015.68cf7a0c19a90cf519a4.js:6:39705)
        at l.next (http://localhost/main-es2015.68cf7a0c19a90cf519a4.js:6:88863)
        at e._subscribe (http://localhost/main-es2015.68cf7a0c19a90cf519a4.js:6:1104184)
        at e._trySubscribe (http://localhost/main-es2015.68cf7a0c19a90cf519a4.js:6:505917)

这仅仅是29号块错误的一个例子，但我在许多其他块中也得到了同样的错误。

我确实在web应用上遇到了类似的问题，因为我忘记在index.html中声明base href。然而，目前它是正确的位置。

我在Android上具体得到这个错误，并且已经能够在iOS上测试我的路由和模块。

我想知道是否有人能理解这个问题意味着什么。我已经被卡住了，现在已经有好几天了，真的很感谢大家的帮助。

我使用的是Android 8.1.0。

注:该应用应该是显示一个登录弹窗（oauth2），然后重定向到主页。登录弹出窗口（在inappbrowser中）确实按照预期显示，并在登录过程完成后重定向到应用程序。一旦重定向到应用程序，我得到一个空白的屏幕，没有进一步的错误。

在Splashscreen自动隐藏后，在app.component.ts的开头抛出了chunk错误。

app.modules.ts。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    FormsModule,
    AuthModule.forRoot(),
    IonicModule.forRoot(),
    CoreModule,
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    FontAwesomeModule,
    // ChatEngineModule
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    ProgramSelectorComponent
  ],
  exports: [
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  providers: [
    {provide: APP_BASE_HREF, useValue: '/'},
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    HttpClient,
    Diagnostic,
    LocationAccuracy,
    ScreenOrientation,
    IonicStorageModule,
    AppCenterAnalytics,
    AndroidPermissions,
    VideoCapturePlus,
    FontAwesomeService,
    OidcConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: loadConfig,
            deps: [OidcConfigService],
            multi: true,
        },
    LocalNotifications,
    InAppBrowser,
  ]
})
export class AppModule { 
  constructor(private oidcSecurityService: OidcSecurityService, private oidcConfigService: OidcConfigService) {
    console.log("INSIDE THE APP MODULE CONSTRUCTOR");
    this.oidcConfigService.onConfigurationLoaded.subscribe((configResult: ConfigResult) => {

        // Use the configResult to set the configurations

        const config: OpenIdConfiguration = {
            stsServer: configResult.customConfig.stsServer,
            redirect_url: 'XXX',
            post_logout_redirect_uri: 'XXX',
            client_id: 'XXXX',
            scope: 'XXXX',
            response_type: 'XXX',
            // silent_renew: true,
            log_console_debug_active: true,
            // all other properties you want to set
        };

        this.oidcSecurityService.setupModule(config, configResult.authWellknownEndpoints);
    });
}
}

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>AccuV App</title>
  <base href="/" />
  <meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  <!-- to avoid problem with localstorage in ionic  -->
  <meta http-equiv="Content-Security-Policy"
    content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *;img-src 'self' blob: data: http:; worker-src 'self' blob: http:; media-src 'self' blob: http: https:" />
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="http://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXX"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->
  <link href="http://amp.azure.net/libs/amp/2.3.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
  <script src="http://amp.azure.net/libs/amp/2.3.0/azuremediaplayer.min.js"></script>
</head>

<body>
  <!-- Ionic's root component and where the app will load -->
  <app-root></app-root>
  <!-- The polyfills js is generated during the build process -->
  <script src="polyfills-es2015.js"></script>
  <!-- The vendor js is generated during the build process
         It contains all of the dependencies in node_modules -->
  <script src="vendor-es2015.js"></script>
  <!-- The main bundle js is generated during the build process -->
  <script src="main-es2015.js"></script>

  <!-- TokBox OpenTok -->
  <!-- <link rel="stylesheet" href="https://assets.tokbox.com/solutions/css/style.css">
  <script src="opentok.js"></script> -->
</body>

</html>

就我所读到的内容来看，这似乎是一个模板问题。也许我使用的离子元件不是以它应该使用的方式使用的，但奇怪的是，prod build却能完美地工作。我会做更多的研究，如果我发现了什么，会告诉你。

我刚刚删除了www文件夹，并做了另一个构建。我得到了同样的错误，以及这个错误。

E/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 43427 - Msg: ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk pages-home-home-module failed.
    (error: http://localhost/pages-home-home-module-es2015.js)

好像是我的主页模块出了问题 It seems like there is an issue with my home page module. 这里是主页模块。

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } 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 { ProgramSelectorComponent } from 'src/app/components/program-selector/program-selector.component';

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

我添加了... ProgramSelectorComponent 在 entryComponents 因为我在一个模态控制器中使用它。

  switchProgram() {
    let modal = this.modalCtrl.create({component: ProgramSelectorComponent});
    modal.then(m => m.present());
  }

谢谢你！（问题在ionic论坛上。https:/forum.ionicframework.comtv4-chunks-are-unable-to-load-on-android-web-and-ios-are-fine-chunkloaderror-loading-chunk-pages-home-home-module-failed189505。)