🐞 Bug report

Command (mark with an `x`)

[X] build

Is this a regression?

Yes kind of

Description

I, we, are upgrading our application's Angular and Cordova-ios versions and while doing so, if we remove the package-lock.json and fetch all the libraries newly, are facing the following an error when we run afterwards our application doing ionic serve:

[ng] ERROR in ./node_modules/@ionic/core/dist/esm/es5/ionic.core.js 6:2160
[ng] Module parse failed: Unexpected token (6:2160)

I say we as the problem has been reported on the Ionic forum https://forum.ionicframework.com/t/incompatibility-to-cordova-ios-5-0-0 and Ionic GitHub https://github.com/ionic-team/ionic/issues/17605

🔬 Minimal Reproduction

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

Note: if you don't face the error doing the above list of commands, then delete the package-lock.json and fetch the libraries again

rm -r package-lock.json
rm -r node_modules
npm install
ionic serve

🔥 Exception or Error



[ng] ℹ ｢wdm｣: wait until bundle finished: /
[ng] Date: 2019-02-25T18:32:38.169Z
[ng] Hash: 08ae284aacf49d863a79
[ng] Time: 8871ms
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 4.8 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 12.5 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.77 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 79.5 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.31 MB [initial] [rendered]
[ng] 
[ng] ERROR in ./node_modules/@ionic/core/dist/esm/es5/ionic.core.js 6:2160
[ng] Module parse failed: Unexpected token (6:2160)
[ng] You may need an appropriate loader to handle this file type.
[ng] |  * Built with http://stenciljs.com
[ng] |  */
[ng] > 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(arguments[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="":"number"==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.createElement("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


🌍 Your Environment

Node: v11.9.0
npm: 6.8.0

Anything else relevant?
"dependencies": {
    "@angular/common": "~7.2.6",
    "@angular/core": "~7.2.6",
    "@angular/forms": "~7.2.6",
    "@angular/http": "~7.2.6",
    "@angular/platform-browser": "~7.2.6",
    "@angular/platform-browser-dynamic": "~7.2.6",
    "@angular/pwa": "^0.13.3",
    "@angular/router": "~7.2.6",
    "@angular/service-worker": "~7.2.6",
    "@ionic-native/core": "^5.2.0",
    "@ionic-native/firebase": "^5.2.0",
    "@ionic-native/google-analytics": "^5.2.0",
    "@ionic-native/splash-screen": "^5.2.0",
    "@ionic-native/status-bar": "^5.2.0",
    "@ionic/angular": "^4.0.2",
    "@ionic/storage": "^2.2.0",
    "cordova-ios": "^5.0.0",
    "core-js": "^2.6.5",
    "rxjs": "6.4.0",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.3",
    "@angular-devkit/build-angular": "~0.13.3",
    "@angular-devkit/core": "~7.3.3",
    "@angular-devkit/schematics": "~7.3.3",
    "@angular/cli": "~7.3.3",
    "@angular/compiler": "~7.2.6",
    "@angular/compiler-cli": "~7.2.6",
    "@angular/language-service": "~7.2.6",
    "@ionic/angular-toolkit": "^1.4.0",
    "@types/node": "~10.12.24",
    "ts-node": "~8.0.2",
    "tslint": "~5.12.1",
    "typescript": "~3.1.6"
  }

Hi thanks for reporting this.

However this seems to be related to a webpack issue https://github.com/webpack/webpack/issues/8656 and npm bug https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794

@alan-agius4 so when the Webpack issue will be solved it will be included in the Cli right?

The root cause of this is actually npm, and how it dedupes modules. If you use yarn you should not experience this issue.

However, if if webpack do find a workaround and implement it, it will be included in the CLI when we cut another release.

@alan-agius4 thx for the answer and explanation, really cool. understood 👍

I have the same issue. What should I do? fallback to angular@7.2 or maybe npm@6.7.0? Can I get back to 7.2 using ng update tool?

How can I get rid of this error right now?

@piernik, some workarounds are available here https://github.com/webpack/webpack/issues/8656#issuecomment-456010969 and https://github.com/webpack/webpack/issues/8656#issuecomment-456713191

Alternativly, you can downgrade the @angular-devkit/build-angular package to a previous version 0.12.X.

That said, I am going to re-open this, to discuss if we should rollback to an older version of webpack as there was another report of this issue being encountered.

Side note: if we revert back so should will this feature https://github.com/angular/angular-cli/blob/78f5c287d840c1411e2dce028afba3b02c10d868/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L296

It’s important to note that this issue is being caused by npm and the actual bug has been around since npm 3. (https://github.com/webpack/webpack/issues/8656#issuecomment-456713191)

I got back to 7.2. I think You should rollback to working version of webpack. I think webpack's newer version is not very important and working cli should always be Your priority.

Edit: for me (and I think for many unexperienced users) angular-cli is a complete tool and I don't care if it is webpack, rxjs or whatever dependent. Every version should work perfectly.

I looked at this a bit more.

And from the reproduction above I managed to get this fixed by removing the package.lock 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;

dependencies@0.0.1 /workspace/dependencies
└─┬ @angular-devkit/build-angular@0.13.3
  └─┬ webpack@4.29.0
    └── acorn@6.1.1

@piernik & @peterpeterparker can you kindly confirm if this works for you as well?

@alan-agius4 "just" removing package-lock.json doesn't work neither for me (I mean removing and installing again like I describe in my original msg)

Ping me if you need more tests

@peterpeterparker Can you try a full clean install as well (i.e., also rm -rf node_modules) in addition to the package-lock.json?

it's what I meant, I do full clean (see the description of the issue)

Ah. Sorry. I read the " "just" removing package-lock.json" part.

no worries at all, if I could help with more testing, sure ping me

@peterpeterparker, I tried on another machine, and I am still unable to replicate this issue when remove the node_modules and package-lock.json

dependencies@0.0.1 /Users/alan/git/cli-repos/dependencies
└─┬ @angular-devkit/build-angular@0.13.3
  └─┬ webpack@4.29.0
    └── acorn@6.1.1

@alan-agius4 which node and npm version are u using? you are testing with my demo repo?

Yeah, I trying with your reproduction. I tried the following npm version 6.5.0 & 6.8.0, Node 11.1 and Node 11.8

@alan-agius4 @clydin I tried again and again and finally it worked out 🎉

to double check I even took the time to do update all libs in my client's project, went with the same process and it went fine too 🎉

therefore I think we could close this issue, thx a lot for the support. I'm curious which lib was the problem but I'm happy with a solution ;)

for the record

rm -rf node_modules
rm -f package-lock.json
npm instal
ionic serve

now is ok.

Sadly it is not working for me. I deleted node_modules folder and lock file (I'm on windows).

I still get appropriate loader error.

Here is npm ls acorn result: 7-3-problem

And here is mine package.json

{
  "name": "@infirma/frontend",
  "version": "3.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve --extra-webpack-config webpack.extra.js",
    "start:aot": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve --aot",
    "build": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --aot --stats-json --build-optimizer --progress=true --extra-webpack-config webpack.extra.js",
    "build:prod": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod --build-optimizer --progress=true --extra-webpack-config webpack.extra.js",
    "build:prod:analyzer": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod --source-map --stats-json --build-optimizer --progress=true --extra-webpack-config webpack.extra.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-analize": "webpack-bundle-analyzer dist/frontend/stats.json"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@agm/js-marker-clusterer": "^1.0.0-beta.5",
    "@amcharts/amcharts4": "^4.1.9",
    "@amcharts/amcharts4-geodata": "^4.1.2",
    "@angular/animations": "~7.2.7",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "~7.2.7",
    "@angular/compiler": "~7.2.7",
    "@angular/core": "~7.2.7",
    "@angular/forms": "~7.2.7",
    "@angular/http": "~7.2.7",
    "@angular/platform-browser": "~7.2.7",
    "@angular/platform-browser-dynamic": "~7.2.7",
    "@angular/router": "~7.2.7",
    "@auth0/angular-jwt": "^2.1.0",
    "@exalif/ngx-breadcrumbs": "^7.0.0",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.13",
    "@fortawesome/free-brands-svg-icons": "^5.7.0",
    "@fortawesome/pro-light-svg-icons": "^5.7.0",
    "@fortawesome/pro-regular-svg-icons": "^5.7.0",
    "@fortawesome/pro-solid-svg-icons": "^5.7.0",
    "@fullcalendar/bootstrap": "^4.0.0-beta.4",
    "@fullcalendar/core": "^4.0.0-beta.4",
    "@fullcalendar/daygrid": "^4.0.0-beta.4",
    "@fullcalendar/google-calendar": "^4.0.0-beta.4",
    "@fullcalendar/interaction": "^4.0.0-beta.4",
    "@fullcalendar/list": "^4.0.0-beta.4",
    "@fullcalendar/rrule": "^4.0.0-beta.4",
    "@fullcalendar/timegrid": "^4.0.0-beta.4",
    "@google/maps": "^0.5.5",
    "@lukana/alerts": "^0.1.0",
    "@lukana/data-checker": "^0.0.1",
    "@lukana/dropdowns": "^0.0.7",
    "@lukana/loading-indicator": "^0.0.2",
    "@lukana/modals": "^0.1.4",
    "@lukana/paginator": "^0.0.1",
    "@lukana/tooltips": "^0.1.1",
    "@ng-select/ng-select": "^2.15.3",
    "@ngxs/router-plugin": "^3.3.4",
    "@ngxs/store": "^3.3.4",
    "@schemater/bootstrap": "^0.3.0",
    "@schemater/bootstrap-color": "^0.1.1",
    "@schemater/components": "^0.1.2",
    "@schemater/core": "^0.3.1-4",
    "@schemater/datetime": "^0.1.4",
    "@schemater/filter-bar": "^0.2.4",
    "@sentry/browser": "^4.5.3",
    "agm-direction": "^0.7.6",
    "angular-gridster2": "^7.1.0",
    "angular-password-strength-meter": "^0.0.4",
    "angular-sortablejs": "^2.6.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "flag-icon-css": "^3.2.1",
    "http-operators": "^0.0.3",
    "js-marker-clusterer": "^1.0.0",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "ng-animate": "^0.3.4",
    "ng-pick-datetime": "^7.0.0",
    "ng-pick-datetime-moment": "^1.0.8",
    "ngx-bootstrap": "^3.2.0",
    "ngx-build-plus": "^7.7.6",
    "ngx-ckeditor": "^0.4.0",
    "ngx-color-picker": "^7.3.1",
    "ngx-take-until-destroy": "^5.4.0",
    "npm": "^6.7.0",
    "rrule": "^2.6.0",
    "rxjs": "~6.4.0",
    "sortablejs": "^1.8.3",
    "zone.js": "~0.8.29",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.3",
    "@angular/cli": "~7.3.3",
    "@angular/compiler-cli": "~7.2.7",
    "@angular/language-service": "~7.2.7",
    "@ngxs/devtools-plugin": "^3.3.4",
    "@types/ckeditor": "^4.9.5",
    "@types/faker": "^4.1.5",
    "@types/googlemaps": "^3.30.16",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~10.12.18",
    "codelyzer": "~4.5.0",
    "faker": "^4.1.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.0.1",
    "tslint": "~5.12.1",
    "typescript": "~3.2.4",
    "webpack-bundle-analyzer": "^3.0.3"
  }
}

And ng version 7-3-ng-version

This is what we did to get around it.

Removing package-lock.json and node_modules/ worked for me.

├─┬ @angular-devkit/build-angular@0.801.1
│ └─┬ webpack@4.35.2
│   └── acorn@6.2.0

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / angular-cli

Ionic - Module parse failed: Unexpected token (6:2160) #13767

🐞 Bug report

Command (mark with an `x`)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

angular / angular-cli

Ionic - Module parse failed: Unexpected token (6:2160) #13767

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Command (mark with an `x`)