how to use multipal components in angular2

Question

I am new in angular2 , I am trying to use two components in single page but it gives me 404 error .

this is my two .ts files

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 am trying to use it on 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 it gives

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

I am stuck over there please help

Answer 1

The problem is that the module containing your event component isn't correctly loaded. It's rather a problem with your SystemJS configuration. Perhaps you don't put the TypeScript files with an app or src folder.

From the 5 Min Quickstart ( https://angular.io/guide/quickstart ):

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

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

In this case, both JS files for components (resulting from TypeScript transpilation) are located in the same folder (the app one) so import {events} from './event.component'; will look for an event.component.js file in the app folder.

how to use multipal components in angular2

Question

1 answers

solution1
1 2016-08-08 09:34:38

how to use multipal components in angular2

Question

1 answers

solution1 1 2016-08-08 09:34:38

solution1
1 2016-08-08 09:34:38