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 Not Found）loading 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＆＃39;

编辑：

解决方案是：

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

组件的角度2导入在VS中有效，但在浏览器

1 个答案: