Small, Efficient Web Build. How?

Ionic Framework ionic-v3
1

Trying to build the most efficient, smallest web build to prepare to move to a PWA.

I see sooooo many polyfills.js type files everywhere. My understanding is those are for old browsers that don’t support HTML5. Is that correct?

How can I do a build without all that? The lightest weight build for www? Don’t all modern browsers support HTML5? Firefox, Chrome, Safari?

Also, when trying a build using “ionic build --prod”, which I have read helps create a nice, lightweight build, I end up with the following type errors. Any insight into these?

A standard “ionic build” has no errors.

$ ionic build --prod --verbose

ionic:bootstrap local CLI 4.6.0 found at /Users/myUsername/Desktop/devDirExp/node_modules/ionic/package.json +0ms
ionic:lib Terminal info: { tty: true, ci: false, windows: false } +0ms
ionic:lib CLI global options: { _: [ ‘build’ ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, prod: true, project: null, ‘–’: } +2ms
ionic:lib:project Project type from config: Ionic 2/3 (ionic-angular) +0ms
ionic:lib:project Project details: { configPath: ‘/Users/myUsername/Desktop/devDirExp/ionic.config.json’, errors: , context: ‘app’, type: ‘ionic-angular’ } +0ms
ionic Context: { binPath: ‘/Users/myUsername/Desktop/devDirExp/node_modules/ionic/bin/ionic’, libPath: ‘/Users/myUsername/Desktop/devDirExp/node_modules/ionic’, execPath: ‘/Users/myUsername/Desktop/devDirExp’, version: ‘4.6.0’ } +0ms
ionic:lib:telemetry Sending telemetry for command: ‘ionic build’ [ ‘–prod’, ‘–verbose’, ‘–interactive’, ‘–color’ ] +0ms
ionic:lib:hooks Looking for ionic:build:before npm script. +0ms
ionic:lib:project:ionic-angular:build Looking for ionic:build npm script. +0ms
ionic:lib:project:ionic-angular:build Found ionic:build, but it is the default. Not running. +5ms
ionic-app-scripts build --prod
[18:29:38] ionic-app-scripts 3.2.4
[18:29:38] build prod started …
[18:29:38] clean started …
[18:29:38] clean finished in 1 ms
[18:29:38] copy started …
[18:29:38] deeplinks started …
[18:29:38] deeplinks finished in 170 ms
[18:29:38] ngc started …
[18:29:40] ionic-app-script task: “build”
[18:29:40] Error: Metadata version mismatch for module
/Users/myUsername/Desktop/devDirExp/node_modules/@ionic-native/core/decorators.d.ts, found version 4,
expected 3
Error: Metadata version mismatch for module /Users/myUsername/Desktop/devDirExp/node_modules/@ionic-native/core/decorators.d.ts, found version 4, expected 3
at StaticSymbolResolver.getModuleMetadata (/Users/myUsername/Desktop/devDirExp/node_modules/@angular/compiler/bundles/compiler.umd.js:23979:34)
at StaticSymbolResolver._createSymbolsOf (/Users/myUsername/Desktop/devDirExp/node_modules/@angular/compiler/bundles/compiler.umd.js:23765:46)
at StaticSymbolResolver.getSymbolsOf (/Users/myUsername/Desktop/devDirExp/node_modules/@angular/compiler/bundles/compiler.umd.js:23746:14)
at /Users/myUsername/Desktop/devDirExp/node_modules/@angular/compiler/bundles/compiler.umd.js:22528:30
at Array.forEach ()
at extractProgramSymbols (/Users/myUsername/Desktop/devDirExp/node_modules/@angular/compiler/bundles/compiler.umd.js:22527:79)
at AotCompiler.compileAll (/Users/myUsername/Desktop/devDirExp/node_modules/@angular/compiler/bundles/compiler.umd.js:22225:47)
at CodeGenerator.codegen (/Users/myUsername/Desktop/devDirExp/node_modules/@angular/compiler-cli/src/codegen.js:30:14)
at Function.NgTools_InternalApi_NG_2.codeGen (/Users/myUsername/Desktop/devDirExp/node_modules/@angular/compiler-cli/src/ngtools_api.js:61:30)
at /Users/myUsername/Desktop/devDirExp/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:182:73
[ERROR] An error occurred while running subprocess ionic-app-scripts.

    ionic-app-scripts build --prod exited with exit code 1.
    
    Re-running this command with the --verbose flag may provide more 
    information.
2

That’s really bad, and will likely result in some native plugins breaking on you. Align all @ionic-native things in your package.json to at least the same major version.

1 Like
3

That’s exactly what I was focusing on. I did one of those “npm outdated” commands and let it bring everything up to date when some dependencies weren’t working. Maybe that was the wrong approach?

So delete node_modules directory and do an “npm update?”. That will put everything back in order by reading the package.json file and downloading the correct version of everything?

4

Yes it will fix it all and in some occasions a way to resolve issues. I normally rename that folder and then rerun as deleting takes ages. And then delete the renamed folder.

5

Don’t use angular with ionic then?

Or if you want to be very slim with ionic and angular, consider ionic CDN with angular. Losing some of the perks of ionic-angular (animation etc), but a slim angualr app

6

Ok. Was trying to keep a unified code base, in the spirit of Ionic. It’s an existing app that needs a PWA release in addition to Android release. Doesn’t fit Apple’s narrow world view.

7

So I got rid of node_modules from the project and rebuilt using “npm install”

Same exact behavior. Also noticed the @ionic-native/core version isn’t in package.json or package-lock.json.

Any clues on how to get all these versions straightened out? I’m kind of stuck because I thought package.json controlled what was in the nodes_modules directory and doing an npm install would get all the versions and dependencies straight. However, it appears Ionic versions are not called out in that file. I’m thinking this error says I have Ionic 4 but need to downgrade to Ionic 3?? How do you do that?

Result is the same error…

[18:29:40] Error: Metadata version mismatch for module
/Users/myUsername/Desktop/devDirExp/node_modules/@ionic-native/core/decorators.d.ts, found version 4,
expected 3

Here is my package.json:

{
“name”: “dates”,
“version”: “0.0.0”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
“@agm/core”: “^1.0.0-beta.0”,
“@angular/common”: “4.0.2”,
“@angular/compiler”: “4.0.2”,
“@angular/compiler-cli”: “4.0.2”,
“@angular/core”: “4.0.2”,
“@angular/forms”: “4.0.2”,
“@angular/http”: “4.0.2”,
“@angular/platform-browser”: “4.0.2”,
“@angular/platform-browser-dynamic”: “4.0.2”,
“@ionic-native/camera”: “^3.10.3”,
“@ionic-native/core”: “^4.20.0”,
“@ionic-native/fcm”: “^4.1.0”,
“@ionic-native/geolocation”: “^3.12.1”,
“@ionic-native/in-app-purchase”: “^3.14.0”,
“@ionic-native/keyboard”: “^4.20.0”,
“@ionic-native/paypal”: “^3.12.1”,
“@ionic-native/splash-screen”: “3.4.2”,
“@ionic-native/status-bar”: “3.4.2”,
“@ionic/storage”: “1.1.6”,
“@types/elasticsearch”: “^5.0.25”,
“@types/lodash”: “^4.14.65”,
“@types/twilio”: “0.0.9”,
“angularfire2”: “^4.0.0-rc.2”,
“authy”: “^1.2.0”,
“cordova-android”: “~6.3.0”,
“cordova-browser”: “5.0.4”,
“cordova-ios”: “4.5.3”,
“cordova-plugin-camera”: “^2.4.1”,
“cordova-plugin-compat”: “^1.2.0”,
“cordova-plugin-console”: “^1.1.0”,
“cordova-plugin-device”: “^1.1.7”,
“cordova-plugin-fcm”: “^2.1.2”,
“cordova-plugin-geolocation”: “^2.4.3”,
“cordova-plugin-inapppurchase”: “^1.2.0”,
“cordova-plugin-ionic-keyboard”: “2.1.3”,
“cordova-plugin-splashscreen”: “^4.1.0”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“elasticsearch”: “^13.0.1”,
“exit”: “0.1.2”,
“firebase”: “^4.1.3”,
“geofire”: “^4.1.2”,
“ionic-angular”: “^3.1.1”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
“lodash”: “^4.17.4”,
“promise-polyfill”: “6.0.2”,
“request”: “^2.87.0”,
“request-promise”: “^4.2.2”,
“rxjs”: “5.1.1”,
“sw-toolbox”: “3.4.0”,
“twilio”: “^3.4.0”,
“web”: “0.0.2”,
“zone.js”: “^0.8.5”
},
“devDependencies”: {
“@angular/cli”: “^1.1.3”,
“@ionic/app-scripts”: “3.2.4”,
“@ionic/lab”: “1.0.15”,
“@types/elasticsearch”: “^5.0.25”,
“@types/googlemaps”: “^3.26.17”,
“ionic”: “4.6.0”,
“typescript”: “~2.2.1”
},
“cordovaPlugins”: [
“cordova-plugin-whitelist”,
“cordova-plugin-console”,
“cordova-plugin-statusbar”,
“cordova-plugin-device”,
“cordova-plugin-splashscreen”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: [
“ios”,
{
“platform”: “ios”,
“version”: “”,
“locator”: “ios”
}
],
“description”: “date: An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-console”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-whitelist”: {},
“ionic-plugin-keyboard”: {},
“cordova-plugin-geolocation”: {
“GEOLOCATION_USAGE_DESCRIPTION”: " "
},
“cordova-plugin-camera”: {
“CAMERA_USAGE_DESCRIPTION”: " ",
“PHOTOLIBRARY_USAGE_DESCRIPTION”: " "
},
“cordova-plugin-fcm”: {},
“cordova-plugin-inapppurchase”: {}
},
“platforms”: [
“ios”,
“android”,
“browser”
]
}
}

