CLIv3 build breaks injectables on device with the `--prod` flag


#1

Description:
After updating cli to v3.4.0 (from v2.2) my build breaks on device with the --prod flag.

Running ionic cordova run android works fine, the entire app runs smoothly on device and in browser. However, when running ionic cordova run android --prod I get the error listed below on Android. But it works fine on web.
Additionally, if i run ionic cordova run android --prod -l for livereload it works on the device.

Output:

Uncaught Error: Cannot resolve all parameters for 'e'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'e' is decorated with Injectable.
    at g (file:///android_asset/www/build/polyfills.js:3:7133)
    at R (file:///android_asset/www/build/main.js:1:6097)
    at V (file:///android_asset/www/build/main.js:1:7972)
    at j (file:///android_asset/www/build/main.js:1:6818)
    at L (file:///android_asset/www/build/main.js:1:7066)
    at Array.map (native)
    at F (file:///android_asset/www/build/main.js:1:7113)
    at Function.t.resolve (file:///android_asset/www/build/main.js:3:1130)
    at Function.t.resolveAndCreate (file:///android_asset/www/build/main.js:3:1198)
    at file:///android_asset/www/build/main.js:1:9975
    at file:///android_asset/www/build/main.js:1:9922
    at Object.<anonymous> (file:///android_asset/www/build/main.js:59:25920)
    at e (file:///android_asset/www/build/main.js:1:101)
    at file:///android_asset/www/build/main.js:1:483
    at file:///android_asset/www/build/main.js:1:494

My ionic info:
Testing device: Android 7.0

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.2
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.2.3
Ionic Framework                 : ionic-angular 3.0.1

System:

Node       : v6.10.1
OS         : Windows 7
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 5.0.3

Additional Information
Ionic CLI v3 has changed my ionic.config.json.

//v2 version
{
  "name": "World Journey",
  "app_id": "",
  "typescript": true,
  "v2": true
}

//v3 version
{
  "name": "World Journey",
  "app_id": "",
  "type": "ionic-angular"
}

This is automatically changed to v3 every time a build or run command is issued.


#2

Is it possible that you’re injecting something that isn’t decorated with @Injectable()? Does the problem also present when building with --aot instead of --prod? If so, it might give you a hint where the problematic class might be.


#3

If something wasn’t decorated with @Injectable() surely it wouldn’t work with normal cordova run android? But it does.

With --aot I get a circular module import.

Uncaught Error: Module build failed: RangeError: Maximum call stack size exceeded

I’m slowly removing modules to find which ones are not compatible.

// app.module.ts
@NgModule({
    declarations: [
        PdfViewerComponent,
        MyApp,
        HomePage,
        NewBookingPage,
        PdfViewPage,
        ContactUsPage,
        TermsAndConditionsPage,
        LandingPage
    ],
    imports: [
        IonicModule.forRoot(MyApp),
        IonicStorageModule.forRoot(),
        
        AuthModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage,
        NewBookingPage,
        PdfViewPage,
        ContactUsPage,
        TermsAndConditionsPage,
        LandingPage
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {
            provide: ErrorHandler,
            useClass: IonicErrorHandler
        },
        EventsService,
        FileManager,
        Transfer,
        File,
        SocialSharing
    ]
})
export class AppModule {}
// AuthModule
@NgModule({
    declarations: [
        LoginComponent,
        RegisterComponent,
        LogoutComponent,
        ForgotPasswordStep1Component,
        ForgotPasswordStep2Component,
        ResendCodeComponent,
        ConfirmRegistrationComponent
    ],
    imports: [
        IonicModule.forRoot(AuthModule)
    ],
    entryComponents: [
        LoginComponent,
        RegisterComponent,
        LogoutComponent,
        ForgotPasswordStep1Component,
        ForgotPasswordStep2Component,
        ResendCodeComponent,
        ConfirmRegistrationComponent
    ],
    providers: [
        DynamoDBService,
        S3Service,
        CognitoUtil,
        UserRegistrationService,
        UserParametersService,
        UserLoginService
    ]
})
export class AuthModule {}

From an initial look the only thing I see different is IonicModule.forRoot(AuthModule) is pointing to the module itself, while in the app.module.ts it’s pointing to the app.component.tsIonicMOdule.forRoot(MyApp).
However, removing AuthModule from the app module doesn’t solve the issue.


#4

What happens if you take away the forRoot() completely from AuthModule's import of IonicModule?


#5

Well that solves the problems when running --aot.

However, after trying --prod again it get the same initial error.

ionic cordova run android has no error and works fine.
ionic cordova run android --aot has no error and works fine.
ionic cordova run android --prod -l has no error and works fine.

ionic cordova run android --aot --prod has error
ionic cordova run android --prod has error:

Uncaught Error: Cannot resolve all parameters for 'e'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'e' is decorated with Injectable.
    at g (file:///android_asset/www/build/polyfills.js:3:7133)
    at R (file:///android_asset/www/build/main.js:1:6097)
    at V (file:///android_asset/www/build/main.js:1:7972)
    at L (file:///android_asset/www/build/main.js:1:6818)
    at j (file:///android_asset/www/build/main.js:1:7066)
    at Array.map (native)
    at F (file:///android_asset/www/build/main.js:1:7113)
    at Function.t.resolve (file:///android_asset/www/build/main.js:3:1130)
    at Function.t.resolveAndCreate (file:///android_asset/www/build/main.js:3:1198)
    at file:///android_asset/www/build/main.js:1:9975
    at file:///android_asset/www/build/main.js:1:9922
    at Object.<anonymous> (file:///android_asset/www/build/main.js:59:24329)
    at e (file:///android_asset/www/build/main.js:1:101)
    at file:///android_asset/www/build/main.js:1:483
    at file:///android_asset/www/build/main.js:1:494

#6

I just tested this with ionic serve, and development mode (JiT) does not enforce @Injectable() - it will happily inject things that are not decorated with it, so I still think this is the most likely avenue of investigation.


#7

Thanks for you help. After searching through the code a lot and not finding anything I decided to start deleting files and bringing the project back to a home.ts and the general app module/component.

This still didn’t work.

After going through a very difficult process of removing node_modules and trying to npm i in the directory (which didn’t work, and turns out I was missing a whole bunch of stuff, node-sass, node-gyp, python, etc).

After all this was resolved and i got a clean npm i done in the directory; it works with --prod flag now.

What gets me is that it was working with Ionic CLI v2… just this upgrade to v3.


#8

You should upgrade that to 1.3.7.