Webpack块无法在Android上加载。 Web和iOS都不错（ChunkLoadError：加载块页面-home-home-module失败。）

时间：2020-05-16 01:41:24

标签： android ionic-framework webpack ionic4 capacitor

我有一个ionic 4电容器应用程序，可在iOS上正常工作。我正在使用Angular 8进行延迟加载。

但是，每当我要运行android应用程序时，都会收到大量错误消息，提示许多块无法加载。

我在做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错误的一个示例，但是对于其他许多块，我也得到相同的错误。

我在网络应用程序上确实遇到了类似的问题，因为我忘记在index.html中声明基本href。但是，目前它正确就位。

我具体在Android上收到此错误，并且能够测试我在iOS上路由模块的情况。

我想知道是否有人可以理解这个问题的含义。我已经坚持使用了几天，非常感谢您的帮助。

我正在使用Android 8.1.0

注意： 该应用程序应该显示一个登录弹出窗口（oauth2），然后重定向到主页。登录弹出窗口（在一个内部浏览器中）确实按预期显示，并且在登录过程完成后重定向到该应用程序。重定向到应用程序后，我得到了一个空白屏幕，没有其他错误。

在自动隐藏启动画面后，立即在app.component.ts的开头引发块错误。

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>

从我阅读的主题来看，这似乎是一个模版问题。也许我不是以应有的方式使用离子性成分，但是奇怪的是产品结构完美地起作用了。我会做更多研究，让我知道是否有任何发现。

我刚刚删除了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)

我的主页模块似乎有问题。这是主页模块：

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

linear

谢谢！ （在离子论坛上发出：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）

0 个答案:

没有答案
相关问题
最新问题