Question

Angular2 我在加载索引页面时收到错误，而没有得到任何编译器错误的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', 'psingh@newconinfosystems.com', 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

从'angular2 / platform / browser'导入{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', 'psingh@gms.com', 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无法加载资源：服务器响应状态为404（未找到）**

错误：错误：XHR错误（404 Not Found）loading http://localhost:12674/angular2/platform/browser（...）$ @ system-polyfills.src.js：1340 **

请建议我如何解决这个错误。感谢你......

Answer 1

我无法在angular2-polyfills.js文件夹中看到您包含node_modules的位置。关于你的第一个错误，你应该有：

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

但我只看到这个：

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

否则第二个错误是因为您没有在HTML文件中包含angular2.min.js文件。该文件隐式注册angular2/platform/browser模块。你应该在里面看到类似的东西：

System.register("angular2/platform/browser"

您似乎没有准确提供HTML条目文件中的内容......

无法加载angular2应用程序

1 个答案: