This morning I've been updating my Angular RC 5 application to RC 6. After fixing a few issues in the code I've built the code however I seem to have an error whilst the app is being bootstrapped. (I'm not sure about this, it's just my suspicion).
From the research I've made it seems to be an issue related to webpack and @angular/upgrade. (Refer to: https://github.com/angular/angular/issues/11249). I didn't find a lot of information apart from this, so I was hoping that someone has had come across a similar issue.
Currently in the console I'm seeing the following errors:
Uncaught SyntaxError: Unexpected token export
Uncaught TypeError: Cannot read property 'call' of undefined
When I went through the code to see where it is failing I've noticed that the Uncaught SyntaxError: Unexpected token export error comes from an index.js file, which is the index.js file of the @angular/upgrade. In the link above it's mentioned that the @angular/upgrade is not pointing to the correct "UMD bundle". To be honest I'm not sure what is meant by this and I'm not sure what I can do to fix this issue.
Error inside the @angular/update index.js
package.json
{
"name": "ui-prototype",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --inline --progress --profile --bail --port 8581",
"lite": "lite-server",
"build:dev": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail",
"build:prod": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"test": "gulp test",
"watch": "gulp tdd",
"test:karma": "karma start",
"watch:karma": "npm run test:karma -- --auto-watch --no-single-run",
"e2e": "npm run protractor",
"e2e:live": "npm run e2e -- --elementExplorer",
"lint": "gulp tslint",
"tslint": "tslint -c tslint.json src/**/*.ts",
"protractor": "protractor",
"pree2e": "npm run webdriver:update -- --standalone",
"ci": "npm run lint && npm test && npm run e2e",
"webdriver-manager": "webdriver-manager",
"webdriver:update": "npm run webdriver-manager update",
"webdriver:start": "npm run webdriver-manager start"
},
"dependencies": {
"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/core": "2.0.0-rc.6",
"@angular/forms": "2.0.0-rc.6",
"@angular/http": "2.0.0-rc.6",
"@angular/platform-browser": "2.0.0-rc.6",
"@angular/platform-browser-dynamic": "2.0.0-rc.6",
"@angular/router": "3.0.0-rc.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.6",
"angular2-in-memory-web-api": "0.0.18",
"angular2-jwt": "^0.1.16",
"es6-shim": "^0.35.0",
"jquery": "^2.2.4",
"ng2-cookies": "^0.1.9",
"ts-node": "^0.9.3",
"primeng": "1.0.0-beta.14",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.11",
"core-js": "^2.4.0",
"zone.js": "^0.6.17"
},
"devDependencies": {
"ts-promise": "^0.3.0",
"codelyzer": "0.0.22",
"concurrently": "^2.0.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"gulp": "^3.9.1",
"gulp-tslint": "^5.0.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"jasmine-core": "^2.4.1",
"karma": "^1.1.0",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^1.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-html-reporter": "^0.2.7",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"lite-server": "^2.2.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"protractor": "^3.2.2",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"tslint": "^3.10.2",
"tslint-loader": "^2.1.4",
"typescript": "^1.8.10",
"typings": "^1.3.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.0"
}
}
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
if (process.env.ENV === 'production') {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
Update: Source of issue found
So I kept on searching to find a solution to my problem and I went back to the link I've attached above. There's a commit tagged in there which links to the same issue. (Refer to: https://github.com/angular/angular/commit/979657989bab4fb93faf6a207d30760faa9bd696). Once I looked at the updates there I realised what had to be done.
The issue is that the package.json for the @angular/upgrade package is pointing to the incorrect UMD file.
@angular/upgrade package.json
{
"_args": [
[
{
"raw": "@angular/[email protected]",
"scope": "@angular",
"escapedName": "@angular%2fupgrade",
"name": "@angular/upgrade",
"rawSpec": "2.0.0-rc.6",
"spec": "2.0.0-rc.6",
"type": "version"
},
"c:\\xampp\\htdocs\\yii\\application\\prototype\\branches\\INT-81_RD\\ng-app"
]
],
"_from": "@angular/[email protected]",
"_id": "@angular/[email protected]",
"_inCache": true,
"_installable": true,
"_location": "/@angular/upgrade",
"_nodeVersion": "5.4.1",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/upgrade-2.0.0-rc.6.tgz_1472686652636_0.8626930271275342"
},
"_npmUser": {
"name": "angular",
"email": "[email protected]"
},
"_npmVersion": "3.9.2",
"_phantomChildren": {},
"_requested": {
"raw": "@angular/[email protected]",
"scope": "@angular",
"escapedName": "@angular%2fupgrade",
"name": "@angular/upgrade",
"rawSpec": "2.0.0-rc.6",
"spec": "2.0.0-rc.6",
"type": "version"
},
"_requiredBy": [
"/"
],
"_resolved": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-2.0.0-rc.6.tgz",
"_shasum": "3757ab3607cf5b09ef47d98ea4bb5bf5cffeab53",
"_shrinkwrap": null,
"_spec": "@angular/[email protected]",
"_where": "c:\\xampp\\htdocs\\yii\\application\\prototype\\branches\\INT-81_RD\\ng-app",
"author": {
"name": "angular"
},
"bugs": {
"url": "https://github.com/angular/angular/issues"
},
"dependencies": {},
"description": "",
"devDependencies": {},
"directories": {},
"dist": {
"shasum": "3757ab3607cf5b09ef47d98ea4bb5bf5cffeab53",
"tarball": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-2.0.0-rc.6.tgz"
},
"homepage": "https://github.com/angular/angular#readme",
"license": "MIT",
"main": "bundles/core.umd.js",
"maintainers": [
{
"name": "angular",
"email": "[email protected]"
}
],
"module": "index.js",
"name": "@angular/upgrade",
"optionalDependencies": {},
"peerDependencies": {
"@angular/core": "^2.0.0-rc.6",
"@angular/compiler": "^2.0.0-rc.6",
"@angular/platform-browser": "^2.0.0-rc.6",
"@angular/platform-browser-dynamic": "^2.0.0-rc.6"
},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/angular/angular.git"
},
"scripts": {},
"typings": "index.d.ts",
"version": "2.0.0-rc.6"
}
You'll notice that above there's a "main": "bundles/core.umd.js".
This should be updated to "main": "bundles/upgrade.umd.js".
I'm guessing that this is some kind of bug from the package itself? Probably it will be fixed in the near future. For now I had to change this manually to fix it.