8

No, it’s saying "I have an ionic-native plugin that is expecting @ionic-native/core version 3 (such as “@ionic-native/camera”: “^3.10.3”,). You also have a lot of cruft in there (much of the polyfill stuff you are concerned about in OP seems to be self-inflicted, such as promise-polyfill). I would contemplate creating a brand new project and parachuting in your existing code.

9

Oh wow. Ok. I’m really REALLY green at this and it’s been almost 20 years since I was a C++ developer and wrote code. I’m struggling.

All I’m trying to do is take an existing app that works in Android and iOS and release it as a mobile web app/PWA because the Apple store changed its TOS.

I think I need to replace some Cordova plugins with Angular so I can run as mobile web in a browser.

How can I best do this?

I’m even open to hiring this out.

10

So I’ve been working on this and cloned a new repository on my local machine.

It has the exact (pre npm update I did) package.json and package-lock.json files as released to me from the original development team.

I get the following when I run npm outdated. Is there anything that is standing out to anyone?

When I run any type of build EXCEPT a production build, it works fine. The app works, the web site in the WWW works, the iOS app works, the Android app works. UNTIL I do a --prod build. Then I get the errors above.

Here is the npm outdated file. What looks off? Why didn’t @ionic-native/keyboard get installed with the npm install?? It’s listed in package.json and package-lock.json

