Unable to load CSS in component

[KirilNN]

We are trying to load a CSS file into the HelloWorld component using:

@Component({
  selector: 'hello-world-app',
  templateUrl: 'hello-world.template.html',
  styleUrls: ['hello.css'],
  encapsulation: ViewEncapsulation.None
})

this throws with You may need an appropriate loader to handle this file type.

Tried adding css-loader and style-loader in the webpack.config.js file:

{ test: /\.css$/, use: ["style-loader", "css-loader"]},

but this triggers an Angular exception Cannot read property 'replace' of undefined.

Any help will be appreciated!

[sonicoder86]

You have to pass the styles as a raw string, replace style-loader with raw-loader

[KirilNN]

@BlackSonic already tried the raw-loader approach, however the problem comes from the ViewEncapsulation.None, in the default case the CSS loads correctly.

[sonicoder86]

Added example for style loading and without ViewEncapsulation.None it works fine.
Is it necessary, because this way it will affect the whole page? If so i would create a ticket on the Angular repository.

[KirilNN]

What I am trying to do is - load a stylesheet that will hold the styling for the whole application, and it is not part of a module. And the ViewEncapsulation.None is needed in order to use this, so called, global stylesheet for the whole application and not scope it per component.

Maybe we can open an issue in the Angular repo - if you think that this is related to the offline compiler?

[sonicoder86]

@KirilNN Added support for global styles. I dont think that using ViewEncapsulation.None for global styles is a good practice. Rather require them in a separate file like now in the examples polyfill.ts.

[KirilNN]

@BlackSonic Thanks for that, tested it and it worked perfectly. One side question - with the new setup I am not really sure that AoT works correctly. For example the following setup should throw an error I guess (private variable used in template)?:

@Component({
  selector: 'hello-world-app',
  template: '{{foo}}'
})
export class HelloWorldComponent {
 private foo: string = "bar";
}

Maybe they fixed the compiler in the latest version? However I cannot find any record for it

[sonicoder86]

It should throw, but i would search for it in the main repository.
Haven't encountered this situation yet.

[unsafecode]

@BlackSonic Have this very same issue:

1. Clone the latest repo version
2. Clear all ngfactory files
3. Add ViewEncapsulation.None to home.component
4. Run start-plugin
5. Cannot read property 'replace' of undefined in the browser

I might agree it's more elegant to place all global styles in a separate file, but nonetheless this should not happen. I've been investigating this problem a bit, and it's really silly: in the compiled .ngfactory, styles are always accessed like abc_styles["styles"], but this only works when stylesheets are TS-compiled and have a styles export, not when they are raw text (ViewEncapsulation.None case).

Do you think we should open this to the Angular Team?

[unsafecode]

@BlackSonic Particularly, this problem can be identified in the compiler source code:

https://github.com/angular/angular/blob/master/modules/%40angular/compiler/src/style_compiler.ts#L60

When in a component context, a variable named styles is used to get the exported value. However, that variable only exists when a shim is used, but only happens when ViewEncapsulation is Emulated.

Opening a issue :)

Cross ref: angular/angular#12775