时间戳

首页 > 解决方案 > ionic prod build 在运行时引发 Injector Error

angular - ionic prod build 在运行时引发 Injector Error

问题描述

使用“ionic cordova build android --prod”构建一个 ionic4 angular 应用程序。在设备上遇到静态注入错误。使用 'ionic serve'、'ionic cordova build android' 和 'ionic cordova run android --device' 调试构建不会引发此错误。

对 app-routing.module 使用延迟加载，并在 app.module 中提供根级别 @ionic-natives。由于错误对于 uglify 来说是神秘的，因此无法确定哪个服务/模块是原因。有没有办法禁用 uglify 和缩小来调试问题

离子信息 =>

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.5.1, (and 14 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/aniraj/Android/Sdk)
   NodeJS            : v10.16.0 (/usr/bin/node)
   npm               : 6.4.1
   OS                : Linux 4.15

app.module.ts =>

import { environment } from './../environments/environment';
import { RatingModule } from 'ngx-rating';
import { MomentModule } from 'ngx-moment';
import { HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule } from '@angular/fire/firestore'
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireFunctionsModule } from '@angular/fire/functions';
import { SharedComponentModule } from './components/shared-components.module';
import { SharedModalModule } from './modals/shared-modals.module';
import { IonicStorageModule } from '@ionic/storage';
import { Chooser } from '@ionic-native/chooser/ngx';
import { Network } from '@ionic-native/network/ngx';
import { AppVersion } from '@ionic-native/app-version/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { EmailComposer } from '@ionic-native/email-composer/ngx';
import { UniqueDeviceID } from '@ionic-native/unique-device-id/ngx';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

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

@NgModule({
  declarations: [AppComponent],
      entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    MomentModule,
    RatingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    IonicStorageModule.forRoot(),
    AngularFireAuthModule,
    AngularFirestoreModule,    
    AngularFireStorageModule, AngularFireFunctionsModule,
    SharedComponentModule, SharedModalModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    }) 
  ],
  providers[
  StatusBar, Network, AppVersion, SplashScreen, EmailComposer, UniqueDeviceID, Chooser,
  { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

在 Chrome 上检查时出错 =>

Error: StaticInjectorError(a)[k -> r]: 
  StaticInjectorError(Platform: core)[k -> r]: 
    NullInjectorError: No provider for r!
    at pa.get (main.73d45aba5e0db24763c3.js:1)
    at main.73d45aba5e0db24763c3.js:1
    at e (main.73d45aba5e0db24763c3.js:1)
    at Ta.get (main.73d45aba5e0db24763c3.js:1)
    at main.73d45aba5e0db24763c3.js:1
    at e (main.73d45aba5e0db24763c3.js:1)
    at Ta.get (main.73d45aba5e0db24763c3.js:1)
    at _g (main.73d45aba5e0db24763c3.js:1)
    at Bg.get (main.73d45aba5e0db24763c3.js:1)
    at uy (main.73d45aba5e0db24763c3.js:1)
cordova.935a9f4e1f7afeca168d.js:1

标签： angulardependency-injectionruntime-errorionic4

解决方案

启用 aot 应该足以检测到注入错误，不需要完整的 prod 构建。

尝试类似：

ionic serve -- --aot

推荐阅读