Merge pull request #17183 from IgniteUI/sstoychev/fix-migrations-ng21

damyanpetev · web-flow · commit 024b8e8e41b1 · 2026-04-16T16:32:43.000+03:00
Fix migrations &amp; schematics commonjs type for latest package, adjust module output
diff --git a/gulpfile.js b/gulpfile.js
@@ -62,11 +62,6 @@ module.exports.copyMigrations = (cb) => {
         '!**/tsconfig.json'
     ]).pipe(gulp.dest('./dist/igniteui-angular/migrations'));
 
-
-    gulp.src([
-        './projects/igniteui-angular/migrations/common/import-helper.js'
-    ]).pipe(gulp.dest('./dist/igniteui-angular/migrations/common'));
-
     cb();
 };
 
diff --git a/projects/igniteui-angular/.npmignore b/projects/igniteui-angular/.npmignore
@@ -1,2 +1,4 @@
 # Nested package.json's are only needed for development.
-**/package.json
+**/package.json
+!migrations/package.json
+!schematics/package.json
diff --git a/projects/igniteui-angular/migrations/common/import-helper.js b/projects/igniteui-angular/migrations/common/import-helper.js
diff --git a/projects/igniteui-angular/migrations/common/util.ts b/projects/igniteui-angular/migrations/common/util.ts
@@ -19,7 +19,7 @@ import type {
     Node,
     Text,
     Visitor
-} from '@angular/compiler';
+} from '@angular/compiler' with { "resolution-mode": "import" };
 
 const configPaths = ['/.angular.json', '/angular.json'];
 
