Why does using multiple CSS files in styleUrls give me errors when using in the single home.component.html? RSS

5 replies

Last post Mar 11, 2018 12:46 PM by mehmoodahmed...

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

mehmoodahmed...

Member

149 Points

237 Posts

Why does using multiple CSS files in styleUrls give me errors when using in the single home.compo...

Feb 21, 2018 04:22 AM|mehmoodahmed...|LINK

favorite

I am trying to use multiple CSS files in home.componenet.ts but I am getting errors every time. Please assist me to fix this issue.

i tried to use two approaches but with both approaches , i am getting errors.

In first approach, I am using multiple CSS files in styleUrls and in second approach, i am using multiple CSS files in app.component.css by importing multiple CSS files. In first approach, CSS plugin folder is under ClientApp-> app -> assets and in second approach, CSS plugin folder is under wwwroot -> dist -> assets

First approach :

following is my code

   import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    styleUrls: ['~/app/assets/css/style.css','~/app/assets/css/colors/green.css']
})
export class HomeComponent {
    public name = 'gfggfg';
}


-- package.json

    {
  "name": "iSol",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "4.2.5",
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@angular/platform-server": "4.2.5",
    "@angular/router": "4.2.5",
    "@ngtools/webpack": "1.5.0",
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "@types/webpack-env": "1.13.0",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "chai": "4.0.2",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.6.4",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
  }
}

--- webpack.config.js

    const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('@ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
            //,

            //loaders: [
            //    {
            //        test: /\.css$/,
            //        include: [
            //            path.resolve(__dirname, "not_exist_path")
            //        ],
            //        loader: "style!css"
            //    }
            //    ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot.browser.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
                exclude: ['./**/*.server.ts']
            })
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: { mainFields: ['main'] },
        entry: { 'main-server': './ClientApp/boot.server.ts' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
                exclude: ['./**/*.browser.ts']
            })
        ]),
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

Second approach,

-- app.component.css

@import url('~/dist/assets/css/style.css');
@import url('~/dist/assets/css/colors/green.css');
@import url('~/dist/assets/css/owl.carousel.css');
@import url('~/dist/assets/css/owl.transitions.css');
@import url('~/dist/assets/css/animate.min.css');
@import url('~/dist/assets/css/font-awesome.min.css');

Error Description:

An unhandled exception occurred while processing the request. NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "./~/app/assets/css/style.css" at webpackMissingModule (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16287:86) at L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16287:191 at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16291:2) at webpack_require (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16133:90) at webpack_require (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at Object.hasOwn (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:14202:77) at webpack_require (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16348:81) at webpack_require (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) Current directory is: L:\SaleStore\iSaleStore\iSaleStore Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+d__7.MoveNext()

When i am removing ~/ then application is throwing following errors. please see

An unhandled exception occurred while processing the request. NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "-!../../../../node_modules/css-loader/index.js!./dist/assets/css/style.css" at webpackMissingModule (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16390:75) at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16390:226) at webpack_require(L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:17967:22) at webpack_require(L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:10401:22 at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:10405:2) at webpack_require(L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) at Object. (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16131:88) at webpack_require(L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30) Current directory is: L:\SaleStore\iSaleStore\iSaleStore

</div> </div>

- Reply
bruce (sqlwo...
All-Star

58204 Points

15661 Posts
Re: Why does using multiple CSS files in styleUrls give me errors when using in the single home.c...

Feb 21, 2018 05:02 PM|bruce (sqlwork.com)|LINK
you are not using valid paths:
```
@import url('~/dist/assets/css/style.css');
```
webpack has no support for "~", its passed to the file system. while it would work on a linux/mac box where a "~" in a file path has meaning (users home directory), it will fail on windows.
bruce (sqlwork.com)
- Reply
mehmoodahmed...
Member

149 Points

237 Posts
Re: Why does using multiple CSS files in styleUrls give me errors when using in the single home.c...

Feb 23, 2018 07:24 PM|mehmoodahmed...|LINK
Thank you Bruce. By using below code :
```
@import url('/dist/assets/css/style.css');
@import url('/dist/assets/css/colors/green.css');
@import url('/dist/assets/css/owl.carousel.css');
@import url('/dist/assets/css/owl.transitions.css');
@import url('/dist/assets/css/animate.min.css');
@import url('/dist/assets/css/font-awesome.min.css');
```
following errors are throwing now:

An unhandled exception occurred while processing the request.
<div class="titleerror" style="padding: 3px 3px 6px; display: block; font-size: 1.5em; font-weight: 100; color: #222222; font-family: 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "-!../../../../node_modules/css-loader/index.js!./dist/assets/css/style.css"
at webpackMissingModule (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16391:75)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16391:226)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:17996:22)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:10407:22
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:10411:2)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16131:88)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
Current directory is: L:\SaleStore\iSaleStore\iSaleStore.</div>

