Replace @angular/platform-browser-dynamic with @angular/platform-browser

.github/copilot-instructions.md

@@ -28,12 +28,20 @@ This repository uses modular GitHub Copilot instructions organized by topic. Ref
 
 ### Validation Before Committing
 
-Always run the full validation suite:
+- Always run code format fix:
 
 ```bash
-yarn test && yarn test-esm && yarn lint && yarn lint-prettier-ci
+yarn lint-fix && yarn lint-prettier
 ```
 
+- Always run the full validation suite:
+
+```bash
+yarn test && yarn test-esm && yarn lint && yarn lint-prettier-ci && yarn test-examples
+```
+
+- Always run `husky` pre-commit hooks which is under `.husky` directory.
+
 ### Key Principles
 
 - **Compatibility**: Support both CommonJS and ESM module formats

examples/example-app-monorepo/apps/app1/src/app/demo/demo-main.ts

@@ -1,5 +1,5 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { platformBrowser } from '@angular/platform-browser';
 
 import { demoProviders } from './demo';
 
-platformBrowserDynamic([demoProviders]);
+platformBrowser([demoProviders]);

examples/example-app-v18/src/app/demo/demo-main.ts

@@ -1,5 +1,5 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { platformBrowser } from '@angular/platform-browser';
 
 import { demoProviders } from './demo';
 
-platformBrowserDynamic([demoProviders]);
+platformBrowser([demoProviders]);

examples/example-app-v19/src/app/demo/demo-main.ts

@@ -1,5 +1,5 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { platformBrowser } from '@angular/platform-browser';
 
 import { demoProviders } from './demo';
 
-platformBrowserDynamic([demoProviders]);
+platformBrowser([demoProviders]);

examples/example-app-v20/src/app/demo/demo-main.ts

@@ -1,5 +1,5 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { platformBrowser } from '@angular/platform-browser';
 
 import { demoProviders } from './demo';
 
-platformBrowserDynamic([demoProviders]);
+platformBrowser([demoProviders]);

package.json

