Merge pull request #14836 from IgniteUI/dpetev/fix-ng-ls-migrations-17.2

fix(migrations): fix LS server resolve with schematics encapsulation

.vscode/launch.json

@@ -27,20 +27,13 @@
             // "cwd": "<absolute directory of the project, having an old version of igniteui-angular, on which the migrations are applied>",
             "cwd": "C:\\Users\\User\\Desktop\\ng_proj\\test_migrations",
             "args": [
-                "-r",
-
-                // you need to install ts-node for the test project
-                "ts-node/register",
-
                 // "<path/to/ng>", "g",
                 "${env:AppData}/npm/node_modules/@angular/cli/bin/ng", "g",
 
-                // "<../../relative/path/from/cwd/to>/igniteui-angular/projects/igniteui-angular/migrations/migration-collection.json:migration-<number>
-                "../../../../../work/git/igniteui-angular/projects/igniteui-angular/migrations/migration-collection.json:migration-24"
+                // "<../../relative/path/from/cwd/to>/igniteui-angular/dist/igniteui-angular/migrations/migration-collection.json:migration-<number>
+                "../../../../../work/git/igniteui-angular/dist/igniteui-angular/migrations/migration-collection.json:migration-23"
             ],
-            "env": {
-                "TS_NODE_PROJECT": "${workspaceFolder}/projects/igniteui-angular/migrations/tsconfig.json"
-            }
+            "preLaunchTask": "buildMigrations"
         },
         {
             "name": "Run schematics",

.vscode/tasks.json

@@ -0,0 +1,32 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "build:schematics",
+            "problemMatcher": [],
+            "label": "buildSchematics",
+            "detail": "Build schematics"
+        },
+        {
+            "type": "npm",
+            "script": "build:migrations -- --sourceMap",
+            "dependsOn": [
+                "buildSchematics"
+            ],
+            "problemMatcher": [],
+            "label": "buildMigrationsSourceMap",
+            "detail": "Build migrations with sourceMap for debugging"
+        },
+        {
+            "type": "shell",
+            "command": "node ./scripts/migrations-sourcemap-shift.mjs",
+            "dependsOn": [
+                "buildMigrationsSourceMap"
+            ],
+            "problemMatcher": [],
+            "label": "buildMigrations",
+            "detail": "Build migrations with sourceMap for debugging"
+        },
+    ]
+}

projects/igniteui-angular/migrations/common/ServerHost.ts

@@ -2,6 +2,7 @@ import type { Tree } from '@angular-devkit/schematics';
 import * as pathFs from 'path';
 import * as ts from 'typescript/lib/tsserverlibrary';
 import { CUSTOM_TS_PLUGIN_NAME, CUSTOM_TS_PLUGIN_PATH } from './tsUtils';
+import { createRequire } from 'module';
 
 /**
  * Language server host is responsible for **most** of the FS operations / checks
@@ -11,6 +12,8 @@ export class ServerHost implements ts.server.ServerHost {
     public readonly args: string[];
     public readonly newLine: string;
     public readonly useCaseSensitiveFileNames: boolean;
+    /** Cached because Angular schematics encapsulation's customRequire doesn't provide `resolve` */
+    private nativeRequire = createRequire(__filename);
 
     constructor(private host: Tree) {
         this.args = ts.sys.args;
@@ -126,7 +129,7 @@ export class ServerHost implements ts.server.ServerHost {
                 moduleName = CUSTOM_TS_PLUGIN_PATH;
                 paths.push(__dirname);
             }
-            const modulePath = require.resolve(moduleName, { paths });
+            const modulePath = this.nativeRequire.resolve(moduleName, { paths });
             return {
                 module: require(modulePath),
                 error: undefined,

projects/igniteui-angular/migrations/common/UpdateChanges.ts

@@ -682,7 +682,7 @@ export class UpdateChanges {
         }
 
         // attempt to find a main tsconfig from workspace:
-        const wsProject = this.workspace.projects[0];
+        const wsProject = Object.values(this.workspace.projects)[0];
         // technically could be per-project, but assuming there's at least one main tsconfig for IDE support
         const projectConfig = wsProject.architect?.build?.options['tsConfig'];
 
@@ -847,8 +847,8 @@ export class UpdateChanges {
         for (const key of projectKeys) {
             const wsProject = this.workspace.projects[key];
             // intentionally compare against string values of the enum to avoid hard import
-            if (wsProject.projectType == "application" && wsProject.architect?.build?.options['main']) {
-                return wsProject.architect.build.options['main'];
+            if (wsProject.projectType == "application" && wsProject.architect?.build?.options) {
+                return wsProject.architect.build.options['browser'] || wsProject.architect.build.options['main'];
             } else if (wsProject.projectType == "library") {
                 // TODO: attempt to resolve from project ng-package.json or tsConfig
             }

scripts/migrations-sourcemap-shift.mjs

@@ -0,0 +1,18 @@
+import { globby } from 'globby';
+import { readFileSync, writeFileSync } from 'fs';
+
+/**
+ * Small patch for debugging compiled migrations that get wrapped with extra lines for encapsulation:
+ * https://github.com/angular/angular-cli/blob/e51b9068763a115fa27d06e2dd7988b34a3f677c/packages/angular/cli/src/command-builder/utilities/schematic-engine-host.ts#L213-L215
+ * Works for the simple "version":3 mappings produced where adding ; at the start shifts the mapped lines (ignores the extra unmapped source)
+ */
+(async () => {
+    const paths = await globby('dist/igniteui-angular/migrations/**/*.js.map');
+    for (const path of paths) {
+        const extraLine = ';';
+        const offset = 3;
+        let content = readFileSync(path, { encoding: 'utf-8' });
+        content = content.replace(`"mappings":"`, `"mappings":"${extraLine.repeat(offset)}`);
+        writeFileSync(path, content);
+    }
+})();