StyleUrls not loading in angular2 ChildComponent (RC5)

Question

In my angular 2 (RC5) project, I have a number of components, all of which work fine, however I added a submodule that works fine except for the styleUrl property of its childComponent. If I use the same URL path in the tutorial (the root component of the submodule), then the styles apply. If I add the same path to chapter (a child component of a submodule), will the styles not be applied?

There are no 404 blogs, and the hrome dev tools do not show chapter.css as a source or something present on the net.

Here you can see the component causing my problem:

 @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 not chapter.css ... Here you can see my project files:

  |-- 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', 

Why only this component does not work ... The only difference that I see is that this component is a child component, so maybe this made a difference?

Update:

As noted in the comments on the answers, using the ./app/tutorial/chapter/chapter.css path works in the tutorial component, but the same path does not work in the chapter component (which is a child component). I also added ViewEncapsulation, but that didn't work ...

Answer 1

Try adding "encapsulation: ViewEncapsulation.None" to your parent component

 import {ViewEncapsulation} from '@angular/core'; @Component({ encapsulation: ViewEncapsulation.None }) 

Answer 2

http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html This article has several different ways to approach the problem of relative paths with different module loaders. This helped me understand what was wrong when I had a similar problem (although I use webpack, but it does not matter).

The key lesson is to install moduleId: module.id in the @Component decorator! Without the moduleId parameter, Angular 2 will search for our files along the path relative to the application root.

And don't forget the "module": "commonjs" in your tsconfig.json.

Answer 3

Change styleUrls: ['app/tutorial/chapter/chapter.css'] to styleUrls: ['./app/tutorial/chapter/chapter.css'] .

If you are interested,. in ./app/tutorial/chapter/chapter.css indicates the current directory.