logo标签列表

Angular2错误：无法加载资源：服务器响应状态为404（未找到）

angular
3
在Angular2中，我遇到了加载内部ts文件的问题。在main.ts中，我正在调用app.component。
错误信息如下： 资源加载失败：服务器响应状态为404（未找到） 错误：XHR错误（404未找到），加载http://localhost:12228/app/app.component（...） 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/2.0.0-beta.9/angular2-polyfills.js"></script>-->

    <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>


    <!--<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="../node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.min.js"></script>-->
    <!-- 2. Configure SystemJS -->
    
</head>
<!-- Run the application -->
<body>
    <h1>Angular 2 Form builder </h1>
    <hello-world>Loading Sample...</hello-world>

</body>
</html>

请告诉我如何解决这个问题。 谢谢。
3个回答
3

您应该使用：

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) 明确注册的。

1

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

在开始Angular项目之前，请检查您的当前工作目录。

0

如果您正在使用Visual Studio运行应用程序，请更改

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

到

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

同时将文件扩展名更改为.js，并确保您的文件“URL”指向该文件。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接