Angular2简单的应用程序打印我的第一个角2应用程序，但得到错误？

我写了一个程序来打印“我的第一个Angular 2应用程序”，但无法继续输出。请提出在哪里做错误。Angular2简单的应用程序打印我的第一个角2应用程序，但得到错误？

environment_app.component.ts

import { AnotherComponent } from './anotherComponent.component'; 
import {component,view} from "angular2/core"; 
@Component({ 
selector:'my-app' 
template:'<h2>My First Angular 2 App</h2>' 
}) 
export class AppComponent{ 
}

environment_main.ts

import {bootstrap} from "angular2/platform/browser/index" 
import {AppComponent} from "./environment_app.component" 

bootstrap(AppComponent);

的index.html

<html > 
    <head> 
    <title>Hello World</title> 
    <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> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script> 
    <script src="node_modules/angular2/bundles/http.dev.js"></script> 
    <script> 
     System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: {'app': {defaultExtension: 'ts'}}, 
     map: { 'app': './angular2-demo/app' } 
     }); 
     System.import('app/environment_main') 
      .then(null, console.error.bind(console)); 
    </script> 
    </head> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html>

下面是我得到的错误：

angular2-polyfills.js:1243 Error: XHR error (404 Not Found) loading http://localhost:3000/angular2-demo/app/environment_main.ts 
    Error loading http://localhost:3000/angular2-demo/app/environment_main.ts 
    at o (system.src.js:4597) 
    at XMLHttpRequest.I.s.onreadystatechange [as _onreadystatechange] (system.src.js:4597) 
    at Zone.run (angular2-polyfills.js:1243) 
    at XMLHttpRequest.zoneBoundFn (angular2-polyfills.js:1220)

来源

2017-04-24 Sauabhagya Dewangan

这些都是我提出做一些改变它的工作：

environment_app.component.ts：

import {Component} from "angular2/core"; // capitalized 'Component' 
@Component({ 
    selector:'my-app' 
    template:'<h2>My First Angular 2 App</h2>' 
}) 
export class AppComponent{ 
}

environment_main.ts：

import {bootstrap} from "angular2/platform/browser" // removed '/index' 
import {AppComponent} from "./environment_app.component" 

bootstrap(AppComponent);

的index.html：

<html > 
    <head> 
    <title>Hello World</title> 
    <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> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script> 
    <script src="node_modules/angular2/bundles/http.dev.js"></script> 
    <script> 
     System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: {'app': { 
      main: './environment_main.ts', 
      defaultExtension: 'ts' 
     }}, 
     map: { 'app': './src' } 
     }); 
     System.import('app') 
      .then(null, console.error.bind(console)); 
    </script> 
    </head> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html>

这里是Plunkr

来源

2017-04-24 10:08:49 hiper2d

感谢您的解决方案。应用程序运行成功。 –

Angular2简单的应用程序打印我的第一个角2应用程序，但得到错误？

回答

相关问题