If you are using webpack v5 or above you do not need to install this plugin. Webpack v5 comes with the latest terser-webpack-plugin out of the box.
I am going to use webpack v5, so per doc, I removed terser: npm uninstall terser-webpack-plugin. But I am not sure how to migrate the following settings which were set for webpack v4 + TerserPlugin:
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: true,
terserOptions: {
output: {
comments: /^!/,
},
},
extractComments: false,
}),
],
},
I Could not find the document online. Can anyone help, please?
I'm using the following TerserPlugin config and it works well with webpack v5!
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i, // you should add this property
extractComments: false,
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log', 'console.info'], // Delete console
},
},
}),
],
},
I am running a Windows 7 Professional PC, using Visual Studio 2017 version 15.4.5. When I created a .Net Core 2.0 project and selected the type of Angular, it ran fine out of the box.
Then I added font awesome and primeng (https://www.primefaces.org/primeng/#/) in what I think is the standard way, i.e., adding references to the package.json file, then to the nonTreeShakableModules section of the webpack.config.vendor.js file, then adding modules to app.module.shared.ts. This was primeng version 5.0.2 and font-awesome version 4.7.0.
In development, all is good - everything is running fine. However, when I try to publish, I see the following lines in the Output window:
npm install
removed 3 packages in 3.389s
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod
What? Why would it remove 3 packages?
And then the publish attempt fails. After the failure, I see that 3 of my npm packages have been UNINSTALLED:
1) #types/jquery
2) font-awesome
3) primeng
And I see a bunch of "Module not found" errors - of course they are not found, because they were just removed!
I looked at the .csproj file, and I see the following:
<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" />
So, as far as I can tell, the "npm install" command, or something triggered by that command, is removing these modules. I have to re-install them after every Publish attempt.
So, my question: Why are these packages being removed, and what can I do about it?
My package.json file:
{
"name": "CaseManagementReporting",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"dependencies": {
"#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/webpack-env": "1.13.0",
"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",
"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",
"font-awesome": "4.7.0",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"preboot": "4.5.2",
"primeng": "5.0.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"
},
"devDependencies": {
"#types/chai": "4.0.1",
"#types/jasmine": "2.5.53",
"#types/jquery": "3.2.1",
"chai": "4.0.2",
"jasmine-core": "2.6.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"
}
}
My tsconfig.json file:
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
"strict": true,
"lib": [ "es6", "dom" ],
"types": [ "webpack-env", "jquery" ]
},
"exclude": [ "bin", "node_modules" ],
"atom": { "rewriteTsconfig": false }
}
My webpack.config.vendor.js file:
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',
'zone.js'
];
const nonTreeShakableModules = [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
'font-awesome/css/font-awesome.css',
'primeng/resources/themes/bootstrap/theme.css',
'primeng/resources/primeng.min.css',
'primeng/primeng'
];
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|jpg|jpeg|gif)(\?|$)/, 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(/angular(\\|\/)core(\\|\/)#angular/, 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];
}
My webpack.config.js file:
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$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-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' }
]
},
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.module.browser#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.module.server#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};
I found a solution for this problem (which sadly just led to another, but...).
I believe that this was/is a bug in the version of NPM which I was using. I had npm version 5.0.3 installed. After hours of searching, I came across this GitHub discussion: here in which many people complained about the npm install command actually removing modules. I downgraded my npm instance from 5.0.3 to 3.10.3 (which is what my home environment was using), and I found that the packages were no longer removed. (Why anybody would write something that would remove packages with a command like "npm install" is utterly beyond me, but read the linked article and you will see the frustration this has caused!)
As a .Net developer, of course, I did not even know how to downgrade my npm instance, so I had to look that up. For those who might be helped, the command is: npm install -g npm#3.10.3. I found that here
So, now my publish process runs without deleting packages, which is what I asked about in my question. That issue is resolved, so I am treating this as an answer.
But this is not to say that the downgrade solved all of my problems. When I attempted to publish, I got new errors, which I think are unrelated to the npm version:
Can't resolve './../$$_gendir/ClientApp/app/app.module.browser.ngfactory' in 'C:\Projects\ForthrightProjects\CaseManagementReporting\CaseManagementReporting\ClientApp' CaseManagementReporting Module not found 0
Can't resolve './../$$_gendir/ClientApp/app/app.module.server.ngfactory' in 'C:\Projects\ForthrightProjects\CaseManagementReporting\CaseManagementReporting\ClientApp' CaseManagementReporting Module not found 0
Yet more Googling found this article: here
which suggests commenting out this line in the webpack.config.js file:
// { test: /.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '#ngtools/webpack' },
Or, alternatively, changing it to this:
{ test: /.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
I tried both options, and both of them worked to get past the errors above. HOWEVER, I now am faced with yet another error in attempting to publish:
ERROR in Metadata version mismatch for module: C:/Projects/ForthrightProjects/CaseManagementReporting/CaseManagementReporting/node_modules/primeng/components/dom/domhandler.d.ts, found version 4, expected 3
So, after some additional searching and trials and errors, I came across this link: here
One of the suggestions there was to change the primeng entry in the project.json file to this: "primeng": "^4.2.4"
Amazingly enough, this actually worked. I am now able to publish. Hopefully successful deployment of the published files will not be so terribly painful.
To .Net developers: Remember back when you just added a package with NuGet, and everything just worked? Sigh...
I have a problem with setting up units tests in project. When I run tests with IE everything works fine I can see 4/4 tests executed. With chrome i am getting error Empty test suite. Chrome is launched but it looks like it can;t find tests and tests for chrome are not executed.
Karma.config.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-ie-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: ['progress', 'karma-remap-istanbul'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: true
});
};
test.ts is just searching unittests within app folder:
.then(() => require.context('./', true, /\.spec\.ts/))
I found that the issue was with reporters section, after 2 days of agony I changed file to
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
removed mime section and it works!
I wonder if I am missing something trivial here, but I can not see any test reports if I have set up singlerun to true in karma config. It only shows that the browsers were launched and that is it. I can click on DEBUG and inspect the browser console log that way, but I would feel that one should be also see the results in the terminal too.
Thanks for the help!
My karma.config.js:
basePath: '../',
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
frameworks: ['mocha', 'chai'],
files: [
{ pattern: 'test/vendor/indexeddbshim.min.js', watched: false },
{ pattern: 'tests.webpack.js', watched: false },
],
preprocessors: {
'tests.webpack.js': ['webpack'],
},
webpack: {
resolve: {
root: [
path.resolve('./test/vendor'),
],
alias: {
backbone: 'backbone',
underscore: 'underscore',
},
},
module: {
loaders: [
{
// test: /^\.js$/,
exclude: /(node_modules|bower_components|vendor)/,
loader: 'babel-loader',
},
],
},
},
webpackServer: {
noInfo: true,
},
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
plugins: [
require('karma-webpack'),
require('karma-mocha'),
require('karma-chai'),
require('karma-phantomjs-launcher'),
require('karma-chrome-launcher'),
],
logLevel: config.LOG_INFO, });
From the comment above:
Setting singleRun: false assumes that you are explicitly start the karma-client manually.
This means that you start karma (technically the karma-server), then go to another terminal and type karma run.
Setting singleRun: true in your karma configuration will call karma run for you.
Here's the doc:
Karma configuration - requirejs version
I've started working with React and Redux and I'd like to write tests for it using Karma with Mocha and PhantomJS2. I'm using the sources here as base: https://github.com/reactjs/redux/tree/master/examples/counter . I basically want to run the tests there in Karma using Phantom instead of using node and the "npm test".
I've set up and installed the required packages for karma:
package.json
"scripts": {
"test:karma": "karma start",
},
"karma": "^0.13.21",
"karma-babel-preprocessor": "^6.0.1",
"karma-mocha": "^0.2.2",
"karma-phantomjs2-launcher": "^0.5.0",
"phantomjs2": "^2.2.0",
And I've tried to figure out how to build my karma.config.js but I don't seem to get my tests to run and this is where I need the help.
karma.config.js
module.exports = function(config) {
process.env.PHANTOMJS_BIN = './node_modules/phantomjs2/lib/phantom/bin';
config.set({
basePath: './',
frameworks: ['mocha'],
plugins: [ 'karma-mocha', 'karma-phantomjs2-launcher', 'karma-babel-preprocessor' ],
files: [
"components/Counter.js",
"test/components/Counter.spec.js"
],
preprocessors: {
"components/Counter.js": ["babel"],
"test/components/Counter.spec.js": ["babel"]
},
babelPreprocessor: {
options: {
"presets": ["es2015", "react"],
}
},
reporters: ['progress'],
browsers: ['PhantomJS2'],
port: 9099,
runnerPort: 9100,
urlRoot: '/',
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
singleRun: false,
concurrency: Infinity
})
}
For react-boilerplate, we have that exact setup – take a look at our karma.conf.js and the PR that implemented Karma and let me know if that helps!