Unable to render primeNG css since upgrade webpack has upgraded and Angular 4

Question

I am not able to render the css for primeNG. My css in my project overrides it or maybe it is not even being called.

I tried to import the styles in index.html, import them in the component and in stylesUrl []. All did not work, and I now know the issue is in my webpack.config.js file. I have installed:

npm install file-loader --save

and followed these steps from this post post: how to render static css from node modules

However was unsuccessful for me.

webpack.config.js

var merge = require('merge-deep');
var path = require('path');

var common =  {
  devtool: 'source-map',

  cache: false,
  entry: {

  },
  output: {
    path: root('dist'),
    filename: '[name].js',
  },

  resolve: {
    // ensure loader extensions match
    extensions: ['','.ts','.js','.json']
  },

  module: {
    loaders: [
      // Support for .ts files.
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: [  /\.(node|worker)\.ts$/, /node_modules/ ]
      }
    ],
  }

};



module.exports = [
  merge(common, {
    target: 'web',
    entry: {
      'browser': root('./index.js')
    },
    output: {
    },
    resolve: {
      packageAlias: 'web',
    },
    node: {
      crypto: false,
      console: false,
      process: false,
      global: false,
      buffer: false
    }
  }),
  merge(common, {
    target: 'node',
    entry: {
      'node': root('./index.node.js'),
    },
    output: {
      libraryTarget: 'commonjs'
    },
    resolve: {
      packageAlias: 'server',
    }
  })
]

function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

PrimeNG != PrimeFaces although it is on that 'site'... Please remember to not include the PrimeFaces tag when using PrimeNG — Kukeltje, Apr 24 '17 at 14:46
@Kukeltje thanks for the clarification. Have you ran into this issue before (my question)? — Mike3355, Apr 25 '17 at 13:45

score 0 · Answer 1 · answered May 18 '17 at 19:37

I had the same issue with it on Angular 2.4 (getting ready to migrate to Angular4 soon). Here is the module under my sharedConfig in my webpack.js

module: {
        exprContextCritical: false,
        rules: [
            { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
            { test: /\.html$/, use: 'html-loader?minimize=false' },
            //{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } },
            { test: /\.(png|gif|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            },
            { //this rule will only be used for any vendors
                test: /\.(css|woff|ttf|eot|svg)$/,
                loaders: ['style-loader', 'css-loader'],
                include: [/node_modules/]
            },
            {
                test: /\.css$/,
                loaders: ['to-string-loader', 'css-loader']
                //,exclude: [/node_modules/] //add this line so we ignore css coming from node_modules
            }
        ]
    },

I also added the following to the vendor under the webpack.config.vendor.js

'bootstrap/dist/css/bootstrap.css',
'font-awesome/css/font-awesome.css',
'primeng/primeng',
'primeng/resources/themes/omega/theme.css',
'primeng/resources/primeng.min.css'

Thank you for the response. When you move to 4 I would use CLI, it was much simpler for me. — Mike3355, May 18 '17 at 19:44

score 0 · Accepted Answer · answered May 18 '17 at 19:43

I ended up moving to Angular-CLI, putting the css files I needed in the .angular-cli.json file and it worked.

"styles": [
      "../node_modules/primeng/resources/themes/omega/theme.css",
      "../node_modules/primeng/resources/primeng.css",
      "styles.css"
    ],

Unable to render primeNG css since upgrade webpack has upgraded and Angular 4

2 Answers2