Angular2 '5 MIN QUICKSTART' - 404 errors on resources when running the application

Ben

unread,

Apr 13, 2016, 6:18:03 PM4/13/16

to AngularJS

I'm going through the 5 MIN QUICKSTART tutorial, and I'm getting 404 error messages on a few resources. I've followed the tutorial, except I'm using typings instead of tsc because of the NPM error when installing tsc. Can anybody tell me why I'm getting these errors? Here are the errors I et:

[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.04.13 16:10:55 200 GET /index.html
[1] 16.04.13 16:10:56 304 GET /styles.css
[1] 16.04.13 16:10:56 304 GET /node_modules/es6-shim/es6-shim.min.js
[1] 16.04.13 16:10:56 304 GET /node_modules/systemjs/dist/system-polyfills.js
[1] 16.04.13 16:10:56 404 GET /node_modules/angular2/es6/dev/src/testing/shims_for_IE.js
[1] 16.04.13 16:10:56 304 GET /node_modules/systemjs/dist/system.src.js
[1] 16.04.13 16:10:56 404 GET /node_modules/angular2/bundles/angular2-polyfills.js
[1] 16.04.13 16:10:56 304 GET /node_modules/rxjs/Rx.js
[1] 16.04.13 16:10:56 404 GET /node_modules/angular2/bundles/angular2.dev.js
[1] 16.04.13 16:10:56 404 GET /node_modules/angular2/es6/dev/src/testing/shims_for_IE.js
[1] 16.04.13 16:10:56 404 GET /node_modules/angular2/bundles/angular2-polyfills.js
[1] 16.04.13 16:10:57 404 GET /node_modules/angular2/bundles/angular2.dev.js
[1] 16.04.13 16:10:57 304 GET /app/main.js
[1] 16.04.13 16:10:57 404 GET /node_modules/systemjs/dist/main.js.map
[1] 16.04.13 16:10:57 404 GET /angular2/platform/browser
[1] 16.04.13 16:10:57 304 GET /app/app.component.js
[1] 16.04.13 16:10:57 404 GET /favicon.ico

Here is my index.html:

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/main')
                .then(null, console.error.bind(console));
    </script>
</head>

<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

package.json:

{
  "name": "dc-web-gateway",
  "version": "0.0.1",
  "description": "",
  "repository": "",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.14",
    "systemjs": "0.19.25",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.9",
    "typings":"^0.7.12"
  }
}

typings.json:

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
}

IntelliJ Typescript command line options:

--target "es6" --module "system" --moduleResolution "node" --sourceMap true --emitDecoratorMetadata true --experimentalDecorators true --removeComments false --noImplicitAny false

After I run `npm install` and `npm start`. The browser opens and I get a lot of 404 errors in the console. Any suggestions?

Radu Florin

unread,

Apr 14, 2016, 10:08:54 AM4/14/16

to AngularJS

Hi Ben,

in package.json line5,

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

should be

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ".

Run npm install first then npm start and you are ready to go.

Keyur patel

unread,

Jun 29, 2017, 5:22:24 AM6/29/17

to Angular and AngularJS discussion

hello i have same problem and i have done what you say. but still getting error

Reply all

Reply to author

Forward