and when I use below code :
```
@import url('dist/assets/css/style.css');
@import url('dist/assets/css/colors/green.css');
@import url('dist/assets/css/owl.carousel.css');
@import url('dist/assets/css/owl.transitions.css');
@import url('dist/assets/css/animate.min.css');
@import url('dist/assets/css/font-awesome.min.css');
```
and following errors are shown:

An unhandled exception occurred while processing the request.
<div class="titleerror" style="padding: 3px 3px 6px; display: block; font-size: 1.5em; font-weight: 100; color: #222222; font-family: 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">NodeInvocationException: Prerendering failed because of error: Error: Cannot find module "../images/ajax.gif"
at webpackMissingModule (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16427:17516)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16427:17611)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:18024:22)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16287:22
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16291:2)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
at Object.<anonymous> (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:16133:90)
at __webpack_require__ (L:\SaleStore\iSaleStore\iSaleStore\ClientApp\dist\main-server.js:20:30)
Current directory is: L:\SaleStore\iSaleStore\iSaleStore</div>
- Reply
Brando ZWZ
Star

9831 Points

3120 Posts

Re: Why does using multiple CSS files in styleUrls give me errors when using in the single home.c...

Mar 01, 2018 06:26 AM|Brando ZWZ|LINK

Hi acupuncture,

Could you please tell me which angular version you have used now?

Normally, if you wants to import another folder css file, you should use"../".

More details about how to include another folder's css file. I suggest you could refer to below article.

https://scotch.io/tutorials/angular-shortcut-to-importing-styles-files-in-components

Best Regards,

Brando

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
- Reply
bruce (sqlwo...
All-Star

58204 Points

15661 Posts
Re: Why does using multiple CSS files in styleUrls give me errors when using in the single home.c...

Mar 02, 2018 01:26 AM|bruce (sqlwork.com)|LINK
I use react, not angular, so I'm not expert, but you seem to confusing how CSS models are supported in webpack. there are two common approaches:

1) imbed the css in the javascript code. with the proper plugin, an include of a css module will include the javascript code to add the CSS markup to the document.

2) use webpack to prebuild css file(s) to be included with a html <link>.

in either case you can add plugins to compile less or sass file to css.

looking at your webpack, you are using an angular plugin that return the CSS as a javascript string. the docs say you use this plugin with the component styles option. you appear to be using angular support for an external css file, but have no step in webpack to build one.

you need to manually create a css file (it probably looks like: app.component.css)
```
dist/assets/css/style.css
```
this file must be excluded from webpack, because you do not want it compiled (typical dist is not included). then delete the app.component.css, because the imports are native css imports.

your other option is to use angulars webpack plugin instead.
bruce (sqlwork.com)

mehmoodahmed...

Member

149 Points

237 Posts

Re: Why does using multiple CSS files in styleUrls give me errors when using in the single home.c...

Mar 11, 2018 12:46 PM|mehmoodahmed...|LINK

Hi,

I think I am using AngularJS 4. I am trying to use above approaches but still unable to fix it.

see my package.json

{
  "name": "iSaleStore",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "4.2.5",
    "@angular/common": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@angular/platform-server": "4.2.5",
    "@angular/router": "4.2.5",
    "@ngtools/webpack": "1.5.0",
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "@types/webpack-env": "1.13.0",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "chai": "4.0.2",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.6.4",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
  }
}

‹ Previous Thread|Next Thread ›