feat(@angular/build): set development/production condition

Ensures that we consistently set "development" for non-optimized and
"production" for optimized builds. This is consistent with other
bundlers (Vite/webpack/parcel/...).

modules/testing/builder/src/dev_prod_mode.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { BuilderHarness } from './builder-harness';
+
+export const GOOD_TARGET = './src/good.js';
+export const BAD_TARGET = './src/bad.js';
+
+/** Setup project for use of conditional imports. */
+export async function setupConditionImport(harness: BuilderHarness<unknown>) {
+ // Files that can be used as targets for the conditional import.
+ await harness.writeFile('src/good.ts', `export const VALUE = 'good-value';`);
+ await harness.writeFile('src/bad.ts', `export const VALUE = 'bad-value';`);
+
+ // Simple application file that accesses conditional code.
+ await harness.writeFile(
+ 'src/main.ts',
+ `import {VALUE} from '#target';
+console.log(VALUE);
+export default 42 as any;
+`,
+ );
+
+ // Ensure that good/bad can be resolved from tsconfig.
+ const tsconfig = JSON.parse(harness.readFile('src/tsconfig.app.json')) as TypeScriptConfig;
+ tsconfig.compilerOptions.moduleResolution = 'bundler';
+ tsconfig.files.push('good.ts', 'bad.ts');
+ await harness.writeFile('src/tsconfig.app.json', JSON.stringify(tsconfig));
+}
+
+/** Update package.json with the given mapping for #target. */
+export async function setTargetMapping(harness: BuilderHarness<unknown>, mapping: unknown) {
+ await harness.writeFile(
+ 'package.json',
+ JSON.stringify({
+ name: 'ng-test-app',
+ imports: {
+ '#target': mapping,
+ },
+ }),
+ );
+}
+
+interface TypeScriptConfig {
+ compilerOptions: {
+ moduleResolution: string;
+ };
+ files: string[];
+}

packages/angular/build/src/builders/application/tests/behavior/build-conditions_spec.ts

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+ setupConditionImport,
+ setTargetMapping,
+} from '../../../../../../../../modules/testing/builder/src/dev_prod_mode';
+import { buildApplication } from '../../index';
+import { APPLICATION_BUILDER_INFO, BASE_OPTIONS, describeBuilder } from '../setup';
+
+describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
+ describe('Behavior: "conditional imports"', () => {
+ beforeEach(async () => {
+ await setupConditionImport(harness);
+ });
+
+ interface ImportsTestCase {
+ name: string;
+ mapping: unknown;
+ output?: string;
+ }
+
+ const GOOD_TARGET = './src/good.js';
+ const BAD_TARGET = './src/bad.js';
+
+ const testCases: ImportsTestCase[] = [
+ { name: 'simple string', mapping: GOOD_TARGET },
+ {
+ name: 'default fallback without matching condition',
+ mapping: {
+ 'never': BAD_TARGET,
+ 'default': GOOD_TARGET,
+ },
+ },
+ {
+ name: 'development condition',
+ mapping: {
+ 'development': BAD_TARGET,
+ 'default': GOOD_TARGET,
+ },
+ },
+ {
+ name: 'production condition',
+ mapping: {
+ 'production': GOOD_TARGET,
+ 'default': BAD_TARGET,
+ },
+ },
+ {
+ name: 'browser condition (in browser)',
+ mapping: {
+ 'browser': GOOD_TARGET,
+ 'default': BAD_TARGET,
+ },
+ },
+ {
+ name: 'browser condition (in server)',
+ output: 'server/main.server.mjs',
+ mapping: {
+ 'browser': BAD_TARGET,
+ 'default': GOOD_TARGET,
+ },
+ },
+ ];
+
+ for (const testCase of testCases) {
+ describe(testCase.name, () => {
+ beforeEach(async () => {
+ await setTargetMapping(harness, testCase.mapping);
+ });
+
+ it('resolves to expected target', async () => {
+ harness.useTarget('build', {
+ ...BASE_OPTIONS,
+ optimization: true,
+ ssr: true,
+ server: 'src/main.ts',
+ });
+
+ const { result } = await harness.executeOnce();
+
+ expect(result?.success).toBeTrue();
+ const outputFile = `dist/${testCase.output ?? 'browser/main.js'}`;
+ harness.expectFile(outputFile).content.toContain('"good-value"');
+ harness.expectFile(outputFile).content.not.toContain('"bad-value"');
+ });
+ });
+ }
+ });
+});

