platform-b​​rowser-dynamic.umd.js - 在 Angular2 教程中更新包后出现 404

Question

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:

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 1

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.

Answer 2

我还必须对system.config.js进行猴子复制： https : //github.com/angular/quickstart/blob/master/src/systemjs.config.js

Answer 3

node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js Failed to load resource: the server responded with a status of 404 (Not Found)

 index.html:18 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:51412/src/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js Error: XHR error (404 Not Found)

Well, I came across the above issues. To fix it, delete browser cache and hit f5 in the visual studio.