Jason Goemaat February 2016

Angular2 Typescript component loading tutorial/debugging?

I'm using Angular-CLI and working with ES6 modules and imports for the first time and I'm having a hard time understanding them. I basically started a new project with 'ng new Angular2Facebook' then `ng g component Login'. That created this structure:

dist
  app
    components
       login
node_modules
src
  app
    components
      login
        login.ts
   angular2-facebook.ts
app.ts

I finally figured out to use a relative path to the component for importing my own components to avoid compile errors:

import {Login} from './components/login/login'; // error

Since I no longer get compile errors, I'm pretty sure it's the right place, but the <login> in my angular2-facebook view is not getting replaced with the template. In fact, the generated login.js is not being executed. If I go to my main app.ts file and import it, still nothing. If I add this:

console.dir(new Login());

Then I can see the file is loaded because 'exported class "Login"' is displayed in the console, but still the tags don't get replaced by the template. Here's Login.ts:

import {Component} from 'angular2/core';

@Component({
    selector: 'login',
    //templateUrl: 'app/components/login/login.html',
    template: '<h1>LOGIN TEMPLATE</h1>',
    styleUrls: ['app/components/login/login.css'],
    providers: [],
    directives: [],
    pipes: []
})
export class Login {
    constructor() {
        console.log("Login constructor()");
    }
}

console.log('exported class "Login"');

And angular2-facebook.ts which is always ran:

import {Component} from 'angular2/core';
import {Login} from './components/login/login';
import {FacebookTest1} from './components/facebook-test1/facebook-test1';

@Component({
    selector: 'angular2-facebook-app',
    provide        

Answers


SnareChops February 2016

Add the Login component to your list of Directives in your Angular2FacebookApp component.

@Component({
  selector: 'angular2-facebook-app',
  providers: [],
  templateUrl: 'app/angular2-facebook.html',
  directives: [Login],
  pipes: []
})

This tells angular to replace the <login> tag with an instance of your component.

Without this angular doesn't know that it needs to replace this tag.


Angel Angel February 2016

In this link of Angular2 web https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# you can see that adding directives: [...ClassName] inside of @Components for example:

import {Component} from 'angular2/core';
import {Login} from './components/login/login';
import {FacebookTest1} from './components/facebook-test1/facebook-test1';

@Component({
    selector: 'angular2-facebook-app',
    providers: [],
    templateUrl: 'app/angular2-facebook.html',
    directives: [Login],
    pipes: []
})
//Rest of code

you can watch the file name app.appcomponet.ts for more details, hopefully help.

Post Status

Asked in February 2016
Viewed 3,045 times
Voted 12
Answered 2 times

Search




Leave an answer