Ionic-framework: Ionic build project broken for @angular-devkit/architect and @angular-devkit/build-angular version 0.13.x

[almothafar]

Bug Report

Ionic version:
[x] 4.0.2

Current behavior:
While doing the build for an ionic app using ionic cordova prepare android as for example, the build failed with the following error:

ERROR in ./node_modules/@ionic/core/dist/esm/es5/ionic.core.js 6:2160
Module parse failed: Unexpected token (6:2160)
You may need an appropriate loader to handle this file type.
|  * Built with http://stenciljs.com
|  */
> function n(n,t){return"sc-"+n.t+(t&&t!==c?"-"+t:"")}function t(n,t){return n+(t?"-h":"-s")}function e(n,t){for(var e,r,i=null,o=!1,u=!1,f=arguments.length;f-- >2;)A.push(ar
guments[f]);for(;A.length>0;){var c=A.pop();if(c&&void 0!==c.pop)for(f=c.length;f--;)A.push(c[f]);else"boolean"==typeof c&&(c=null),(u="function"!=typeof n)&&(null==c?c="":"n
umber"==typeof c?c=String(c):"string"!=typeof c&&(u=!1)),u&&o?i[i.length-1].vtext+=c:null===i?i=[u?{vtext:c}:c]:i.push(u?{vtext:c}:c),o=u}if(null!=t){if(t.className&&(t.class
=t.className),"object"==typeof t.class){for(f in t.class)t.class[f]&&A.push(f);t.class=A.join(" "),A.length=0}null!=t.key&&(e=t.key),null!=t.name&&(r=t.name)}return"function"
==typeof n?n(t,i||[],E):{vtag:n,vchildren:i,vtext:void 0,vattrs:t,vkey:e,vname:r,i:void 0,o:!1}}function r(n,t,e){void 0===e&&(e={});var r=Array.isArray(t)?t:[t],i=n.document
,o=e.hydratedCssClass||"hydrated",u=e.exclude;u&&(r=r.filter(function(n){return-1===u.indexOf(n[0])}));var c=r.map(function(n){return n[0]});if(c.length>0){var a=i.createElem
ent("style");a.innerHTML=c.join()+"{visibility:hidden}."+o+"{visibility:inherit}",a.setAttribute("data-styles",""),i.head.insertBefore(a,i.head.firstChild)}var s=e.namespace|
|"Ionic";return B||(B=!0,function l(n,t,e){(n["s-apps"]=n["s-apps"]||[]).push(t),e.componentOnReady||(e.componentOnReady=function t(){function e(t){if(r.nodeName.indexOf("-")
>0){for(var e=n["s-apps"],i=0,o=0;o<e.length;o++)if(n[e[o]].componentOnReady){if(n[e[o]].componentOnReady(r,t))return;i++}if(i<e.length)return void(n["s-cr"]=n["s-cr"]||[]).p
ush([r,t])}t(null)}var r=this;return n.Promise?new n.Promise(e):{then:e}})}(n,s,n.HTMLElement.prototype)),applyPolyfills(n).then(function(){function t(){r.forEach(function(t)
{var e;!function r(n){return/\{\s*\[native code\]\s*\}/.test(""+n)}(n.customElements.define)?(e=function(t){return n.HTMLElement.call(this,t)}).prototype=Object.create(n.HTML
Element.prototype,{constructor:{value:e,configurable:!0}}):e=new Function("w","return class extends w.HTMLElement{}")(n),U[s].u(function i(n){var t=C(n),e=t.s,r=d(n[0]);retur
n t.s=function(n){var t=n.mode,i=n.scoped;return function o(n,t,e){return import(
| /* webpackInclude: /\.entry\.js$/ */
| /* webpackMode: "lazy" */
[ERROR] An error occurred while running subprocess ng.

        ng run app:ionic-cordova-build --platform=android exited with exit code 1.

Expected behavior:
To Build and continue!

Steps to reproduce:
Simply use any starter, then update the following packages

    "@angular-devkit/architect": "~0.13.3",
    "@angular-devkit/build-angular": "~0.13.3",

They are older version now in starters:

    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",

Then try to build the app using ionic cordova prepare android or even ionic cordova prepare ${platform} --prod --aot --minifyjs --minifycss --optimizejs -- -d
Also, you can get the issue when you do ionic serve.

Other information:
Reverting back to older version like:

    "@angular-devkit/architect": "~0.12.4",
    "@angular-devkit/build-angular": "~0.12.4",

Fixes the issue for now.

A full discussion about this is ongoing here: https://forum.ionicframework.com/t/incompatibility-to-cordova-ios-5-0-0

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (C:\Users\almothafar\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.13.3
   @angular-devkit/schematics    : 7.3.3
   @angular/cli                  : 7.3.3
   @ionic/angular-toolkit        : 1.4.0

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.17
   @capacitor/core           : 1.0.0-beta.17

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.0, (and 8 other plugins)

System:

   Android SDK Tools : 26.1.1 (D:\Android\sdk)
   NodeJS            : v11.9.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.8.0
   OS                : Windows 10

[mhartington]

I am unable to recreate this issue.

I started a new app, and update the devkit deps, but was not able to get a build error.

https://github.com/mhartington/cordova-ios5-test

As this is not a Ionic related issue, but a potential issue with angular-devkit, please direct your issue to them.

https://github.com/angular/angular-cli

[peterpeterparker]

Here a repo to reproduce the problem:
https://github.com/peterpeterparker/dependencies

git clone https://github.com/peterpeterparker/dependencies
cd dependencies
npm install
ionic serve

Node: v11.9.0
npm: 6.8.0

[mhartington]

I've attempted again to recreate this issue and cannot.

https://github.com/mhartington/build-issue-test

@peterpeterparker your package.json contained a lot of stuff that could cause more noise. Please isolate it.

Again... As this issue relates to Angular Build Tools, and not Ionic, please direct your issue to them.

https://github.com/angular/angular-cli

[peterpeterparker]

@mhartington I isolated the dependencies respectively removed some noise and opened an issue in the Angular CLI -> https://github.com/angular/angular-cli/issues/13767

[peterpeterparker]

If you don't face the error, you might face it by removing package-lock.json and node_modules and installing freshly the libs, just a guess, that's how I reproduce the error

[almothafar]

@mhartington how come Angular build tool and the issue in ionic.core.js? may you please give more details? otherwise, we would be lost each one throw responsibilities to others!

Angular is not meant to support Ionic, while Ionic MUST support Angular changes as angular part of it.

[almothafar]

@peterpeterparker it seems your project created by ionic start right?

[peterpeterparker]

@almothafar yeah but then tweaked the dependencies as the one which produce the error

[almothafar]

@mhartington try to update your cli to "@angular/cli": "~7.3.3", you still use the old devkit version
https://github.com/mhartington/cordova-ios5-test/blob/master/package-lock.json#L201

[mhartington]

Angular build tools build the JavaScript.

Ionic's code and package has not changed in the latest releases.

As Angular's build tools have been the one to change, it's probably an issue on their end.

[mhartington]

@almothafar I have an updated project here.

https://github.com/mhartington/build-issue-test

Please reference this.

[peterpeterparker]

So according @alan-agius4 it's a web pack issue -> https://github.com/webpack/webpack/issues/8656

[alan-agius4]

I looked at this a bit more as there were other reports experiencing the same issue.

And from the reproduction above I managed to get this fixed by removing the package-lock.json and node_modules and after doing a fresh npm install.

rm -rf node_modules
rm -f package-lock.json
npm install

Executing npm ls acorn should return something like;

[email protected] /workspace/dependencies
└─┬ @angular-devkit/[email protected]
  └─┬ [email protected]
    └── [email protected]

[almothafar]

npm ls acorn result:

+-- @angular-devkit/[email protected]
| `-- [email protected]
|   `-- [email protected]
`-- @ionic/[email protected]
  +-- [email protected]
  | `-- [email protected]
  `-- [email protected]
    +-- [email protected]
    `-- [email protected]
      `-- [email protected]

Is this means @ionic/app-scripts outdated badly? or I don't need it at first place as I see from the new projects started (I have no idea why I need @ionic/app-scripts actually, this is added at the first time when I started my project, when Ionic 4 was in beta stage).

[mhartington]

App-scripts is not needed for ionic/angular v4. Apps script is for v3 ionic only. it can be removed.

[KevinKelchen]

This is what we did to get around it.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.