My component is having trouble loading the style, even though the template loads correctly.
// 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 {}
I've attempted the following solutions:
- Setting the
base hrefin the/client/index.htmlfile - Injecting the
base hrefinto the base component/client/app.tsduring the bootstrap process - Trying different ways of 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 are able to load styles without any issue:
// client/app.ts
import {Component} from "@angular/core";
@Component({
selector: 'app',
templateUrl: 'client/app.html',
styleUrls: ['app.css']
})
export class AppComponent{}
I am aware that:
- Angular styles do not support relative paths
- Paths should not start with a slash
/ - Paths should refer to the root due to the use of SystemJs (Meteor).
Despite this, I tried these methods anyway.
Update:
The only way I found to make it work was to declare the style inside the same template HTML file like this:
<style>
.my-class{
...
}
</style>
<div class="my-class">
...
</div>