unable to load angular2 application

Question

Angular2 I am getting error while load index page while not getting any compiler error index.html

{
  "name": "login",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.9",
    "systemjs": "0.19.24",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "^0.6.2"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.4",
    "typescript": "^1.7.5"
  }
}

main.ts

import {bootstrap} from '../node_modules/angular2/platform/browser';
import {Login} from './Login';

bootstrap(Login);


Login.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>


import {Component, EventEmitter,Output} from '../node_modules/angular2/core';
import {FORM_PROVIDERS, FormBuilder, Validators} from '../node_modules/angular2/common';
//import {bootstrap} from '../node_modules/angular2/platform/browser';

import {LocationStrategy, RouteParams, RouterLink, HashLocationStrategy, RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, AsyncRoute} from '../node_modules/angular2/router';

import {bootstrap} from '../node_modules/angular2/platform/browser';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '../node_modules/angular2/common';
import {Employee} from "./employee";




@Component({
    selector: 'Login',
    templateUrl: '/Login.html',
 // directives: [Login]
})



export class Login  {
  //  emp = new Employee('sanjay', '[email protected]', 999999999, '12121'); // this is our green car instance


    constructor(fb: FormBuilder) {
        alert('hello');
    this.onSubmit = fb.group({
        "firstName": ['', Validators.required],
        "streetAddress": ['', Validators.required],
        "zip": ['', Validators.required], "type": ['home']
    });
    }

 submitted = false; //form not submited : default
  data: string; //this variable contains our data


    onSubmit(data) {
        alert('hello');
        this.submitted = true;
        this.data = JSON.stringify(data, null, 2);
        console.log(this.data);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <!-- We set the base href -->
    <script>document.write('<base href="' + document.location + '" />');</script>

    <title>Angular 2 Form Builder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS file -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="styles.css">
    <!-- IE polyfills, keep the order please -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>

    <!-- Agular 2 Router -->
    <script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script>

    <script src="//code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
    <script src="//code.angularjs.org/tools/system.js"></script>
    <script src="//code.angularjs.org/tools/typescript.js"></script>
    <script src="//code.angularjs.org/2.0.0-beta.8/Rx.js"></script>
    <script src="//code.angularjs.org/2.0.0-beta.8/angular2.min.js"></script>
    <!-- Config Agular 2 and Typescript -->
    <script>
      System.config({
          defaultJSExtensions: true
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

</head>
<!-- Run the application -->
<body>
    <h1>Angular 2 Form builder </h1>
    <Login>Loading Sample...</Login>


</body>
</html>

package.json

{
   "name": "login",
   "version": "1.0.0",
   "scripts": {
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "lite": "lite-server",
     "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
    "angular2": "2.0.0-beta.9",
    "systemjs": "0.19.24",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "^0.6.2"
},
"devDependencies": {
   "concurrently": "^1.0.0",
   "lite-server": "^1.3.4",
   "typescript": "^1.7.5"
 }
}

main.ts

import {bootstrap} from 'angular2/platform/browser' import {Login} from './Login'

bootstrap(Login);

Login.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>


import {Component, EventEmitter,Output} from '../node_modules/angular2/core';
import {FORM_PROVIDERS, FormBuilder, Validators} from '../node_modules/angular2/common';


import {LocationStrategy, RouteParams, RouterLink, HashLocationStrategy, RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, AsyncRoute} from '../node_modules/angular2/router';

import {bootstrap} from '../node_modules/angular2/platform/browser';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '../node_modules/angular2/common';
import {Employee} from "./employee";




@Component({
    selector: 'Login',
    templateUrl: '/Login.html',
 // directives: [Login]
})



export class Login  {
  emp = new Employee('sanjay', '[email protected]', 999999999, '12121'); // this is our green car instance


  constructor(fb: FormBuilder) {
    alert('hello');
    this.onSubmit = fb.group({
       "firstName": ['', Validators.required],
       "streetAddress": ['', Validators.required],
       "zip": ['', Validators.required], "type": ['home']
    });
  }

  submitted = false; //form not submited : default
  data: string; //this variable contains our data

 //Show data after form submit and set submitted to true
  onSubmit(data) {
    alert('hello');
    this.submitted = true;
    this.data = JSON.stringify(data, null, 2);
    console.log(this.data);
  }
}

Getting console error while load index.html page

http://localhost:12674/node_modules/angular2/bundles/angular2-polyfills.js Failed to load resource: the server responded with a status of 404(Not Found)**

Error: Error: XHR error (404 Not Found) loading http://localhost:12674/angular2/platform/browser(…)$ @ system-polyfills.src.js:1340**

Please suggest me how can i solve this errors. Thanking you...

Thierry Templier Thierry Templier · Accepted Answer · 2016-03-10T10:40:29

I can't see where you include the angular2-polyfills.js from a node_modules folder. Regarding your first error, you should have something like:

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>

but I only see this:

<script src="//code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>

Otherwise the second error is because you didn't include the angular2.min.js file in your HTML file. This file implicitly register the angular2/platform/browser module. You should see something like that in it:

System.register("angular2/platform/browser"

It seems that you don't provide exactly what you have into your HTML entry file...

unable to load angular2 application

1 Answers