Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Angular2SPA, Importing CSS from node_modules with @ on the name #332

Closed
nklt opened this issue Sep 23, 2016 · 6 comments
Closed

Angular2SPA, Importing CSS from node_modules with @ on the name #332

nklt opened this issue Sep 23, 2016 · 6 comments

Comments

@nklt
Copy link

nklt commented Sep 23, 2016

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
Copy link

I agree this issue exist for ngprime too..

@SteveSandersonMS
Copy link
Member

SteveSandersonMS commented 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 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
Copy link

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
Copy link
Member

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
Copy link

@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
Copy link
Member

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 $).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants