styleUrls not being loaded in angular2 ChildComponent (RC5)
<p>In my angular 2 (RC5) project, I have a number of components which all work fine, however, I have added a submodule which works fine except for the <code>styleUrl</code> property of its childComponent. If I use the same url path in the <code>tutorial</code> (submodule's root component) then the styles are applied. If I add the exact same path to the <code>chapter</code> (submodule's child component) then the styles aren't applied?</p>
<p>There are no 404 coming through in the blogs and chrome's dev tools don't show <code>chapter.css</code> as a source, or something present on network.</p>
<p>Here you can see the component causing me the issue:</p>
<pre><code>@Component({
  selector: 'chapter',
  template: `&lt;div [innerHTML]=&quot;content&quot;&gt;&lt;/div&gt;`,
  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 =&gt; {
      var that = this;
      var _url = './chapter/' + params['id'] + '.html';
      $.ajax({
        url: _url,
        success: function (result) {
          that.content = result;
        }
      });
    });
  }
}
</code></pre>
<p><code>chapter.css</code> isn't being picked up... You can see my project files here:</p>
<pre><code>      |-- 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',
</code></pre>
<p>Why does only this component not work... The only difference I can see is that this component is a child component, so maybe that has made a difference?</p>
<h1>Update:</h1>
<p>As noted in the comments on the answers, using the path <code>./app/tutorial/chapter/chapter.css</code> works in the tutorial component, but the exact same path doesn't work in the chapter component (which is a child component). I also added ViewEncapsulation but it didn't work...</p>