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

Question

I have a very simple app setup: 我有一个非常简单的应用设置：

Index.html: 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 Here I'm importing post.component and it seems to work well. 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 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');
    }

}

All very simple, but for some reason when I run it I get: 一切都很简单，但是由于某种原因，我得到了：

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

angular2-polyfills.js:349 Error: XHR error (404 Not Found) loading http://localhost:5000/lib/spa/components/post.component (…) angular2-polyfills.js：349错误：加载http：// localhost：5000 / lib / spa / components / post.component （…）时出现XHR错误（找不到404）

Why do I get this? 为什么我得到这个？ It seems it looks for the file http://localhost:5000/lib/spa/components/post.component 似乎正在寻找文件http：// localhost：5000 / lib / spa / components / post.component

when it should apply .js to the request and get http://localhost:5000/lib/spa/components/post.component.js ' 什么时候应该将.js应用于请求并获取http：// localhost：5000 / lib / spa / components / post.component.js '

EDIT: 编辑：

Solution was: 解决方案是：

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

The package loader system.js was not configured correctly.. 软件包加载程序system.js的配置不正确。

Answer 1

Your configuration is wrong. 您的配置错误。 You configured a package named app but your package is named lib . 您配置了名为app的软件包，但将其命名为lib 。

Try: 尝试：

<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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-22 12:09:13

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-22 12:09:13

解决方案1
1 已采纳 2016-05-22 12:09:13