Question

我是angular2的新用户，我试图在单页中使用两个组件，但它给了我404 error。

这是我的两个.ts个文件

app.ts

import {Component, View, bootstrap} from 'angular2/angular2';

import {events} from './event.component';

@Component(
    {
        selector: 'contact'
    })
    @View({

        templateUrl: './Travel Operator/login.html',

        directives: [events]
})

export class Contact {
}

bootstrap(Contact);

和event.component.ts

import {Component, View, bootstrap} from "angular2/angular2";

@Component(
    {

        selector: 'events'
    })
@View({
        template: '<h1>Hello World</h1>'
})


export class events {

    }
}

bootstrap(events);

我试图在我的主要index.html文件中使用它，如

<html>
<body>
    <h1>First Angular App</h1>

    <div id="content">
        <contact></contact>
    </div>
    <div id="events">
        <events></events>
    </div>

</body>
</html>

但它给出了

＆＃34; NetworkError：404 Not Found - http://localhost:55777/event.component＆＃34; 错误

我被困在那里请帮助

Answer 1

问题是未正确加载包含事件组件的模块。这是SystemJS配置的一个问题。也许您没有将TypeScript文件放在app或src文件夹中。

从5分钟快速入门（https://angular.io/guide/quickstart）：

var map = {
  'app': 'app', // 'dist',
  (...)
}

var packages = {
  'app': { main: 'main.js',  defaultExtension: 'js' },
  (...)
};

在这种情况下，组件的两个JS文件（由TypeScript转换产生）都位于同一个文件夹（app）中，因此import {events} from './event.component';将查找event.component.js个文件app文件夹。

如何在angular2中使用multipal组件

1 个答案: