angular2错误加载资源失败：服务器响应状态为404（未找到）

问题描述：

在Angular2中我加载内部ts文件时出现问题。 main.ts内我打电话app.component。angular2错误加载资源失败：服务器响应状态为404（未找到）

错误被 无法加载资源：XHR错误（404未找到）装载http://localhost:12228/app/app.component（...）

：服务器与404（未找到）

错误状态回应http://localhost:12228/node_modules/angular2/platform/browser加载资源失败：服务器响应状态为500（内部服务器错误）

Main.ts import {bootstrap} from '../node_modules/angular2/platform/browser'; import {AppComponent} from './app.component'; bootstrap(AppComponent); app.component.ts import {Component} from '../node_modules/angular2/core'; @Component({ selector: 'hello-world', template: '<h1>Hello World From www.angulartypescript.com</h1><h2>Hallo</h2>' }) export class AppComponent { }

Index.html <!DOCTYPE html> <html> <head> <title>Login</title>  <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/angular2.dev.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.9/angular2.min.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.9/http.min.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.9/router.dev.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script> <script> System.config({ map: { app: 'assets/js/app' }, packages: { app: { defaultExtension: 'js', format: 'register' } } }); System.import('app/main').then(null, console.error.bind(console)); </script>   </head>  <body> <h1>Angular 2 Form builder </h1> <hello-world>Loading Sample...</hello-world> </body> </html>

请建议我如何解决这个问题。感谢

答

你应该使用：

import {bootstrap} from 'angular2/platform/browser'; // <---- 
import {AppComponent} from './app.component'; 

bootstrap(AppComponent);

和

import {Component} from 'angular2/core'; // <---- 

@Component({ 
    selector: 'hello-world', 
    template: '<h1>Hello World From www.angulartypescript.com</h1><h2>Hallo</h2>' 
}) 
export class AppComponent { }

，因为这些模块明确导入（https://code.angularjs.org/2.0.0-beta.9/angular2.min.js）

蒂埃里，所有的东西我已经使用，我在后面提到.. – pushp

答

如果你正在运行在您的应用程序的文件登记Visual Studio更改

import {AppComponent } from './app.component'

到

import { AppComponent } from './app.component.js'

另外更改文件扩展名来的.js。并确保您的文件“URL”指向该文件。

答

我遇到了类似的问题。花了大约3个小时后，我意识到我在错误的目录中运行了ng serve命令。

只需在启动角度项目之前检查您的当前工作目录。

angular2错误加载资源失败：服务器响应状态为404（未找到）

相关推荐