Angular2SPA, Importing CSS from node_modules with @ on the name #332
Description
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.
Activity
tanwarsatya commentedon Sep 24, 2016
I agree this issue exist for ngprime too..
SteveSandersonMS commentedon Sep 26, 2016
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 therequire
caused Node to try to parse it as JavaScript instead of CSS. I think this is happening becauseaspnet-webpack
adds anodeExternals
entry to your config that causes all files undernode_modules
to be excluded from the bundle, which means that for server-side prerendering, any CSS file in anode_module
would get loaded at runtime instead of being bundled correctly.This issue with
aspnet-webpack
is a bug that I will fix.tanwarsatya commentedon Sep 26, 2016
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 commentedon Sep 27, 2016
The
aspnet-webpack
NPM module has now been updated to include a fix for this. If you upgrade your copy (runnpm install aspnet-webpack
in your project directory), the problem should go away.Note that since you're now loading
.css
files undernode_modules/
via Webpack, you'll need to ensure that your Webpack configuration for.css
files is allowed to match all files, not only those underClientApp/
. You have probably figured that out already (judging by your issue report), but just for anyone else's benefit, you need to remove theinclude
restriction like I did in this commit: f79936ctanwarsatya commentedon Sep 28, 2016
@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 commentedon Sep 28, 2016
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 yourwebpack.config.vendor.js
. Here's a trivial example: 135e264Notice 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 thosetest
regexes end with(\?|$)
and not just$
).