Webpack chunks are unable to load on Android. Web and iOS are fine ( ChunkLoadError: Loading chunk pages-home-home-module failed.)

问题

I have an ionic 4 capacitor app that is working properly on iOS. I am using Angular 8 with lazyloading.

However, whenever I want to run the android app, I get a significant amount of errors saying that many chunks failed to load.

I do not get any error doing ionic build --prod

Here are the error messages:

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)

This is simply an example of the error with chunk 29, but I also get the same errors for many other chunks.

I did get a similar issue on the web app because I forgot to declare the base href in the index.html. However, it is correctly in place at the moment.

I am specificly getting this error on Android and have been able to test my routing an modules on iOS.

I was wondering if anyone could understand what this issue means. I have been stuck on it for serval days now and would really appreciate some help.

I am using Android 8.1.0

Note: The app is supposed to show a login popup (oauth2) and then redirect to a home page. The signin popup (in an inappbrowser) does show up as expected and redirects to the app once the login process is completed. Once redirected to the app, I get a blank screen with no further errors.

The chunk errors are thrown at the beginning of the app.component.ts right after Splashscreen is automatically hidden.

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>

As from what I read on the subject, it seems like a stencil issue. Perhaps I am using an ionic component not in the way it should be used, but the weird thing is that the prod build works perfectly. I will do some more research and let you know if I find anything.

I Just removed the www folder and did another build. I am getting the same error, along with this one:

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. Here is the 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 {}

I added ProgramSelectorComponent in the entryComponents since I use it in a modal controller:

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

Thank you! (issue on the ionic forum: https://forum.ionicframework.com/t/v4-chunks-are-unable-to-load-on-android-web-and-ios-are-fine-chunkloaderror-loading-chunk-pages-home-home-module-failed/189505)

来源：https://stackoverflow.com/questions/61830851/webpack-chunks-are-unable-to-load-on-android-web-and-ios-are-fine-chunkloader