Develop Reference

Jest config ignored since upgrading to 27

I'm trying to migrate an NX monorepo from Angular 12 to Angular 13. As part of this migration, Jest is also updated to version 27.2.3. the project is also using a custom editor build of CKEditor5.
When CKEditor was first integrated (back when the project was using Angular 9 I believe) we had a lot of issues getting it to work with Jest and whenever the unit tests were ran, any component that included CKEditor was giving the error message:
SyntaxError: Cannot use import statement outside a module
We managed to fix the issue by adding the following configuration to the global jest.preset.js file in the root of the project:
transform: {
'node_modules[\\\\/]#ckeditor.+.(js)$': 'babel-jest',
'^.+.(ts|html)$': 'ts-jest',
},
transformIgnorePatterns: ['/node_modules/(?!#ckeditor|lodash).+.(js|jsx|ts|tsx|svg)$'],
However, now that we are migrating from Angular 12 to 13, the above error message has returned and it seems the above config is now ignored.
As part of the migration, NX has automatically created new project.json files in all of the libs in the monorepo. This file contains some Jest configuration so I have tried moving the config above from the jest.preset.js file to the individual project.json files in any lib using CKEditor, but this has not fixed the issue. The new project.json files also read some Jest config from a project-specific jest.config.js so I have tried adding the config there as well, and that has also not fixed the issue.
I have also tried updating the testEnviroment config in package.json from "node" to "jsdom" and this has not helped either. I also tried moving the whole transform/transformIgnorePatterns config to Jest section of package.json and that also did not help.
I assume my previously working config just need to move to a different file, it is just not clear which file it needs to move to.
My environment is as follows:
Windows 10
Node 16.13.2
NPM 8.1.2
NX 13.4.5
Jest 27.2.3
Angular 13.1.2

This was fixed by adding the following config to the Jest preset file, and removing same config from individual apps/libs configs:
transform: {
'node_modules[\\\\/]#ckeditor.+\\.(js)$': 'babel-jest',
'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
},
transformIgnorePatterns: ['node_modules/(?!.*.mjs$|#ckeditor)'],
Problem was related to having multiple strinfs inside transformIgnorePatterns - it supports only one item despite being an array

How do I properly load the lit-html module in Electron

I'm trying to use lit-html to save my self some time, but I'm having trouble getting everything set up correctly.
Electron 4.1.1
Node 11.15
As of 5 minutes before posting this, I've run npm install and electron-rebuild, no luck.
I use require() as one would with any other NPM package
var render = require('lit-html').render
var html = require('lit-html').html
console.log(require("lit-html"))
Unfortunately, I'm greeted with this error
In reference to the three lines of code above.
I don't see any problems with my code.
I've tried reinstalling lit-html through NPM to no avail. I would really love to use this library, but first I have to get over this hurdle. If I'm being honest, I don't know if this error is reproducible, but nothing I do seems to fix it. The problem seems to lie with node and the way that imports are handled.
Am I missing something here? Is this a common issue? If so, what can I do to fix it?

You need to transpile lit-html before you can require it
I tested require('lit-html') and I was greeted with this error:
/home/chbphone55/Workspace/test/node_modules/lit-html/lit-html.js:31
import { defaultTemplateProcessor } from './lib/default-template-processor.js';
It clearly states that the error is coming from lit-html/lit-html.js:31 where the line uses ES Module import syntax.
You can transpile it using tools like Babel or similar ones. However, you may want to try using ES Module syntax so you can import lit-html without transpiling it.
Example:
<!-- HTML File -->
<script type="module" src="index.js"></script>
// index.js
import { html } from 'lit-html';
What if you can't use type="module"
If you are unable to use the type="module" method above, you can also use the ESM package.
ESM is a brilliantly simple, babel-less, bundle-less ECMAScript module loader.
Here are a few examples of how to use it:
Using the node require flag (-r) to load esm before everything else
node -r esm index.js
Loading esm in your main file then loading the rest of your code.
// Set options as a parameter, environment variable, or rc file.
require = require('esm')(module/*, options*/)
module.exports = require('./main.js')

ag-grid rendering in Next.js pages

