Angular2SPA, Importing CSS from node_modules with @ on the name

[nklt]

In the Angular2SPA template, the Angular 2 style statement cannot use @ character on the style path, if it is referencing a css file located inside a node_module with @ character on its name.

Example will be Telerik Kendo UI. One their website, their public npm is @progress.
http://www.telerik.com/kendo-angular-ui/getting-started

@component({
selector: 'counter',
styles: [require('@progress/kendo-angular-buttons/dist/npm/css/main.css')], // load the button theme
template: require('./counter.component.html')
})

when the path is added the TSC generates the following error.

ERROR in ./ClientApp/app/components/app/app.component.css
Module parse failed: C:\workspace9\Angular2Spa\ClientApp\app\components\app\app.component.css Unexpected character '@' (1:0)

When the @ is removed, the TSC only complains the path cannot be found.

[tanwarsatya]

I agree this issue exist for ngprime too..

[SteveSandersonMS]

First, thanks for reporting this.

Second, are you sure the problem is really the @ on the package name? I don't think it is: I suspect the @ it's complaining about is really one inside the .css file (e.g., for a media query). It would complain about this if it was not loading via Webpack, and hence the require caused Node to try to parse it as JavaScript instead of CSS. I think this is happening because aspnet-webpack adds a nodeExternals entry to your config that causes all files under node_modules to be excluded from the bundle, which means that for server-side prerendering, any CSS file in a node_module would get loaded at runtime instead of being bundled correctly.

This issue with aspnet-webpack is a bug that I will fix.

[tanwarsatya]

Correct, in my case the issue is as you explained. It fails when loading the css because it has @ and other special characters. Also i tried to load the node_module css file via linking as stylesheet inside layout but node_modules is not available under the wwwroot and at runtime css files are not loaded

How to resolve this ?? Thax again for looking into this.

[SteveSandersonMS]

The aspnet-webpack NPM module has now been updated to include a fix for this. If you upgrade your copy (run npm install aspnet-webpack in your project directory), the problem should go away.

Note that since you're now loading .css files under node_modules/ via Webpack, you'll need to ensure that your Webpack configuration for .css files is allowed to match all files, not only those under ClientApp/. You have probably figured that out already (judging by your issue report), but just for anyone else's benefit, you need to remove the include restriction like I did in this commit: f79936c

[tanwarsatya]

@SteveSandersonMS now with new aspnet-webpack and changing the loaders in webpack.config i don't see any exception. Still components don;t show proper theme, also i checked vender.css but the primeng css are not added to that.

Are we missing something ? I was under assumption that all css will be compiled into vendor.css

[SteveSandersonMS]

I was under assumption that all css will be compiled into vendor.css

If you want the CSS to be bundled into vendor.css, then you don't need to do any of the stuff above. You just need to reference the desired CSS file from your webpack.config.vendor.js. Here's a trivial example: 135e264

Notice how it's not necessary to reference the styles from your Angular 2 components at all, because they are being loaded globally, not scoped to a particular component. (Having them scoped to particular components would be undesirable if what you're loading is really some large vendor-supplied CSS file, because you'd be duplicating all that CSS for each component it was scoped to, possibly adding hundreds of kilobytes to your page.)

Note that this example is based on latest template source code, so when making the same changes to your webpack.config.vendor.js file, be sure also to copy the changes to the loader config there too so it can match URLs with querystrings (see how those test regexes end with (\?|$) and not just $).