angular2-meteor styleUrl doesn't load

Question

I've got this component which doesn't load the style. The template loads correctly though.

// client/imports/navbar/navbar.ts
import {Component} from "@angular/core";
@Component({
    selector: 'navbar',
    templateUrl: 'client/imports/navbar/navbar.html',
    styleUrls: ['client/imports/navbar/navbar.css']
})
export class Navbar {}

So far I've tryed:

• Setting the base href at the /client/index.html
• Injecting the base href at base component /client/app.ts in the bootstrap
• Loading the style with:

styleUrls: [ '/client/imports/navbar/navbar.css', 'client/imports/navbar/navbar.css', 'imports/navbar/navbar.css', './navbar.css', 'navbar.css' ]

However, components in the root folder load the style witthout any issue:

// client/app.ts
import {Component} from "@angular/core";
@Component({
    selector: 'app',
    templateUrl: 'client/app.html',
    styleUrls: ['app.css']
})
export class AppComponent{}

I've already know that:

• Angular styles doesn't support relative paths
• Path should not start with slash /
• Paths should reffer to the root because I use SystemJs (Meteor).

But I triyed anyway.

Update:

The only way I find to make it moular is to declare the style inside the same template html file like this:

 <style>
   .my-class{
       ...
   }
 </style>
 <div class="my-class">
      ...
 </div>

Answer 1

The problem at the moment seems to be, that all *.css files are merged together by the build which is then loaded via http://localhost:3000/merged-stylesheets.css?hash=something, so you will get a global style with this name, but not the component-local style of Angular.

Consider the following example of mine:

@Component({
    templateUrl: 'client/home.component.html',
    styleUrls: [ 'client/home.component.css' ]
})
export class HomeComponent extends MeteorComponent {

I do see an additional network request to the CSS at client/home.component.css, but unfortunately if you look at the content, this is treated as a "route" request and returns the entire page and not the content of the CSS.

EDIT: There seems to be already an issue filed against this: https://github.com/Urigo/angular2-meteor/issues/270

WORKAROUND:

As using styleUrls loads the CSS on-demand, it needs to be available later. You can therefore put it in the public/ folder of the meteor project. In the case of my example, the css needs to be located at public/client/home.component.css.