fix(vite-plugin-angular): use conditional imports across Angular Devkit versions (#1077)

Author: brandonroberts

packages/vite-plugin-angular/src/lib/utils/compiler-plugin-options.ts

@@ -0,0 +1,15 @@
+import { SourceFileCache } from './source-file-cache';
+
+export interface CompilerPluginOptions {
+  sourcemap: boolean;
+  tsconfig: string;
+  jit?: boolean;
+  /** Skip TypeScript compilation setup. This is useful to re-use the TypeScript compilation from another plugin. */
+  noopTypeScriptCompilation?: boolean;
+  advancedOptimizations?: boolean;
+  thirdPartySourcemaps?: boolean;
+  fileReplacements?: Record<string, string>;
+  sourceFileCache?: SourceFileCache;
+  // loadResultCache?: LoadResultCache;
+  incremental: boolean;
+}

packages/vite-plugin-angular/src/lib/utils/devkit.ts

@@ -1,38 +1,86 @@
-import * as wbl from '@angular-devkit/build-angular/src/tools/babel/webpack-loader.js';
-import * as app from '@angular-devkit/build-angular/src/tools/babel/presets/application.js';
-import * as cp from '@angular-devkit/build-angular/src/tools/esbuild/angular/compiler-plugin.js';
+import { VERSION } from '@angular/compiler-cli';
+import { createRequire } from 'node:module';
+import type { CompilerPluginOptions } from './compiler-plugin-options.js';
 import * as sfc from './source-file-cache.js';
 
-let requiresLinking: Function;
-/**
- * Workaround for compatibility with Angular 16.2+
- */
-if (typeof (wbl as any)['requiresLinking'] !== 'undefined') {
-  requiresLinking = (wbl as any).requiresLinking;
-} else if (typeof (app as any)['requiresLinking'] !== 'undefined') {
-  requiresLinking = (app as any)['requiresLinking'] as Function;
-}
+const require = createRequire(import.meta.url);
 
-/**
- * Workaround for compatibility with Angular 17.0+
- */
+const angularVersion = Number(VERSION.major);
+let requiresLinking: Function;
 let sourceFileCache: any;
-if (typeof (cp as any)['SourceFileCache'] !== 'undefined') {
-  sourceFileCache = (cp as any).SourceFileCache;
+let cjt: Function;
+let jt: any;
+let angularApplicationPreset: Function;
+
+if (angularVersion < 15) {
+  throw new Error('AnalogJS is not compatible with Angular v14 and lower');
+} else if (angularVersion >= 15 && angularVersion < 16) {
+  const app = require('@angular-devkit/build-angular/src/babel/presets/application.js');
+  const wbl = require('@angular-devkit/build-angular/src/babel/webpack-loader.js');
+  const cp = require('@angular-devkit/build-angular/src/builders/browser-esbuild/compiler-plugin.js');
+  const {
+    createJitResourceTransformer,
+  } = require('@angular-devkit/build-angular/src/builders/browser-esbuild/angular/jit-resource-transformer.js');
+  const {
+    JavaScriptTransformer,
+  } = require('@angular-devkit/build-angular/src/builders/browser-esbuild/javascript-transformer.js');
+
+  requiresLinking = wbl.requiresLinking;
+  sourceFileCache = cp.SourceFileCache;
+  cjt = createJitResourceTransformer;
+  jt = JavaScriptTransformer;
+  angularApplicationPreset = app.default;
+} else if (angularVersion >= 16 && angularVersion < 18) {
+  const app = require('@angular-devkit/build-angular/src/tools/babel/presets/application.js');
+  const wbl = require('@angular-devkit/build-angular/src/tools/babel/webpack-loader.js');
+  const cp = require('@angular-devkit/build-angular/src/tools/esbuild/angular/compiler-plugin.js');
+  const {
+    createJitResourceTransformer,
+  } = require('@angular-devkit/build-angular/src/tools/esbuild/angular/jit-resource-transformer.js');
+  const {
+    JavaScriptTransformer,
+  } = require('@angular-devkit/build-angular/src/tools/esbuild/javascript-transformer.js');
+
+  /**
+   * Workaround for compatibility with Angular 16.2+
+   */
+  if (typeof wbl['requiresLinking'] !== 'undefined') {
+    requiresLinking = wbl.requiresLinking;
+  } else if (typeof app['requiresLinking'] !== 'undefined') {
+    requiresLinking = app['requiresLinking'];
+  }
+  /**
+   * Workaround for compatibility with Angular 17.0+
+   */
+  if (typeof cp['SourceFileCache'] !== 'undefined') {
+    sourceFileCache = cp.SourceFileCache;
+  } else {
+    sourceFileCache = sfc.SourceFileCache;
+  }
+
+  cjt = createJitResourceTransformer;
+  jt = JavaScriptTransformer;
+  angularApplicationPreset = app.default;
 } else {
-  sourceFileCache = sfc.SourceFileCache;
-}
+  const {
+    createJitResourceTransformer,
+    JavaScriptTransformer,
+    SourceFileCache,
+  } = require('@angular/build/private');
+  const app = require('@angular-devkit/build-angular/src/tools/babel/presets/application.js');
 
-const angularApplicationPreset = app.default;
-import { createJitResourceTransformer } from '@angular-devkit/build-angular/src/tools/esbuild/angular/jit-resource-transformer.js';
-import { CompilerPluginOptions } from '@angular-devkit/build-angular/src/tools/esbuild/angular/compiler-plugin.js';
-import { JavaScriptTransformer } from '@angular-devkit/build-angular/src/tools/esbuild/javascript-transformer.js';
+  requiresLinking = app.requiresLinking;
+  sourceFileCache = SourceFileCache;
+  cjt = createJitResourceTransformer;
+  jt = JavaScriptTransformer;
+  angularApplicationPreset = app.default;
+}
 
 export {
   requiresLinking,
   angularApplicationPreset,
-  createJitResourceTransformer,
-  CompilerPluginOptions,
-  JavaScriptTransformer,
+  cjt as createJitResourceTransformer,
+  jt as JavaScriptTransformer,
   sourceFileCache as SourceFileCache,
+  CompilerPluginOptions,
 };