Angular2 2.1.0 problème récursif

Bonjour,

Je rencontre un problème que j'essaye de comprendre, mon but étant d'appeler un composant enfant.

Voici mon point d'entrée : index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<html>
  <head>
    <title>Première page d'angular</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <ang2></ang2>
  </body>
</html>

Je ne sais pas si c'est le bon terme, je vais extrapoler la balise ang2 par ce composant qui vient du fichier :
app.componement.ts

Code:

1
2
3
4
5
6
7
8
9
10
 
import { Component } from '@angular/core';
 
@Component({
  selector: 'ang2',
  template: 'commencer la page ...'
})
 
 
export class AppComponent { }

Jusque là, en ouvrant la page, j'ai bien le message 'commencer la page ...'.

Je corse en extrapolant un autre composant :

Code:

1
2
3
4
5
6
7
8
9
10
 
import { Component } from '@angular/core';
 
@Component({
  selector: 'ang2',
  template: 'commencer la page ...<menuFix></menuFix> '
})
 
 
export class AppComponent { }

Lorsque j'appelle menuFixe j'ai une boucle infinie. :(

Pièce jointe 224213

Comment dois-je m'y prendre ?

Voici les autres fichiers :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
//app.module.ts
 
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
import { AppComponent }   from './app.component';
import { MenuFixComp } from './menuFix.comp';
 
@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent,MenuFixComp ],
  bootstrap:    [ AppComponent ]
})
 
export class AppModule { }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
//menuFix.comp.ts
 
import { Component } from '@angular/core';
 
@Component({
  selector: 'menuFix',
  templateUrl: 'je suis le menu fix !!!!'
})
 
 
export class MenuFixComp { }

Et l'arborescence:

Pièce jointe 224214

Si vous avez une idée, merci d'avance de vos réponses. :P