feat(angular-rspack,angular-rsbuild): add define option

e2e/fixtures/rsbuild-csr-css/rsbuild.config.ts

@@ -6,6 +6,9 @@ export default () => {
         browser: './src/main.ts',
         inlineStylesExtension: 'css',
         outputPath: './build',
+        define: {
+          nxAngularRsbuild: '"20.6.2"',
+        },
       },
     });
   }

e2e/fixtures/rsbuild-csr-css/src/app/app.component.html

@@ -1,2 +1,3 @@
+<p>&#64;nx/angular-rsbuild v{{ ngAngularRsbuildVersion }}</p>
 <app-nx-welcome></app-nx-welcome>
 <router-outlet></router-outlet>

e2e/fixtures/rsbuild-csr-css/src/app/app.component.ts

@@ -2,6 +2,8 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NxWelcomeComponent } from './nx-welcome.component';
 
+declare const nxAngularRsbuild: string;
+
 @Component({
   imports: [NxWelcomeComponent, RouterModule],
   selector: 'app-root',
@@ -10,4 +12,5 @@ import { NxWelcomeComponent } from './nx-welcome.component';
 })
 export class AppComponent {
   title = 'rsbuild-csr-css';
+  ngAngularRsbuildVersion = nxAngularRsbuild;
 }

e2e/fixtures/rspack-csr-css/rspack.config.js

@@ -34,6 +34,9 @@ module.exports = () => {
             port: 8080,
             proxyConfig: './proxy.conf.json',
           },
+          define: {
+            nxAngularRspack: '"20.6.2"',
+          },
         },
       },
       {

e2e/fixtures/rspack-csr-css/src/app/app.component.html

@@ -1,3 +1,4 @@
+<p>&#64;nx/angular-rspack v{{ nxAngularRspackVersion }}</p>
 <p>{{ greeting$ | async }}</p>
 <p class="icon-github">&nbsp;</p>
 <app-scss-inline-test></app-scss-inline-test>

e2e/fixtures/rspack-csr-css/src/app/app.component.ts

@@ -6,6 +6,8 @@ import { ApiService } from './api.service';
 import { NxWelcomeComponent } from './nx-welcome.component';
 import { ScssInlineTestComponent } from './scss-inline-test';
 
+declare const nxAngularRspack: string;
+
 @Component({
   imports: [
     NxWelcomeComponent,
@@ -20,6 +22,7 @@ import { ScssInlineTestComponent } from './scss-inline-test';
 export class AppComponent implements OnInit {
   title = 'rsbuild-csr-css';
   greeting$!: Observable<string>;
+  nxAngularRspackVersion = nxAngularRspack;
 
   constructor(private readonly apiService: ApiService) {}
 

packages/angular-rsbuild/src/lib/config/create-config.ts

@@ -154,6 +154,7 @@ export async function _createConfig(
           define: {
             ...(isProd ? { ngDevMode: 'false' } : undefined),
             ngJitMode: normalizedOptions.aot ? undefined : 'true', // @TODO: use normalizedOptions
+            ...normalizedOptions.define,
           },
         },
         output: {
@@ -194,6 +195,7 @@ export async function _createConfig(
                   ngServerMode: true,
                   ...(isProd ? { ngDevMode: 'false' } : undefined),
                   ngJitMode: normalizedOptions.aot ? undefined : 'true', // @TODO: use normalizedOptions
+                  ...normalizedOptions.define,
                 },
               },
               output: {

packages/angular-rsbuild/src/lib/models/normalize-options.ts

@@ -88,6 +88,7 @@ function validateChunkOptions(options: Partial<PluginAngularOptions>) {
 export const DEFAULT_PLUGIN_ANGULAR_OPTIONS: PluginAngularOptions = {
   index: './src/index.html',
   browser: './src/main.ts',
+  define: {},
   server: undefined,
   ssr: undefined,
   fileReplacements: [],
@@ -121,6 +122,7 @@ export function normalizeOptions(
     ssr,
     optimization,
     devServer,
+    define,
     ...restOptions
   } = options;
 
@@ -150,6 +152,7 @@ export function normalizeOptions(
     ...restOptions,
     ...(server != null ? { server } : {}),
     ...(ssr != null ? { ssr: normalizedSsr } : {}),
+    ...(define != null ? { define } : {}),
     optimization: normalizedOptimization,
     outputPath: normalizeOutputPath(root, options.outputPath),
     sourceMap: normalizeSourceMap(options.sourceMap),

packages/angular-rsbuild/src/lib/models/plugin-options.ts

@@ -43,6 +43,12 @@ export interface SourceMap {
 export interface PluginAngularOptions {
   index: string;
   browser: string;
+  /**
+   * Defines global identifiers that will be replaced with a specified constant value when found in any JavaScript or TypeScript code including libraries.
+   * The value will be used directly.
+   * String values must be put in quotes.
+   */
+  define?: Record<string, string>;
   server?: string;
   ssr?:
     | boolean

packages/angular-rspack/src/lib/models/angular-rspack-plugin-options.ts

@@ -90,6 +90,12 @@ export interface AngularRspackPluginOptions extends PluginUnsupportedOptions {
   assets?: AssetElement[];
   browser?: string;
   commonChunk?: boolean;
+  /**
+   * Defines global identifiers that will be replaced with a specified constant value when found in any JavaScript or TypeScript code including libraries.
+   * The value will be used directly.
+   * String values must be put in quotes.
+   */
+  define?: Record<string, string>;
   devServer?: DevServerOptions;
   extractLicenses?: boolean;
   fileReplacements?: FileReplacement[];

packages/angular-rspack/src/lib/models/normalize-options.ts

@@ -242,6 +242,7 @@ export function normalizeOptions(
     aot,
     browser: options.browser ?? './src/main.ts',
     commonChunk: options.commonChunk ?? true,
+    define: options.define ?? {},
     devServer: normalizeDevServer(options.devServer),
     extractLicenses: options.extractLicenses ?? true,
     fileReplacements: resolveFileReplacements(fileReplacements, root),

packages/angular-rspack/src/lib/models/unsupported-options.ts

@@ -43,7 +43,6 @@ export interface PluginUnsupportedOptions {
   };
   externalDependencies?: string[];
   clearScreen?: boolean;
-  define?: Record<string, string>;
   baseHref?: string;
   verbose?: boolean;
   progress?: boolean;
@@ -76,7 +75,6 @@ export const TOP_LEVEL_OPTIONS_PENDING_SUPPORT = [
   'security',
   'externalDependencies',
   'clearScreen',
-  'define',
   'baseHref',
   'verbose',
   'progress',

packages/angular-rspack/src/lib/plugins/ng-rspack.ts

@@ -72,6 +72,7 @@ export class NgRspackPlugin implements RspackPluginInstance {
       ngDevMode: isProduction ? 'false' : {},
       ngJitMode: this.pluginOptions.aot ? undefined : 'true',
       ngServerMode: this.pluginOptions.hasServer,
+      ...(this.pluginOptions.define ?? {}),
     }).apply(compiler);
     if (this.pluginOptions.assets) {
       new CopyRspackPlugin({