I have created an Angular project based on the built-in Angular template present in the Visual 2017 .net Core.
I have no problems buinding runninng it locally in IIS.
However when trying to publish the project to the local IIS (or externally using TFS build definition) I get the following errors:
PublishRunWebpack:
npm install
npm WARN @angular/compiler-cli@6.1.4 requires a peer of typescript@>=2.7.2 <2.10 but none is installed. You must install peer dependencies yourself.
npm WARN @ngtools/webpack@6.1.4 requires a peer of typescript@~2.4.0 || ~2.5.0 || ~2.6.0 || ~2.7.0 || ~2.8.0 || ~2.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN aspnet-webpack@3.0.0 requires a peer of webpack-dev-middleware@^1.8.4 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN awesome-typescript-loader@5.2.0 requires a peer of typescript@^2.7 but none is installed. You must install peer dependencies yourself.
npm WARN tsickle@0.32.1 requires a peer of typescript@>=2.4.2 <2.10 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
audited 11354 packages in 9.846s
found 0 vulnerabilities
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod
D:\BuildAgent1\_work\67\s\AngTempProj\node_modules\webpack-cli\bin\cli.js:244
throw err;
^
EXEC(0,0): Error : webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
EXEC : error : webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. [D:\BuildAgent1\_work\67\s\AngTempProj.csproj]
...then:
AngTempProj.csproj(49,5): Error MSB3073: The command "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" exited with code 1.
D:\BuildAgent1\_work\67\s\AngTempProj.csproj(49,5): error MSB3073: The command "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" exited with code 1.
Done Building Project "D:\BuildAgent1\_work\67\s\AngTempProj.csproj" (default targets) -- FAILED.
Done Building Project "D:\BuildAgent1\_work\67\s\AngTempProj.sln" (default targets) -- FAILED.
Build FAILED.
...and finally:
Process 'msbuild.exe' exited with code '1'.
To be honest I don't know how to configure the webpack.config.vendor.js which is triggered by the commands embedded in the .proj file:
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec Command="npm install" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
This is what my webpack.config.vendor.js looks like:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
'@angular/animations',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
"@angular/material",
'zone.js',
];
const nonTreeShakableModules = [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
"@angular/material/prebuilt-themes/deeppurple-amber.css",
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);
module.exports = (env) => {
const extractCSS = new ExtractTextPlugin('vendor.css');
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
resolve: { extensions: [ '.js' ] },
module: {
rules: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
]
},
output: {
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]'
},
plugins: [
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/@angular(\\|\/)core(\\|\/)fesm5/,
path.join(__dirname, './ClientApp')
), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};
const clientBundleConfig = merge(sharedConfig, {
entry: {
// To keep development builds fast, include all vendor dependencies in the vendor bundle.
// But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
output: { path: path.join(__dirname, 'wwwroot', 'dist') },
module: {
rules: [
{ test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
]
},
plugins: [
extractCSS,
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin()
])
});
const serverBundleConfig = merge(sharedConfig, {
target: 'node',
resolve: { mainFields: ['main'] },
entry: { vendor: allModules.concat(['aspnet-prerendering']) },
output: {
path: path.join(__dirname, 'ClientApp', 'dist'),
libraryTarget: 'commonjs2',
},
module: {
rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
]
});
return [clientBundleConfig, serverBundleConfig];
}
And yes I realise I should have separate config files for DEV and PRD. I know I'm doing something wrong but I'm new to Angular etc
Any help appreciated.
