styleUrls not working in Angular 2

Question

I'm using Angular 2 with SystemJS and trying to add a stylesheet to a component.
Since I'm using SystemJS I can't use relative path as of now, so I used absolute path for the component's template url and also the style url.
However inline style works fine (i.e styles: ['h1 {font-size: 12px; }'] )

The component looks something like this:

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['/app/components/dashboard/dashboard.css']
})

The stylesheet dashboard.css never gets loaded(nor does it returns any error).

Versions of the tools:

~ angular 2: 2.0.0-beta.6
~ systemjs: 0.19.20
~ typescript: 1.8.0

Commons

There is a problem with absolute paths within the styleUrls attribute. See these links for mroe details: * #35189303 * github.com/angular/angular/issues/6905 – Heterozygote

It works in angular 2.0.0-beta.9. Are you restricted to using 6? – Meltwater

As mentioned by @thierry styleUrls doesn't allow absolute url. And I can't use relative path with SystemJS as of now. However I updated angular2 to beta-12 and it behaved like the same way as the previous one. – Commons

this is an open bug in ng2: github.com/angular/angular/issues/4974 occurred for me with beta17 – Staminody

This issue seems to be resolved, update Angular. github.com/angular/angular-cli/issues/6007 – Severable

Answer 1

You just need to remove the slash from the beginning of the styleUrls path like this:

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['app/components/dashboard/dashboard.css']
})

Groundsill

Why does the template URL work with the leading slash but the style URLs wont? – Roily

It is a bug, a leading slash should be allowed just as in templateUrl: github.com/angular/angular/issues/4974 – Clouded

...thats messed up. Why do they have so many ways of pathing? Import, templateUrl and styleUrl are all different.... bizarre – Brow

for angular-cli this has changed again - now templateUrl and styleUrls both require relative paths... – Bright

This is not the right solution if you have relative paths. If you leave relative paths in place such as './app.component.css', then SystemJS will not import them. If you remove the relative part './' then SystemJS will attempt to load the CSS but at the ROOT of the application which will be a 404. – Rauscher

Answer 2

If you are using PrimeNG or Angular Material in your project that styleUrl will not work like this. You need to import ViewEncapsulation and put encapsulation: ViewEncapsulation.None in the @component definition.

import { Component, Output, Input, ViewEncapsulation} from '@angular/core';

@Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'message-center',
   templateUrl: './messagecenter.component.html',
   styleUrls: ['./messagecenter.component.css']
})

Oletaoletha

any explanation for this? – Mclyman

Does the same thing happen for Ngb? – Undershrub

If you use ViewEncapsulation.None, the css will be applied to the whole project. When using PrimenNg, in order to define component specific styling for primeng components, you have to use ":host ::n-deep .p-[componentname]" in the css/scss defined in styleUrls – Punctilio

Answer 3

Angular 2 docs say that SystemJS exposes __moduleName variable required for relative names just like module.id for CommonJS... Have you tried that?

declare var __moduleName: any;
@Component({
    moduleId: __moduleName,
    selector: 'dashboard',
    templateUrl: 'dashboard.html',
    styleUrls: ['dashboard.css']
})

Roadster

I do not understand and your link says 404 I use exactly but get __moduleName is not define – Myself

Seems to me like its outdated now. If you are using the AOT compiler it should no longer be an issue even with SystemJS. See docs here: angular.io/docs/ts/latest/guide/… – Roadster

Error: Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol '___moduleName' – Rauscher

Answer 4

I just had the same problem with the Heroes tutorial. The moduleId solved the problem:

@Component({
  moduleId: module.id, // this is the key
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: ['dashboard.component.css']
})

Without the moduleId only inline styles and template work.

Brussels

This does nothing for me with SystemJS. No change in behavior. – Rauscher

module.id approach is now deprecated, don't use it! – Rauscher

Answer 5

I tried to implement styleUrls: in plunker sample. It worked for me.

I used the following:

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app-root.style.css']
})

Check for the file app.component.ts and app-root.style.css

https://plnkr.co/edit/z6tl8o0b8cJ6zGofKfmF?p=preview

Megen

Answer 6

the style url's look right as long as the index.html is in the folder above app.

Also in the html markup, the class needs to be set to what you want in the styles.

Annulation

Answer 7

for this you do not need to remove any trailing slash or any thing, actually I was also making this mistake and html page was not linking with css file.

Actually I was making silly mistake : html page as :

<img src="../../assets/images/logo.png" alt="LOGO" class="responsive-img login-logo-width">

css file as :

login-logo-width {
   width: 260px;
}

Error I was getting as : This inspection detects unknown CSS selectors and provides ability to declare them as a class or an id

So the htiong which you have to do is : define the parameter to id or class whatever you have declared in the html file as :

.login-logo-width {
    width: 260px;
}

Bacchanalia

Answer 8

Relative paths to the current file with the moduleId from @boskicthebrain's solution worked for me.

However since I am on webpack, the css files in this case have to be loaded with the raw-loader (instead of the style-loader/css-loader combination since the style-loader is not for server-side AOT) and let angular do it's work.

At the end, since the ::ng-deep operator is deprecated and the styles are very scope restrictive, I dumped all of it and went with a simple import import './my-component.component.css'; at the top of the .component.ts file. This has the benefit of being loaded with the component while also being global CSS.

Severable

Answer 9

import {Component} from '@angular/core'

@Component({
selector:'my-employee',
templateUrl:'./employee.component.html',
styleUrls:['./employee.component.css']
})

Make sure the style you are applying is in the given path('./employee.component.css'). One doesn't need to mention the module.ts ID to enable the styles for other components. Just follow the correct path.

Decarbonate