packages/angular/build/src/builders/dev-server/tests/behavior/build-conditions_spec.ts

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+ setupConditionImport,
+ setTargetMapping,
+} from '../../../../../../../../modules/testing/builder/src/dev_prod_mode';
+import { executeDevServer } from '../../index';
+import { executeOnceAndFetch } from '../execute-fetch';
+import { describeServeBuilder } from '../jasmine-helpers';
+import { BASE_OPTIONS, DEV_SERVER_BUILDER_INFO } from '../setup';
+
+describeServeBuilder(
+ executeDevServer,
+ DEV_SERVER_BUILDER_INFO,
+ (harness, setupTarget, isApplicationBuilder) => {
+ describe('Behavior: "conditional imports"', () => {
+ if (!isApplicationBuilder) {
+ it('requires esbuild', () => {
+ expect(true).toBeTrue();
+ });
+
+ return;
+ }
+
+ beforeEach(async () => {
+ setupTarget(harness);
+
+ await setupConditionImport(harness);
+ });
+
+ interface ImportsTestCase {
+ name: string;
+ mapping: unknown;
+ output?: string;
+ }
+
+ const GOOD_TARGET = './src/good.js';
+ const BAD_TARGET = './src/bad.js';
+
+ const testCases: ImportsTestCase[] = [
+ { name: 'simple string', mapping: GOOD_TARGET },
+ {
+ name: 'default fallback without matching condition',
+ mapping: {
+ 'never': BAD_TARGET,
+ 'default': GOOD_TARGET,
+ },
+ },
+ {
+ name: 'development condition',
+ mapping: {
+ 'development': GOOD_TARGET,
+ 'default': BAD_TARGET,
+ },
+ },
+ {
+ name: 'production condition',
+ mapping: {
+ 'production': BAD_TARGET,
+ 'default': GOOD_TARGET,
+ },
+ },
+ {
+ name: 'browser condition (in browser)',
+ mapping: {
+ 'browser': GOOD_TARGET,
+ 'default': BAD_TARGET,
+ },
+ },
+ ];
+
+ for (const testCase of testCases) {
+ describe(testCase.name, () => {
+ beforeEach(async () => {
+ await setTargetMapping(harness, testCase.mapping);
+ });
+
+ it('resolves to expected target', async () => {
+ harness.useTarget('serve', {
+ ...BASE_OPTIONS,
+ });
+
+ const { result, response } = await executeOnceAndFetch(harness, '/main.js');
+
+ expect(result?.success).toBeTrue();
+ const output = await response?.text();
+ expect(output).toContain('good-value');
+ expect(output).not.toContain('bad-value');
+ });
+ });
+ }
+ });
+ },
+);

packages/angular/build/src/tools/esbuild/application-code-bundle.ts

@@ -564,7 +564,12 @@ function getEsBuildCommonOptions(options: NormalizedApplicationBuildOptions): Bu
  bundle: true,
  packages: 'bundle',
  assetNames: outputNames.media,
- conditions: ['es2020', 'es2015', 'module'],
+ conditions: [
+ 'es2020',
+ 'es2015',
+ 'module',
+ optimizationOptions.scripts ? 'production' : 'development',
+ ],
  resolveExtensions: ['.ts', '.tsx', '.mjs', '.js', '.cjs'],
  metafile: true,
  legalComments: options.extractLicenses ? 'none' : 'eof',

packages/angular/build/src/tools/esbuild/global-scripts.ts

@@ -62,7 +62,7 @@ export function createGlobalScriptsBundleOptions(
  entryNames: initial ? outputNames.bundles : '[name]',
  assetNames: outputNames.media,
  mainFields: ['script', 'browser', 'main'],
- conditions: ['script'],
+ conditions: ['script', optimizationOptions.scripts ? 'production' : 'development'],
  resolveExtensions: ['.mjs', '.js', '.cjs'],
  logLevel: options.verbose && !jsonLogs ? 'debug' : 'silent',
  metafile: true,

packages/angular/build/src/tools/esbuild/stylesheets/bundle-options.ts

@@ -82,7 +82,7 @@ export function createStylesheetBundleOptions(
  preserveSymlinks: options.preserveSymlinks,
  external: options.externalDependencies,
  publicPath: options.publicPath,
- conditions: ['style', 'sass', 'less'],
+ conditions: ['style', 'sass', 'less', options.optimization ? 'production' : 'development'],
  mainFields: ['style', 'sass'],
  // Unlike JS, CSS does not have implicit file extensions in the general case.
  // Preprocessor specific behavior is handled in each stylesheet language plugin.