0
Angular2 我得到錯誤而負擔的索引頁，而沒有得到任何編譯器錯誤 的index.html無法加載angular2應用
{
"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>
包。 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
進口從」 ./Login'
自舉（登錄） 'angular2 /平臺/瀏覽器' 進口{登錄} {自舉};
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);
}
}
獲取控制檯錯誤而負擔index.html頁面
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**
請建議我我如何解決這個錯誤。 感謝你...