Sunday, 30 April 2017

webpack-dev-server throws an error when webpack.config.js returns a function?

I've installed a new angular-cli project and modified (after ng eject) the webpack.config.js file to :

const path = require('path');
var webpack = require('webpack');
const AotPlugin = require('@ngtools/webpack').AotPlugin;

module.exports   =
{
    entry    :  {
      "main": ["./src/main.ts"],  
      "polyfills": ["./src/polyfills.ts"] 

    },
    output: {
      path: path.join(process.cwd(), "src/dist"),
      filename: '[name].bundle.js',
      "publicPath": "src2"

    },
    devServer: {
     contentBase: __dirname + "/src/",
     inline: true,
     host: '127.0.0.1',
     port: 4200,
     },
    resolve: {
      extensions: ['.ts', '.js', '.html']
    },
    module: {
      exprContextCritical: false,
      rules: [
        {test: /\.html$/, loader: 'raw-loader'},
        {test: /\.css$/, loader: 'raw-loader'},
        { test: /\.ts$/,
      exclude: /node_modules/,
      loaders: ['awesome-typescript-loader', 'angular2-template-loader']
    }

      ]
    }
     , devtool: 'source-map'
  };

Everything is ok and compiles and run when I invoke :

npm start ->

//package.json
...
"start": "webpack-dev-server --port=4200   --progress --colors "
...

Full image

However , in my other project (where I don't use webpack-dev-server) , I have a conditional configuration for webpack.config.js :

So now it returns a function :

module.exports = (envOptions)=>
{
  envOptions = envOptions || {};
  const config = {
    entry: {
    ...
    },

  };

  if (envOptions.MODE === 'prod') {

    config.module.rules.push(
      { test: /\.ts$/, loaders: ['@ngtools/webpack'] }
    );

    config.plugins = [
      new AotPlugin({
     ...
      }),
    ];
  } else { config.module.rules.push(
    { test: /\.ts$/,
      exclude: /node_modules/,
      loaders: ['awesome-typescript-loader', 'angular2-template-loader']
    }
  );
  }
  return config;
};

But now - when I run npm start I get an error : (this is the webpack.config.js file which causes trouble )

Error as image

ERROR in [at-loader] ./src/app/app-routing.module.ts:4:55 TS2339: Property 'decorate' does not exist on type 'typeof Reflect'.

ERROR in [at-loader] ./src/app/app-routing.module.ts:4:92 TS2339: Property 'decorate' does not exist on type 'typeof Reflect'.

ERROR in [at-loader] ./src/app/app.component.ts:4:55 TS2339: Property 'decorate' does not exist on type 'typeof Reflect'.

ERROR in [at-loader] ./src/app/app.component.ts:4:92 TS2339: Property 'decorate' does not exist on type 'typeof Reflect'.

ERROR in [at-loader] ./src/app/app.component.ts:9:55 TS2339: Property 'metadata' does not exist on type 'typeof Reflect'.

ERROR in [at-loader] ./src/app/app.component.ts:9:95 TS2339: Property 'metadata' does not exist on type 'typeof Reflect'.

ERROR in [at-loader] ./src/app/app.module.ts:4:55 TS2339: Property 'decorate' does not exist on type 'typeof Reflect'.

ERROR in [at-loader] ./src/app/app.module.ts:4:92 TS2339: Property 'decorate' does not exist on type 'typeof Reflect'.

Question

How can I mage npm start to work with the conditional configuration ?

Related sources :

package.json
ts.config
webpack.config.js
global packages installed



via Royi

No comments:

Post a Comment