kamilk kamilk - 4 months ago 29
AngularJS Question

platform-browser-dynamic.umd.js - 404 after updating packages in Angular2 tutorial

I started following Angular2 tutorial a while ago. Now that I've come back to it and got to the Routing chapter, it seems like the tutorial has been updated slightly and I had to go back and update

package.json
to the current version or the
app.routes.ts
file wouldn't compile. Now it compiles fine but when I run the application, scripts crash at runtime, apparently inside the Zone.js package:

enter image description here

I've checked and the
platform-browser-dynamic.umd.js
file indeed doesn't exist on disk.

This is the new
package.json
file:

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.4",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.14",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}


I've tried using the longer version from the tutorial's GitHub repository, but the error is the same. Although the vanilla GitHub project builds and runs fine.

I've made sure my
<script
> tags in
index.html
match the ones on GitHub:

<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>


My
typings.json
file:

{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}


How can I get rid of this error? My Angular2 experience so far consisting in copying code from the tutorial like a monkey, I don't really understand what this error relates to...

Answer

Your Angular2 app was not able to load platform-browser-dynamic.umd.js as well as your other umd bundles as they were moved to the bundles/ subdirectory in 2.0.0-rc.2.

As you already noticed your error was inside your system.config.js as it was trying to load the umd bundles using the wrong path (see here).

Copying the new config file should have added the '/bundles/' + part which does resolve your issue.

Comments