All geek questions in one place

How to use multipart components in angular2

I'm new to angular2, I'm trying to use two components on the same page, but it gives me 404 error.

these are my two files .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);

and event.component.ts

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

@Component(
    {

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


export class events {

    }
}

bootstrap(events);

and I'm trying to use it in my main index.html file like

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

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

</body>
</html>

but he gives

"NetworkError: 404 Not Found - http: // localhost: 55777 / event.component " error

I'm stuck there please help

+4
source share
1 answer

, , , . 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 one), import {events} from './event.component'; event.component.js app .

+1

Source: https://habr.com/ru/post/1650522/

More articles:


All Articles