Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
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

Description

@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.

Activity

tanwarsatya

tanwarsatya commented on Sep 24, 2016

@tanwarsatya

I agree this issue exist for ngprime too..

SteveSandersonMS

SteveSandersonMS commented on Sep 26, 2016

@SteveSandersonMS
Member

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

tanwarsatya commented on Sep 26, 2016

@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

SteveSandersonMS commented on Sep 27, 2016

@SteveSandersonMS
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

tanwarsatya commented on Sep 28, 2016

@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

SteveSandersonMS commented on Sep 28, 2016

@SteveSandersonMS
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 join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @SteveSandersonMS@tanwarsatya@nklt

        Issue actions

          Angular2SPA, Importing CSS from node_modules with @ on the name · Issue #332 · aspnet/JavaScriptServices