Newbie here...need help. I tried using the sample code for ag-grid on a ReactJS component on NextJS. I am getting a loading css error (please see further below).
(Before this, I was able to make the code run using 'create-react-app' "https://www.ag-grid.com/react-getting-started/")
Here's the error message:
appropriate loader needed
I have searched and tried out related (searched-out) answers like adding this on webpack.config.js:
webpack config
and also tried adding this on package.json:
package json
I may be missing out on how to correctly load css on the Next JS setup.
Here's the code..taken mostly from the sample code

In Next.js you configure webpack inside a next.config.js file. There should be no webpack.config.js (at least to my knowledge).
There's a plugin called next-css which you install with: npm install --save #zeit/next-css.
Then, in your next.config.js file, write:
const withCSS = require('#zeit/next-css')
module.exports = withCSS()
The ag-grid example worked for me after doing that.

Issue adding third-party (external ) js lib in angular5

I am working on to add jsplumb community js library version with the angular 5 application (Angular CLI: 1.6.1).
With the first build without any configuration to tsconfig.json I get the following error.
ERROR in src/app/jsplumb/jsplumb.component.ts(4,25): error TS6143: Module '../../../node_modules/jsplumb/dist/js/jsplumb.js' was resolved to 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js', but '--allowJs' is not set.
With "allowJs":true in the tsconfig.json get the following error
ERROR in error TS5055: Cannot write file 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js' because it would overwrite input file.
Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig.
As per tsconfig FAQ
Why am I getting the error TS5055: Cannot write file 'xxx.js' because it would overwrite input file.
with an outDir ("outDir": "./dist/out-tsc") this issue should be resolved. This is already set in my tsconfig.
If we add noEmit to true it simply builds the application, not including any js we get a blank white screen.
Let me know if anyone has tried to include external js with new angular cli and face the same kind of error and what is the solution for the same.
Without any additional option added to tsconfig.json if I try to modify any ts file the application will compile with success and I am able to work. But this does not help while running ng build, to create a deployable binary.
Update Workaround: until the fix in CLI is available. For development (ng serve) remove allowJs from tsconfig.json, when ever you get an error with adding allowJs simply modify a ts file to recompile the applicaiton, this time will compile with success. For production or distribution add back the allowJs to tsconfig.json run the application run with ng build --prod --watch=auto you should see the error about overriding the JS file in node_module, simple modify a ts file it should rebuild as --watch=auto is there in command but this time with sucess.

If you're trying to import a library to Angular 2+, you should do it inside angular-cli.json.
There you have a scripts key where you should configure the desired imports. They are generally like:
{
...
"scripts": [
"../node_modules/MODULE/file.js"
],
...
}
Also you can import the library (not recommended) inside your main index.html, using <script src="/path_relative_to_root/file.js">
https://github.com/angular/angular-cli/wiki/angular-cli
https://github.com/angular/angular-cli/wiki/stories-global-scripts
Angular Cli Webpack, How to add or bundle external js files?

have you tried upgrading it to angular 6? maybe they fixed this in the new version.
ng update #angular/cli

Uncaught SyntaxError in jquery.d.ts file

I'm trying to transition my jQuery project into a Typescript project. However, when I include the jQuery typings from the DefinitelyTyped Github using this method:
///<reference path="../../typings/jquery.d.ts"/>
I get "Uncaught SyntaxError: Unexpected identifier" on line 27 of jquery.d.ts, shown below
declare module 'jquery' {
export = jQuery;
}
I've done a bunch of searching about this problem, but I can't seem to find any solutions to this problem. What am I doing wrong?
(I am using WebStorm as my IDE)
EDIT:
Ok, I followed some instructions below and installed the jQuery typings via the npm terminal. However, when I remove the ///reference import, I now get an error in Webstorm: TS2304 cannot find name '$'. However, the code compiles to js and can run in the browser fine. It's just annoying to have those errors in my console in Webstorm. Is there something I need to add to get Webstorm to recognize jQuery?

most recommended practice nowaday is instead of ///reference import, install separate type packages: https://www.npmjs.com/package/#types/jquery as devdependency. (and ensure you're using latest ts compiler supports this)