Package Current Wanted Latest Location
@ionic-native/keyboard MISSING 3.14.0 5.15.0 dates
@agm/core 1.0.0-beta.0 1.0.0 1.0.0 dates
@angular/cli 1.2.6 1.7.4 8.3.8 dates
@angular/common 4.0.2 4.0.2 8.2.9 dates
@angular/compiler 4.0.2 4.0.2 8.2.9 dates
@angular/compiler-cli 4.0.2 4.0.2 8.2.9 dates
@angular/core 4.0.2 4.0.2 8.2.9 dates
@angular/forms 4.0.2 4.0.2 8.2.9 dates
@angular/http 4.0.2 4.0.2 7.2.15 dates
@angular/platform-browser 4.0.2 4.0.2 8.2.9 dates
@angular/platform-browser-dynamic 4.0.2 4.0.2 8.2.9 dates
@ionic-native/camera 3.14.0 3.14.0 5.15.0 dates
@ionic-native/core 3.14.0 3.14.0 5.15.0 dates
@ionic-native/fcm 4.1.0 4.20.0 5.15.0 dates
@ionic-native/geolocation 3.14.0 3.14.0 5.15.0 dates
@ionic-native/in-app-purchase 3.14.0 3.14.0 5.15.0 dates
@ionic-native/paypal 3.14.0 3.14.0 5.15.0 dates
@ionic-native/splash-screen 3.4.2 3.4.2 5.15.0 dates
@ionic-native/status-bar 3.4.2 3.4.2 5.15.0 dates
@ionic/lab 1.0.15 1.0.15 2.0.11 dates
@ionic/storage 1.1.6 1.1.6 2.2.0 dates
@types/elasticsearch 5.0.29 5.0.35 5.0.35 dates
@types/googlemaps 3.30.16 3.37.7 3.37.7 dates
@types/lodash 4.14.71 4.14.141 4.14.141 dates
@types/twilio 0.0.9 0.0.9 0.0.10 dates
angularfire2 4.0.0-rc0 4.0.0-rc0 5.2.1 dates
authy 1.2.0 1.4.0 1.4.0 dates
cordova-android 6.3.0 6.3.0 8.1.0 dates
cordova-ios 4.5.3 4.5.3 5.0.1 dates
cordova-plugin-camera 2.4.1 2.4.1 4.1.0 dates
cordova-plugin-device 1.1.7 1.1.7 2.0.3 dates
cordova-plugin-geolocation 2.4.3 2.4.3 4.0.2 dates
cordova-plugin-ionic-keyboard 2.1.3 2.2.0 2.2.0 dates
cordova-plugin-splashscreen 4.1.0 4.1.0 5.0.3 dates
cordova-plugin-statusbar 2.4.2 2.4.3 2.4.3 dates
cordova-plugin-whitelist 1.3.3 1.3.4 1.3.4 dates
elasticsearch 13.3.1 13.3.1 16.4.0 dates
firebase 4.2.0 4.13.1 7.1.0 dates
geofire 4.1.2 4.1.2 5.0.1 dates
ionic 4.6.0 4.6.0 5.4.2 dates
ionic-angular 3.1.1 3.9.8 3.9.8 dates
ionicons 3.0.0 3.0.0 4.6.3 dates
lodash 4.17.11 4.17.15 4.17.15 dates
promise-polyfill 6.0.2 6.0.2 8.1.3 dates
request-promise 4.2.2 4.2.4 4.2.4 dates
rxjs 5.1.1 5.1.1 6.5.3 dates
sw-toolbox 3.4.0 3.4.0 3.6.0 dates
twilio 3.6.1 3.35.1 3.35.1 dates
typescript 2.2.2 2.2.2 3.6.3 dates
zone.js 0.8.16 0.8.29 0.10.2 dates

