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

Ionic Framework ionic-v3
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.ts… IonicMOdule.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.