angular 2 组件导入在 VS 中有效，但在浏览器中给出 404

Question

我有一个非常简单的应用设置：

Index.html:

<!doctype html>
<html>
<head>
    <title>Angular 2</title>   
    <!-- Libraries -->
    <script src="/lib/js/es6-shim.js"></script>
    <script src="/lib/js/angular2-polyfills.js"></script>
    <script src="/lib/js/system.src.js"></script>
    <script src="/lib/js/rxjs/bundles/Rx.js"></script>
    <script src="/lib/js/angular2.dev.js"></script>  
    <!-- Stylesheet -->
    <link rel="stylesheet" type="text/css" href="/app/reddit_v2/style/semantic/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="/app/reddit_v2/style/styles.css">
</head>
<body>
    <!-- Configure System.js, our module loader -->
    <script>
        System.config({

            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }

        });
        System.import('/lib/spa/app.js')
              .then(null, console.error.bind(console));
    </script>
    <!-- Menu Bar -->
    <div class="ui menu">
        <div class="ui container">
            <a href="#" class="header item">
                header
            </a>
            <div class="header item borderless">
                <h1 class="ui header">
                    Angular 2
                </h1>
            </div>
        </div>
    </div>
    <div class="ui main text container">
        <app></app>
    </div>
</body>
</html>

app.ts 我在这里导入 post.component，它似乎运行良好。

import { bootstrap } from 'angular2/platform/browser';
import { Component } from 'angular2/core';
import { Post } from './components/post.component';

@Component({
    selector: 'app',
    templateUrl: '/app/app.html',
    directives: [Post]
})


class App {

    constructor() {
    }

    ngOnInit() {
        console.log('app');
    }

    addArticle(title: HTMLInputElement, link: HTMLInputElement): void {
        console.log(`adding title: ${title.value} and link: ${link.value}`);
    }
}

bootstrap(App);

post.component.ts

import { Component } from 'angular2/core';

@Component({
    selector: 'post',
    template: '<p>test</p>'
    //templateUrl: '/app/component/post.component.html'
})

export class Post {

    constructor() {

    }

    ngOnInit() {
        console.log('post');
    }

}

一切都很简单，但由于某种原因，当我运行它时，我得到：

angular2-polyfills.js:127 GET http://localhost:5000/lib/spa/components/post.component 404 错误

angular2-polyfills.js:349 错误：XHR 错误（404 未找到）加载 http://localhost:5000/lib/spa/components/post.component(…)

为什么我会得到这个？它似乎在寻找文件 http://localhost:5000/lib/spa/components/post.component

何时应将 .js 应用于请求并获取 http://localhost:5000/lib/spa/components/post.component.js'

编辑：

解决方案是：

<script>
    System.config({
        packages: {
            '/lib/spa/': { defaultExtension: 'js' }
        }
    });
    System.import('/lib/spa/app.js')
          .then(null, console.error.bind(console));
</script>

包加载器 system.js 配置不正确..

Answer 1

您的配置有误。您配置了一个名为 app 的包，但您的包名为 lib.

尝试：

<script>
    System.config({

        packages: {
            lib: {
                format: 'register',
                defaultExtension: 'js'
            }
        }

    });
    System.import('lib/spa/app')
          .then(null, console.error.bind(console));
</script>

angular 2 组件导入在 VS 中有效，但在浏览器中给出 404

angular 2 import of component works in VS, but gives 404 in browser

javascript

components

angularjs

angular2-directives

angular