styleUrls nicht in angular2 geladen ChildComponent (RC5)

Question

In meinem eckigen 2 (RC5) Projekt habe ich eine Reihe von Komponenten, die alle gut funktionieren, jedoch habe ich ein Submodul hinzugefügt, die gut funktioniert mit Ausnahme der styleUrl Eigenschaft childComponent. Wenn ich den gleichen URL-Pfad in der tutorial (Wurzelkomponente des Submoduls) verwenden, werden die Stile angewendet. Wenn ich den genau gleichen Pfad der chapter (Unterkomponente des Untermoduls) hinzufügen, dann werden die Stile nicht angewendet?

Es gibt keine 404 in den Blogs und Chrome-Dev-Tools zeigen chapter.css nicht als Quelle, oder etwas im Netzwerk vorhanden.

Hier können Sie die Komponente sehen mich das Problem verursacht:

@Component({ 
    selector: 'chapter', 
    template: `<div [innerHTML]="content"></div>`, 
    styleUrls: ['app/tutorial/chapter/chapter.css'] 
}) 
export class chapterComponent implements OnInit, OnDestroy { 
    private sub: Subscription; 
    private content: string = ''; 

    constructor(private route: ActivatedRoute) { } 

    ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
     var that = this; 
     var _url = './chapter/' + params['id'] + '.html'; 
     $.ajax({ 
     url: _url, 
     success: function (result) { 
      that.content = result; 
     } 
     }); 
    }); 
    } 
} 

chapter.css nicht abgeholt ... Sie können mein Projekt sehen hier Dateien:

 |-- error.html', 
     |-- index.html', 
     |-- app', 
      |-- app.component.ts', 
      |-- app.module.ts', 
      |-- app.routes.ts', 
      |-- main.ts', 
      |-- home', 
      | |-- home.component.ts', 
      | |-- home.css', 
      | |-- home.html', 
      |-- tutorial', 
       |-- tutorial.component.ts', 
       |-- tutorial.css', 
       |-- tutorial.html', 
       |-- tutorial.module.ts', 
       |-- tutorial.routes.ts', 
       |-- chapter', 
        |-- chapter.component.ts', 
        |-- chapter.css', 
        |-- chapter.html', 

Warum funktioniert nur Diese Komponente funktioniert nicht ... Der einzige Unterschied, den ich sehen kann, ist, dass diese Komponente eine Kindkomponente ist, also hat das vielleicht einen Unterschied gemacht?

Update:

Wie auf den Antworten in den Kommentaren erwähnt, den Pfad mit ./app/tutorial/chapter/chapter.css im Tutorial Komponente funktioniert, aber exakt die gleiche Weg funktioniert nicht im Kapitel Komponente (die eine untergeordnete Komponente ist). Ich habe auch ViewEncapsulation aber es hat nicht funktioniert ...

Answer 1

Versuchen Hinzufügen „Verkapselung: ViewEncapsulation.None“, um Ihre Stammkomponente

import {ViewEncapsulation} from '@angular/core'; 

    @Component({ 
     encapsulation: ViewEncapsulation.None 
    }) 

Answer 2

ändern styleUrls: ['app/tutorial/chapter/chapter.css']-styleUrls: ['./app/tutorial/chapter/chapter.css'].

Falls Sie sich gefragt haben, das . in ./app/tutorial/chapter/chapter.css gibt das aktuelle Verzeichnis an.

Answer 3

http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html Dieser Artikel bietet verschiedene Möglichkeiten, das Problem relativer Pfade mit verschiedenen Modulladeprogrammen zu lösen. Das hat mir geholfen, darüber nachzudenken, was falsch war, als ich ein ähnliches Problem hatte (obwohl ich Webpack benutze, aber das sollte nichts ausmachen).

Die wichtigste Lektion ist, die ModuleId: module.id im @Component Dekorator zu setzen! Ohne die Einstellung von ModuleId sucht Angular 2 nach unseren Dateien in Pfaden relativ zum Anwendungsstamm.

Und vergessen Sie nicht das "Modul": "commonjs" in Ihrem tsconfig.json.