diff --git a/projects/igniteui-angular/migrations/package.json b/projects/igniteui-angular/migrations/package.json
@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}
diff --git a/projects/igniteui-angular/migrations/tsconfig.json b/projects/igniteui-angular/migrations/tsconfig.json
@@ -1,7 +1,13 @@
 {
+    "ts-node": {
+        "compilerOptions": {
+            // explicitly force ts-node into CommonJS mode, otherwise spies on modules like `fs` fail as those are not configurable in ESM context
+            "module": "CommonJS"
+        }
+    },
     "compilerOptions": {
         "target": "es6",
-        "module": "commonjs",
+        "module": "node16",
         "sourceMap": false,
         "declaration": true,
         "outDir": "../../../dist/igniteui-angular/migrations",
diff --git a/projects/igniteui-angular/migrations/update-11_0_0/index.ts b/projects/igniteui-angular/migrations/update-11_0_0/index.ts
@@ -1,17 +1,16 @@
-import type { Element } from '@angular/compiler';
+import type { Element } from '@angular/compiler' with { "resolution-mode": "import" };
 import type { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { UpdateChanges } from '../common/UpdateChanges';
 import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile, serializeNodes } from '../common/util';
-// use bare specifier to escape the schematics encapsulation for the dynamic import:
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
 
 const version = '11.0.0';
 
 export default (): Rule => async (host: Tree, context: SchematicContext) => {
     context.logger.info(
         `Applying migration for Ignite UI for Angular to version ${version}`
     );
-    const { HtmlParser, getHtmlTagDefinition } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser, getHtmlTagDefinition } = await import('@angular/compiler');
 
     const update = new UpdateChanges(__dirname, host, context);
 
diff --git a/projects/igniteui-angular/migrations/update-12_0_0/index.ts b/projects/igniteui-angular/migrations/update-12_0_0/index.ts
@@ -1,10 +1,8 @@
-import type { Element } from '@angular/compiler';
+import type { Element } from '@angular/compiler' with { "resolution-mode": "import" };
 import type { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { UpdateChanges } from '../common/UpdateChanges';
 import { FileChange, getAttribute, findElementNodes, getSourceOffset, hasAttribute, parseFile } from '../common/util';
-// use bare specifier to escape the schematics encapsulation for the dynamic import:
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
-import { Options } from '../../schematics/interfaces/options';
+import type { Options } from '../../schematics/interfaces/options';
 
 const version = '12.0.0';
 
@@ -14,7 +12,8 @@ export default (options: Options): Rule =>
             `Applying migration for Ignite UI for Angular to version ${version}`
         );
 
-        const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+        // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+        const { HtmlParser } = await import('@angular/compiler');
 
         // eslint-disable-next-line max-len
         const UPDATE_NOTE = `<!--NOTE: This component has been updated by Infragistics migration: v${version}\nPlease check your template whether all bindings/event handlers are correct.-->\n`;
diff --git a/projects/igniteui-angular/migrations/update-12_1_0/index.ts b/projects/igniteui-angular/migrations/update-12_1_0/index.ts
@@ -1,19 +1,18 @@
-import type { Element } from '@angular/compiler';
+import type { Element } from '@angular/compiler' with { "resolution-mode": "import" };
 import type { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { UpdateChanges } from '../common/UpdateChanges';
 import {
   FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile,
   serializeNodes, makeNgIf, stringifyAttributes
 } from '../common/util';
-// use bare specifier to escape the schematics encapsulation for the dynamic import:
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
 
 const version = '12.1.0';
 
 export default (): Rule => async (host: Tree, context: SchematicContext) => {
   context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
 
-  const { HtmlParser, getHtmlTagDefinition } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+  // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+  const { HtmlParser, getHtmlTagDefinition } = await import('@angular/compiler');
 
   const update = new UpdateChanges(__dirname, host, context);
   const TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid'];
diff --git a/projects/igniteui-angular/migrations/update-13_0_0/index.ts b/projects/igniteui-angular/migrations/update-13_0_0/index.ts
@@ -1,4 +1,4 @@
-import type { Element, Text } from '@angular/compiler';
+import type { Element, Text } from '@angular/compiler' with { "resolution-mode": "import" };
 import type {
     Rule,
     SchematicContext,
@@ -7,8 +7,6 @@ import type {
 import type { Options } from '../../schematics/interfaces/options';
 import { UpdateChanges } from '../common/UpdateChanges';
 import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
-// use bare specifier to escape the schematics encapsulation for the dynamic import:
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
 
 const version = '13.0.0';
 
@@ -27,7 +25,8 @@ export default (options: Options): Rule =>
         '[exportExcel]', 'exportExcel', '[exportExcelText]', 'exportExcelText',
         '[exportCsv]', 'exportCsv', '[exportCsvText]', 'exportCsvText', '[exportText]', 'exportText'];
         const actionsLeft = ['igx-grid-toolbar-advanced-filtering'];
-        const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+        // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+        const { HtmlParser } = await import('@angular/compiler');
 
         const moduleTsFiles = tsFiles.filter(x => x.endsWith('.module.ts'));
         for (const path of moduleTsFiles) {
diff --git a/projects/igniteui-angular/migrations/update-13_1_0/index.ts b/projects/igniteui-angular/migrations/update-13_1_0/index.ts
@@ -3,17 +3,16 @@ import type {
   SchematicContext,
   Tree
 } from '@angular-devkit/schematics';
-import type { Element } from '@angular/compiler';
-// use bare specifier to escape the schematics encapsulation for the dynamic import:
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
+import type { Element } from '@angular/compiler' with { "resolution-mode": "import" };
 import { UpdateChanges } from '../common/UpdateChanges';
 import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
 
 const version = '13.1.0';
 
 export default (): Rule => async (host: Tree, context: SchematicContext) => {
   context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-  const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+  // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+  const { HtmlParser } = await import('@angular/compiler');
 
   const update = new UpdateChanges(__dirname, host, context);
   const GRID_TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid', 'igx-row-island'];
diff --git a/projects/igniteui-angular/migrations/update-15_1_0/index.ts b/projects/igniteui-angular/migrations/update-15_1_0/index.ts
@@ -3,9 +3,7 @@ import type {
     SchematicContext,
     Tree
 } from '@angular-devkit/schematics';
-import type { Element } from '@angular/compiler';
-// use bare specifier to escape the schematics encapsulation for the dynamic import:
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
+import type { Element } from '@angular/compiler' with { "resolution-mode": "import" };
 import type { Options } from '../../schematics/interfaces/options';
 import { BoundPropertyObject, InputPropertyType, UpdateChanges } from '../common/UpdateChanges';
 import { FileChange, findElementNodes, getAttribute, getSourceOffset, parseFile, hasAttribute } from '../common/util';
@@ -15,7 +13,8 @@ const version = '15.1.0';
 export default (options: Options): Rule => async (host: Tree, context: SchematicContext) => {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
 
-    const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser } = await import('@angular/compiler');
     const update = new UpdateChanges(__dirname, host, context);
     const cardsToMigrate = new Set<any>();
     const CARD_ACTIONS = ['igx-card-actions'];
diff --git a/projects/igniteui-angular/migrations/update-16_1_0/index.ts b/projects/igniteui-angular/migrations/update-16_1_0/index.ts
@@ -5,15 +5,14 @@ import type {
 } from '@angular-devkit/schematics';
 import { UpdateChanges } from '../common/UpdateChanges';
 import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
-// use bare specifier to escape the schematics encapsulation for the dynamic import:
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
-import type { Element } from '@angular/compiler';
+import type { Element } from '@angular/compiler' with { "resolution-mode": "import" };
 
 const version = '16.1.0';
 
 export default (): Rule => async (host: Tree, context: SchematicContext) => {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser } = await import('@angular/compiler');
     const update = new UpdateChanges(__dirname, host, context);
     update.applyChanges();
 
diff --git a/projects/igniteui-angular/migrations/update-17_0_0/index.ts b/projects/igniteui-angular/migrations/update-17_0_0/index.ts
@@ -3,19 +3,18 @@ import type {
     SchematicContext,
     Tree
 } from '@angular-devkit/schematics';
-import type { Element } from '@angular/compiler';
+import type { Element } from '@angular/compiler' with { "resolution-mode": "import" };
 import * as ts from 'typescript';
 import { UpdateChanges } from '../common/UpdateChanges';
-// use bare specifier to escape the schematics encapsulation for the dynamic import:
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
 import { igNamedImportFilter } from '../common/tsUtils';
 import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
 
 const version = '17.0.0';
 
 export default (): Rule => async (host: Tree, context: SchematicContext) => {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser } = await import('@angular/compiler');
     const update = new UpdateChanges(__dirname, host, context);
     const changes = new Map<string, FileChange[]>();
     const prop = ['type'];
diff --git a/projects/igniteui-angular/migrations/update-17_1_0/index.ts b/projects/igniteui-angular/migrations/update-17_1_0/index.ts
@@ -5,15 +5,14 @@ import {
 } from '@angular-devkit/schematics';
 import { UpdateChanges } from '../common/UpdateChanges';
 import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
-// use bare specifier to escape the schematics encapsulation for the dynamic import:
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
-import { Element } from '@angular/compiler';
+import type { Element } from '@angular/compiler' with { "resolution-mode": "import" };
 
 const version = '17.1.0';
 
 export default (): Rule => async (host: Tree, context: SchematicContext) => {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
-    const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser } = await import('@angular/compiler');
     const update = new UpdateChanges(__dirname, host, context);
     const changes = new Map<string, FileChange[]>();
     const tags = ['button', 'span', 'a', 'div', 'igx-prefix', 'igx-suffix']
diff --git a/projects/igniteui-angular/migrations/update-18_0_0/index.ts b/projects/igniteui-angular/migrations/update-18_0_0/index.ts
@@ -1,7 +1,6 @@
 import { Rule, SchematicContext, SchematicsException, Tree } from "@angular-devkit/schematics";
 import { FileChange, findElementNodes, getAttribute, getProjects, getSourceOffset, getWorkspace, hasAttribute, parseFile } from '../common/util';
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
-import type { Element } from '@angular/compiler';
+import type { Element } from '@angular/compiler' with { "resolution-mode": "import" };
 import { BoundPropertyObject, InputPropertyType, UpdateChanges } from "../common/UpdateChanges";
 
 const version = "18.0.0";
@@ -10,7 +9,8 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
     context.logger.info(
         `Applying migration for Ignite UI for Angular to version ${version}`,
     );
-    const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+    // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+    const { HtmlParser } = await import('@angular/compiler');
     const update = new UpdateChanges(__dirname, host, context);
     const changes = new Map<string, FileChange[]>();
     const prop = ["displayDensity", "[displayDensity]"];
diff --git a/projects/igniteui-angular/migrations/update-20_0_6/index.ts b/projects/igniteui-angular/migrations/update-20_0_6/index.ts
@@ -1,4 +1,3 @@
-import { Element } from '@angular/compiler';
 import type { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { UpdateChanges } from '../common/UpdateChanges';
 import {
@@ -7,7 +6,6 @@ import {
   getSourceOffset,
   parseFile
 } from '../common/util';
-import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
 
 const version = '20.0.6';
 
@@ -16,7 +14,8 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
     `Applying migration for Ignite UI for Angular to version ${version}`
   );
 
-  const { HtmlParser } = (await nativeImport('@angular/compiler')) as typeof import('@angular/compiler');
+  // bare specifier escapes schematics encapsulation for the compiler dynamic import:
+  const { HtmlParser, Element } = await import('@angular/compiler');
 
   const update = new UpdateChanges(__dirname, host, context);
   const changes = new Map<string, FileChange[]>();
diff --git a/projects/igniteui-angular/schematics/package.json b/projects/igniteui-angular/schematics/package.json
@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}
diff --git a/projects/igniteui-angular/schematics/tsconfig.json b/projects/igniteui-angular/schematics/tsconfig.json
@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "target": "es6",
-        "module": "commonjs",
+        "module": "node16",
         "sourceMap": false,
         "composite": true,
         "declaration": true,