And here are the errors from ionic build --prod. There are NO errors and a good build when not using --prod.

[13:53:01] ionic-app-script task: “build”
[13:53:01] Error: Error encountered resolving symbol values statically. Could not resolve @ionic-native/keyboard
relative to /Users/myUsername/Documents/GitHub/PWA/src/app/app.module.ts., resolving symbol AppModule in
/Users/myUsername/Documents/GitHub/PWA/src/app/app.module.ts, resolving symbol AppModule in
/Users/myUsername/Documents/GitHub/PWA/src/app/app.module.ts
Error: Error encountered resolving symbol values statically. Could not resolve @ionic-native/keyboard relative to /Users/myUsername/Documents/GitHub/PWA/src/app/app.module.ts., resolving symbol AppModule in /Users/myUsername/Documents/GitHub/PWA/src/app/app.module.ts, resolving symbol AppModule in /Users/myUsername/Documents/GitHub/PWA/src/app/app.module.ts
at syntaxError (/Users/myUsername/Documents/GitHub/PWA/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34)
at simplifyInContext (/Users/myUsername/Documents/GitHub/PWA/node_modules/@angular/compiler/bundles/compiler.umd.js:23375:23)
at StaticReflector.simplify (/Users/myUsername/Documents/GitHub/PWA/node_modules/@angular/compiler/bundles/compiler.umd.js:23387:13)
at StaticReflector.annotations (/Users/myUsername/Documents/GitHub/PWA/node_modules/@angular/compiler/bundles/compiler.umd.js:22836:41)
at NgModuleResolver.resolve (/Users/myUsername/Documents/GitHub/PWA/node_modules/@angular/compiler/bundles/compiler.umd.js:13364:70)
at CompileMetadataResolver.getNgModuleMetadata (/Users/myUsername/Documents/GitHub/PWA/node_modules/@angular/compiler/bundles/compiler.umd.js:13949:60)
at addNgModule (/Users/myUsername/Documents/GitHub/PWA/node_modules/@angular/compiler/bundles/compiler.umd.js:22555:58)
at /Users/myUsername/Documents/GitHub/PWA/node_modules/@angular/compiler/bundles/compiler.umd.js:22566:14
at Array.forEach ()
at _createNgModules (/Users/myUsername/Documents/GitHub/PWA/node_modules/@angular/compiler/bundles/compiler.umd.js:22565:26)
[ERROR] An error occurred while running subprocess ionic-app-scripts.

    ionic-app-scripts build --prod exited with exit code 1.