I had to migrate to the newest angular version. After that, karma tests stopped working and just keep crushing with an error log:
14 04 2018 14:17:00.453:ERROR [preprocess]: Can not load "#angular-devkit/build-angular", it is not registered!
Perhaps you are missing some plugin?
...\parkandrest-ui\node_modules\#angular-devkit\build-angular\src\angular-cli-files\plugins\packages\angular_devkit\build_angular\src\angular-cli-files\plugins\karma.ts:52
const options = config.buildWebpack.options;
^ TypeError: Cannot read property 'options' of undefined
at init (...\parkandrest-ui\node_modules\#angular-devkit\build-angular\src\angular-cli-files\plugins\packages\angular_devkit\build_angular\src\angular-cli-files\plugins\karma.ts:52:39)
at Array.invoke (...\parkandrest-ui\node_modules\di\lib\injector.js:75:15)
at Injector.get (...\parkandrest-ui\node_modules\di\lib\injector.js:48:43)
at E:\Workspace\Training\spring-boot-tutorial\parkandrest-ui\node_modules\karma\lib\server.js:166:20
at Array.forEach ()
at Server._start (...\parkandrest-ui\node_modules\karma\lib\server.js:165:21)
at Injector.invoke (...\parkandrest-ui\node_modules\di\lib\injector.js:75:15)
at Server.start (...\parkandrest-ui\node_modules\karma\lib\server.js:126:18)
at Object.
My karma.conf.js file looks like this:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular-devkit/build-angular/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['#angular-devkit/build-angular']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
config: './angular.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
#angular-devkit\build-angular is of course installed. I appreciate any help.
EDIT:
I have a solution which actually combines most of the user answers to my question with my own. Firstly I updated my whole project to stable angular 6 release. Next, I generated empty project like #R.Richards suggested and then I replaced almost every configuration in my old project with the new one. Finally, I have encountered a problem #Suvendu warn me about. I used his solution to resolve it. Unfortunately, I still have one problem with my environment (Intellij IDEA 2017.3.4 Ultimate) which disallows me to start karma tests directly from my IDE ( I've got the same error #Suvendu mentions about), however, it is a topic for the next question.
My solution was a little different, as I had to move the karma.conf.js.
Update all dependencies and make sure the app itself works as intented
If not done already: Replacing every occurrence of #angular/cli with #angular-devkit/build-angular in the karma.conf.js
Removing the files and the preprocessor configs from the karma.conf.js completely. This is all defined in the angular.json and should be handled automatically by the #anguler-devkit karma plugin.
Could not find module "#angular-devkit/build-angular"
here is what worked for my project:
npm install -g #angular/cli
npm install #angular/cli
ng update #angular/cli --migrate-only --from=1.7.0
ng update #angular/core
npm install rxjs-compat
ng serve
I hope this works for you!
I followed this guide to do a clean migration of the project, which solved the same issue for me.
Try installing karma-webpack with npm and then add it to the plugins array -
plugins: [
...
require('karma-webpack'),
...
],
and replace the preprocessors with this -
preprocessors: {
'./src/test.ts': ['webpack']
},
This worked in my case and will also work for the below anticipated future error-
Error: The '#angular-devkit/build-angular/plugins/karma' karma plugin is meant to be used from within Angular CLI and will not work correctly outside of it.
Hope this helps.
The solution for me was that my NODE_ENV environmental variable was set to "production". While trying to upgrade to Angular 6 I did not realize that #angular-devkit/build-angular was listed in my devDependencies, which are not installed in a production environment.
Running "unset NODE_ENV" and removing NODE_ENV from /etc/environment fixed my problem. (Note: Be careful changing this variable in an actual production environment).
In your karma.conf.js add following library, in plugins section. This is done in Angular8.
require('#angular-devkit/build-angular/plugins/karma')
Related
When using Sublime text 3 I had SublimeLinter with SublimeLinter-eslint packages, along with eslint & babel-eslint global node modules for JS & JSX syntax.
With the switch to Sublime 4 I decided to give LSP a try. I Installed it, also LSP-css (which ran fine out of the box) & LSP-eslint, which couldn't get to work.
If I check Sublime's status bar I see the language server apparently running (?)
This is within a project with it's own eslintrc.js config file, which works out of the box in VScode. Part of it below:
const RulesAirBnb = require("eslint-config-airbnb-base/rules/best-practices");
const RulesCRA = require("eslint-config-react-app");
module.exports = {
root: true,
parser: "babel-eslint",
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
ecmaFeatures: {
jsx: true,
generators: true,
},
},
extends: [
"airbnb", // Baseguide is AirBnB"s
"prettier",
"prettier/react",
],
Checked the following SO question but no luck.
How to make it work?
Do I still need global node modules of eslint & babel-eslint? (considering I have both locally under dev dependencies in the package.json of the project - sounds to me I shouldn't)
Installing LSP-typescript did the trick, works out of the box, lsp-eslint not even needed. Unreal.
Found the info here after days of research (thanks chrsap!).
If you are running ST3, check LSP-typescript's readme for needed packages.
First of all
Please forgive me for not good English, I am using google translation.
Recently just got to work, I want to turn the code in the company into localhost, which is more convenient to develop.
I don't know what happened.
I tried removing node_modules and reinstalling.I also tried npm rebuild node-sass, I still don't know where there is a problem.
Failed to compile with 19 errors:
These relative modules were not found:
* ../../../../../../../../../assets/img/icon/clock.svg in
./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-
loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??
ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-
3!./node_modules/vue-loader/lib??vue-loader-
options!./pages/_catName/vendorList/_location_id/index.vue?
vue&type=style&index=0&id=2e9c7704&lang=scss&scoped=true&
...
...
And so on
Error message
my package.josn(1)
my package.josn(2)
my package.josn(3)
The problem is not clear but I guess you need to install css-loader first before using style-loader. Try :
npm install --save-dev style-loader
after that use style-loader and css-loader together in your config.js file. For example:
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
When running my tests with jest, I had the above error;
Error: Uncaught [TypeError: array.map(...).flat is not a function]
Following the solution from that issue, https://github.com/kulshekhar/ts-jest/issues/828
I've installed core-js on dependencies and putting this in jest.config.js
setupFiles: ['core-js'],
I'd receive that another error;
Error: Uncaught [Error: Not supported]
And this is occurring only with jest, I'm using babel and webpack on my application and storybook without errors on flat.
My jest.config.js
const PATH = require('./path')
module.exports = {
setupFilesAfterEnv: ['./rtl.setup.js'],
moduleFileExtensions: ['js'],
verbose: true,
moduleNameMapper: {
'#components(.*)$': `${PATH.source}/components/$1`
},
transform: {
'^.+\\.js$': 'babel-jest'
}
}
per https://github.com/kulshekhar/ts-jest/issues/828#issuecomment-433976880
this problem can be solved by running
npm install --save-dev core-js
and adding core-js to your jest config's setupFiles
"setupFiles": ["core-js"]
I installed core-js (#3.4.1) and it worked for me.
Also had to add import 'core-js'; at the top of my test file's imports.
Edit: Using it in a create-react-app project that is not ejected, so I don't access webpack files and I don't have a custom config for jest (nor jest-ts).
This error happens if your node version is old. Try to update it to the latest version.
Searching more about core-js, since it's substituting #babel/polyfill, that config has worked to me.
[
"#babel/preset-env",
{
"targets": {
"node": 4
},
"useBuiltIns": "usage",
"corejs": 3
}
]
And core-js#3 being installed as a dependency.
Is it possible to run Grunt Karma locally?
Start the Karma server, assign a port to it and then open different browsers on my computer and run tests by inserting the localhost:port?
I have a Github project running Travis and have strange results in some Browsers. I can run the tests locally but only with "virtual" PhantomJS. Would be nice to check my Specs in a real browser.
I regularly use karma-chrome-launcher and know that there is also karma-firefox-launcher as well.
In your karma.conf.js file, or in your Gruntfile.js options area you can define:
browsers: ['Phantomjs', 'Chrome'],
and then in the plugins section include:
plugins: [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-phantomjs-launcher'
]
https://github.com/karma-runner has a list of launcher plugins and other useful plugins. There is even a karma-browserstack-launcher, though that wouldn't be local.
Documentation on what you can configure either total in the Gruntfile.js or by referencing a karma.conf.js in your Gruntfile.js can be found:
https://github.com/karma-runner/grunt-karma
http://karma-runner.github.io/0.10/config/configuration-file.html
I like the functionality of using a karma.conf.js file to separate out the majority of my karma config, so in my Gruntfile.js I do the following:
karma: {
options: {
configFile: 'karma.conf.js'
},
unit: {
autoWatch: true,
singleRun: true
},
watch: { // still needs watch integration and testing
browsers: ['PhantomJS'],
background: true
}
},
Then in my karma.conf.js file I follow the base structure shown https://github.com/karma-runner/karma/blob/master/test/client/karma.conf.js
I'm using grunt-vows (https://github.com/CMTegner/grunt-vows) in the following gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.loadNpmTasks("grunt-vows");
grunt.initConfig({
vows: {
all: {
options: {
reporter: "spec",
verbose: true,
silent: false,
colors: true,
isolate: false,
coverage: "json"
},
src: ["test/*.js"]
}
}
});
// Default task.
grunt.registerTask('default', 'vows');
};
and getting the following error when I run grunt:
TypeError: Object #<Object> has no method 'options'
at Object.<anonymous> (/home/dan/playlist/node_modules/grunt-vows/tasks/vows.js:32:33)
at Object.<anonymous> (/usr/lib/node_modules/grunt/lib/grunt/task.js:109:15)
at Object.thisTask.fn (/usr/lib/node_modules/grunt/lib/grunt/task.js:58:16)
I'm confident that I've made a simple mistake somewhere, does anything look out of place in the gruntfile?
Thanks in advance,
Dan
this are some compatibilty issues with your local installed grunt and this module!
if you have grunt 0.3.x installed (what i think is your problem) you could use an older version of this plugin (should be grunt-vows#0.3.1 or older).
probably the best thing you can do is upgrade your local installed grunt to 0.4.0 (see the migration guide here: http://gruntjs.com/upgrading-from-0.3-to-0.4), because you will run into this issue a lot if you want to include new grunt-plugins.
of course this will add some additional work in already existing gruntfiles