I integrating the unit test karma & jasmine to Angular project that is a hybird project, then get the below errors:
ERROR [karma-server]: Error during file loading or preprocessing
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'optimization'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
optimization: ...
}
})
]
below is all related configs
//karma.conf.js:
module.exports = function(config) {
config.set({
basePath: "",
frameworks: ["jasmine"],
files: [
{ pattern: "./src//test/main.js", watched: false }
],
exclude: [],
preprocessors: {
"./src//test/main.js": ["webpack"]
},
webpack: require("./config/webpack.test"),
reporters: ["progress"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ["Chrome"],
singleRun: true,
concurrency: Infinity
});
};
Can anyone let me know about where I am set wrong config? Thanks in advance
CodePudding user response:
webpack.test.js:
const helpers = require('./helpers');
module.exports = () => {
return {
entry: {
main: "../src/main.ts"
},
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: "[name].bundle.js"
},
resolve: {
extensions: [".js", ".ts", ".html"]
},
module: {
rules: [
{
test: /\.ts$/,
loaders: ["awesome-typescript-loader", "angular2-template-loader"]
},
{
test: /\.html$/,
loader: "raw"
}
]
},
devtool: "inline-source-map"
};
};
CodePudding user response:
package.js
"devDependencies": {
"@angular/cli": "1.7.3",
"@angular/compiler-cli": "^12.2.6",
"@angular/language-service": "^12.2.6",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"@ng-select/ng-select": "^7.3.0",
"@types/jasmine": "~4.0.3",
"@types/node": "~6.0.60",
"angular-translate": "^2.18.1",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.4.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"clean-webpack-plugin": "~0.1.19",
"codelyzer": "^4.0.1",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "~5.2",
"css-loader": "^0.28.9",
"file-loader": "^1.1.6",
"file-replace-loader": "^1.4.0",
"file-saver": "^2.0.5",
"html-webpack-plugin": "^2.30.1",
"jasmine-core": "^4.2.0",
"karma": "^6.4.0",
"karma-webpack": "^5.0.0",
"karma-sourcemap-loader": "~0.3.8",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage": "^2.2.0",
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"ng-annotate-loader": "^0.6.1",
"ng-annotate-patched": "^1.7.0",
"ngx-image-cropper": "^5.0.1",
"ngx-infinite-scroll": "^10.0.1",
"protractor": "~5.1.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"to-string-loader": "^1.1.5",
"ts-helpers": "^1.1.2",
"ts-loader": "^6.0.4",
"ts-node": "^8.3.0",
"tslint": "~6.1.0",
"typescript": "^2.9.2",
"url-loader": "^0.6.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "2.13.1",
"webpack-dev-server": "^2.11.5",
"webpack-merge": "^4.1.1"
}