Android has slow startup times AOT?

Ionic Framework ionic-v3
1

As we have been developing our ionic app it just seems like it has had longer load times on Android. Close to 20 seconds now to load. I’m not sure how to debug what is causing it to be slow.

I found this suggestions.
http://masteringionic.com/blog/2017-02-10-improving-ionic-app-launch-times/

But when I try that.
ionic cordova build android --prod

I get this error

[DEBUG] Reason for not using local CLI: LOCAL_CLI_NOT_FOUND
[DEBUG] CLI flags: { interactive: true, confirm: false }
[DEBUG] { cwd: '/home/user/dev/Ionic-App/apps/app', local: false, binPath:
        '/home/user/.npm-global/lib/node_modules/ionic/bin/ionic', libPath:
        '/home/user/.npm-global/lib/node_modules/ionic/dist/index.js' }
Running app-scripts build: --prod --platform android --target cordova
[12:57:20]  build prod started ...
[12:57:20]  clean started ...
[12:57:20]  clean finished in 1 ms
[12:57:20]  copy started ...
[12:57:20]  deeplinks started ...
[12:57:20]  deeplinks finished in 78 ms
[12:57:20]  ngc started ...
Error: Error encountered resolving symbol values statically. Calling function '?makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /home/user/dev/Ionic-App/apps/node_modules/@angular/core/core.d.ts, resolving symbol ?e in/home/user/dev/Ionic-App/apps/node_modules/@angular/core/core.d.ts, resolving symbol ?e in /home/user/dev/Ionic-App/apps/node_modules/@angular/core/core.d.ts
    at Error (native)
    at syntaxError (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
    at simplifyInContext (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:25118:23)
    at StaticReflector.simplify (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:25130:13)
    at StaticReflector.annotations (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:24558:41)
    at NgModuleResolver.resolve (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:14896:70)
    at CompileMetadataResolver.getNgModuleMetadata (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:15551:60)
    at addNgModule (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:24408:58)
    at /home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:24419:14
    at Array.forEach (native)
[DEBUG] Error: Error encountered resolving symbol values statically. Calling function '?makeDecorator', function calls
        are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving
        symbol Injectable in /home/user/dev/Ionic-App/apps/node_modules/@angular/core/core.d.ts, resolving symbol ?e in
        /home/user/dev/Ionic-App/apps/node_modules/@angular/core/core.d.ts, resolving symbol ?e in
        /home/user/dev/Ionic-App/apps/node_modules/@angular/core/core.d.ts
            at Error (native)
            at syntaxError
        (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
            at simplifyInContext
        (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:25118:23)
            at StaticReflector.simplify
        (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:25130:13)
            at StaticReflector.annotations
        (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:24558:41)
            at NgModuleResolver.resolve
        (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:14896:70)
            at CompileMetadataResolver.getNgModuleMetadata
        (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:15551:60)
            at addNgModule
        (/home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:24408:58)
            at /home/user/dev/Ionic-App/apps/node_modules/@angular/compiler/bundles/compiler.umd.js:24419:14
            at Array.forEach (native)

Is --prod still a valid command?

2

The core.d.ts has a ɵe It goes lost in the pasted code above.

I don’t think it matters, but the line in core.d.ts is

export { ApplicationRef_ as ɵe } from ‘./src/application_ref’;
The only file I see is application_ref.d.ts I’m guessing the compiler knows that.

I’m using Visual Studio Code on Linux Mint.

1 Like
3

By default the build task produces dev builds (a build that does not include Ahead of Time (AoT) compilation or minification). To force a prod build you need to use the --prod command line flag.

See: https://robferguson.org/blog/2017/04/29/build-a-desktop-application-with-ionic-3-and-angular-4/

The AOT build initially failed for me (see this Angular CLI issue), I had to downgrade from enhanced-resolve 3.4.0 to enhanced-resolve 3.3.0.

See: https://robferguson.org/blog/2017/08/28/angular-cli-angular-4-and-wijmo-flexsheet/

4

Thanks for help with this.

I did an npm uninstall enhanced-resolve@3.4.0

I deleted my node_modules and any reference I could find to enhanced-resolve.
I deleted the package.lock file.

I did an npm npm install enhanced-resolve@3.3.0
I see that get installed.

I do npm install. I see that install the packages again.

I delete android and add it again.

I try to do a build with the prod flag and I get the same error.

Not sure why I still get it.

5

It seems like our folder structure could causing this. We really only two apps, but we skin and build them for multiple companies. The folder structure is like this.

apps/
app1/
the root of the app
config.xml
package.json
node_moduala (symbolic link to the real one below)
/src
app.components.ts
app.module.ts
(other files)
/node_moduels (the real one)
/modules (the code we share between all apps.)
/shared (folder for the services that are shared).

The internet suggestions I add the following to the tsconfig.json file.
“paths”: {
“@angular/": ["…/node_modules/@angular/”],

After adding that I didn’t get the error above anymore. But problems finding rxjs. I added that to the paths too.

Now I’m getting these errors
Module build failed: Error: ENOENT: no such file or directory, open ‘/home/user/dev/Ionic-App/apps/modules/login/login.module.js’
at Error (native)
@ ./src/app/app.module.ts 22:0-66
@ ./src/app/app.module.ngfactory.ts
@ ./src/app/main.ts,…/modules/login/login.page.ts

Its the JS file it can’t find?

And
Field ‘browser’ doesn’t contain a valid alias configuration
/home/user/dev/Ionic-App/apps/modules/card-maintenance/advanced-search/advanced-search.card.ngfactory.json doesn’t exist
as directory
/home/user/dev/Ionic-App/apps/modules/card-maintenance/advanced-search/advanced-search.card.ngfactory doesn’t exist

I’m guessing the AOT needs to know exactly where ever file is? This all might just be a dead end in solving the original problem.