@@ -61,6 +61,7 @@
   "peerDependencies": {
     "@angular/compiler-cli": ">=18.0.0 <21.0.0",
     "@angular/core": ">=18.0.0 <21.0.0",
+    "@angular/platform-browser": ">=18.0.0 <21.0.0",
     "@angular/platform-browser-dynamic": ">=18.0.0 <21.0.0",
     "jest": "^30.0.0",
     "jest-environment-jsdom": "^30.0.0",

presets/index.d.mts

@@ -0,0 +1,3 @@
+import { createEsmPreset, createCjsPreset } from '../build/presets';
+
+export { createEsmPreset, createCjsPreset };

presets/index.mjs

@@ -0,0 +1 @@
+export * from '../build/presets';

setup-env/zone/index.js

@@ -1,7 +1,9 @@
 require('zone.js');
 require('zone.js/testing');
 
+const { COMPILER_OPTIONS, VERSION } = require('@angular/core');
 const { getTestBed } = require('@angular/core/testing');
+const { BrowserTestingModule, platformBrowserTesting } = require('@angular/platform-browser/testing');
 const {
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting,
@@ -12,12 +14,25 @@ const { polyfillEncoder, resolveTestEnvOptions } = require('../utils');
 const setupZoneTestEnv = (options) => {
     polyfillEncoder();
     const testEnvironmentOptions = resolveTestEnvOptions(options);
-
-    getTestBed().initTestEnvironment(
-        [BrowserDynamicTestingModule],
-        platformBrowserDynamicTesting(),
-        testEnvironmentOptions,
-    );
+    if (+VERSION.major >= 20) {
+        getTestBed().initTestEnvironment(
+            [BrowserTestingModule],
+            platformBrowserTesting([
+                {
+                    provide: COMPILER_OPTIONS,
+                    useValue: {},
+                    multi: true,
+                },
+            ]),
+            testEnvironmentOptions,
+        );
+    } else {
+        getTestBed().initTestEnvironment(
+            [BrowserDynamicTestingModule],
+            platformBrowserDynamicTesting(),
+            testEnvironmentOptions,
+        );
+    }
 };
 
 module.exports = {

setup-env/zone/index.mjs

@@ -1,20 +1,35 @@
 import 'zone.js';
 import 'zone.js/testing';
 
+import { COMPILER_OPTIONS, VERSION } from '@angular/core';
 import { getTestBed } from '@angular/core/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 import { polyfillEncoder, resolveTestEnvOptions } from '../utils';
 
 const setupZoneTestEnv = (options) => {
     polyfillEncoder();
     const testEnvironmentOptions = resolveTestEnvOptions(options);
-
-    getTestBed().initTestEnvironment(
-        [BrowserDynamicTestingModule],
-        platformBrowserDynamicTesting(),
-        testEnvironmentOptions,
-    );
+    if (+VERSION.major >= 20) {
+        getTestBed().initTestEnvironment(
+            [BrowserTestingModule],
+            platformBrowserTesting([
+                {
+                    provide: COMPILER_OPTIONS,
+                    useValue: {},
+                    multi: true,
+                },
+            ]),
+            testEnvironmentOptions,
+        );
+    } else {
+        getTestBed().initTestEnvironment(
+            [BrowserDynamicTestingModule],
+            platformBrowserDynamicTesting(),
+            testEnvironmentOptions,
+        );
+    }
 };
 
 export { setupZoneTestEnv };

setup-env/zoneless/index.js

@@ -1,9 +1,10 @@
 const angularCore = require('@angular/core');
-const { ErrorHandler, NgModule, VERSION } = require('@angular/core');
+const { ErrorHandler, NgModule, VERSION, COMPILER_OPTIONS } = require('@angular/core');
 const { getTestBed } = require('@angular/core/testing');
+const { BrowserTestingModule, platformBrowserTesting } = require('@angular/platform-browser/testing');
 const {
-    BrowserDynamicTestingModule,
     platformBrowserDynamicTesting,
+    BrowserDynamicTestingModule,
 } = require('@angular/platform-browser-dynamic/testing');
 
 const { polyfillEncoder, resolveTestEnvOptions } = require('../utils');
@@ -32,15 +33,28 @@ const provideZonelessConfig = () => {
 };
 
 const setupZonelessTestEnv = (options) => {
-    polyfillEncoder();
     if (typeof provideZonelessChangeDetectionFn !== 'undefined') {
+        polyfillEncoder();
         const testEnvironmentOptions = resolveTestEnvOptions(options);
-
-        getTestBed().initTestEnvironment(
-            [BrowserDynamicTestingModule, provideZonelessConfig()],
-            platformBrowserDynamicTesting(),
-            testEnvironmentOptions,
-        );
+        if (+VERSION.major >= 20) {
+            getTestBed().initTestEnvironment(
+                [BrowserTestingModule, provideZonelessConfig()],
+                platformBrowserTesting([
+                    {
+                        provide: COMPILER_OPTIONS,
+                        useValue: {},
+                        multi: true,
+                    },
+                ]),
+                testEnvironmentOptions,
+            );
+        } else {
+            getTestBed().initTestEnvironment(
+                [BrowserDynamicTestingModule, provideZonelessConfig()],
+                platformBrowserDynamicTesting(),
+                testEnvironmentOptions,
+            );
+        }
 
         return;
     }

setup-env/zoneless/index.mjs

@@ -1,7 +1,8 @@
 import * as angularCore from '@angular/core';
-import { ErrorHandler, NgModule, VERSION } from '@angular/core';
+import { ErrorHandler, NgModule, VERSION, COMPILER_OPTIONS } from '@angular/core';
 import { getTestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
+import { platformBrowserDynamicTesting, BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 
 import { polyfillEncoder, resolveTestEnvOptions } from '../utils';
 
@@ -31,15 +32,28 @@ const provideZonelessConfig = () => {
 };
 
 const setupZonelessTestEnv = (options) => {
-    polyfillEncoder();
     if (typeof provideZonelessChangeDetectionFn !== 'undefined') {
+        polyfillEncoder();
         const testEnvironmentOptions = resolveTestEnvOptions(options);
-
-        getTestBed().initTestEnvironment(
-            [BrowserDynamicTestingModule, provideZonelessConfig()],
-            platformBrowserDynamicTesting(),
-            testEnvironmentOptions,
-        );
+        if (+VERSION.major >= 20) {
+            getTestBed().initTestEnvironment(
+                [BrowserTestingModule, provideZonelessConfig()],
+                platformBrowserTesting([
+                    {
+                        provide: COMPILER_OPTIONS,
+                        useValue: {},
+                        multi: true,
+                    },
+                ]),
+                testEnvironmentOptions,
+            );
+        } else {
+            getTestBed().initTestEnvironment(
+                [BrowserDynamicTestingModule, provideZonelessConfig()],
+                platformBrowserDynamicTesting(),
+                testEnvironmentOptions,
+            );
+        }
 
         return;
     }

src/config/setup-env.spec.ts

@@ -26,10 +26,18 @@ jest.mock('@angular/core/testing', () => {
     };
 });
 
+class BrowserTestingModuleStub {}
 class BrowserDynamicTestingModuleStub {}
 class PlatformRefStub {}
 class ErrorHandlerStub {}
+const mockPlatformBrowserTesting = jest.fn(() => new PlatformRefStub());
 const mockPlatformBrowserDynamicTesting = jest.fn(() => new PlatformRefStub());
+jest.mock('@angular/platform-browser/testing', () => {
+    return {
+        BrowserTestingModule: new BrowserTestingModuleStub(),
+        platformBrowserTesting: mockPlatformBrowserTesting,
+    };
+});
 jest.mock('@angular/platform-browser-dynamic/testing', () => {
     return {
         BrowserDynamicTestingModule: new BrowserDynamicTestingModuleStub(),
@@ -44,15 +52,18 @@ jest.mock('@angular/core', () => {
         NgModule: () => {
             return jest.fn();
         },
+        VERSION: {
+            major: '20',
+        },
     };
 });
 
 describe('Setup env utilities', () => {
     const assertOnInitTestEnv = (): void => {
         expect(mockGetTestBed).toHaveBeenCalled();
-        expect(mockInitTestEnvironment.mock.calls[0][0][0]).toBeInstanceOf(BrowserDynamicTestingModuleStub);
-        expect(mockPlatformBrowserDynamicTesting).toHaveBeenCalled();
-        expect(mockPlatformBrowserDynamicTesting.mock.results[0].value).toBeInstanceOf(PlatformRefStub);
+        expect(mockInitTestEnvironment.mock.calls[0][0][0]).toBeInstanceOf(BrowserTestingModuleStub);
+        expect(mockPlatformBrowserTesting).toHaveBeenCalled();
+        expect(mockPlatformBrowserTesting.mock.results[0].value).toBeInstanceOf(PlatformRefStub);
         expect(mockInitTestEnvironment.mock.calls[0][2]).toEqual({
             teardown: {
                 destroyAfterEach: false,

website/src/pages/index.tsx

@@ -3,7 +3,6 @@ import { translate } from '@docusaurus/Translate';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-// eslint-disable-next-line import/no-named-as-default
 import clsx from 'clsx';
 import React from 'react';
 

yarn.lock

@@ -9326,6 +9326,7 @@ __metadata:
   peerDependencies:
     "@angular/compiler-cli": ">=18.0.0 <21.0.0"
     "@angular/core": ">=18.0.0 <21.0.0"
+    "@angular/platform-browser": ">=18.0.0 <21.0.0"
     "@angular/platform-browser-dynamic": ">=18.0.0 <21.0.0"
     jest: ^30.0.0
     jest-environment-jsdom: ^30.0.0