refactor: remove dependency on @angular/platform-browser-dynamic

alan-agius4 · alan-agius4 · commit 2cc6b7f29654 · 2025-03-20T14:11:02.000+01:00
This commit remove the dependency on `@angular/platform-browser-dynamic` from new projects. This is now possible due to angular/angular#60453
diff --git a/modules/testing/builder/projects/hello-world-app/src/main.ts b/modules/testing/builder/projects/hello-world-app/src/main.ts
@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { platformBrowser } from '@angular/platform-browser';
 
 import { AppModule } from './app/app.module';
 
-platformBrowserDynamic()
+platformBrowser()
   .bootstrapModule(AppModule)
   .catch(err => console.log(err));
diff --git a/package.json b/package.json
@@ -57,7 +57,6 @@
     "@angular/material": "20.0.0-next.2",
     "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#d25ced20c12ad010c2b5b560acb78065f8d6564e",
     "@angular/platform-browser": "20.0.0-next.3",
-    "@angular/platform-browser-dynamic": "20.0.0-next.3",
     "@angular/platform-server": "20.0.0-next.3",
     "@angular/router": "20.0.0-next.3",
     "@angular/service-worker": "20.0.0-next.3",
diff --git a/packages/angular/build/BUILD.bazel b/packages/angular/build/BUILD.bazel
@@ -169,7 +169,6 @@ ts_project(
         "//:node_modules/@angular/compiler-cli",
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/platform-browser",
-        "//:node_modules/@angular/platform-browser-dynamic",
         "//:node_modules/@angular/router",
         "//:node_modules/rxjs",
         "//:node_modules/tslib",
@@ -202,7 +201,6 @@ ts_project(
         "//:node_modules/@angular/compiler-cli",
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/platform-browser",
-        "//:node_modules/@angular/platform-browser-dynamic",
         "//:node_modules/@angular/router",
         ":node_modules/ng-packagr",
         "//:node_modules/rxjs",
@@ -238,7 +236,6 @@ ts_project(
         "//:node_modules/@angular/compiler-cli",
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/platform-browser",
-        "//:node_modules/@angular/platform-browser-dynamic",
         "//:node_modules/@angular/router",
         "//:node_modules/rxjs",
         "//:node_modules/tslib",
diff --git a/packages/angular/build/package.json b/packages/angular/build/package.json
@@ -60,6 +60,7 @@
     "@angular/compiler": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/compiler-cli": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/localize": "0.0.0-ANGULAR-FW-PEER-DEP",
+    "@angular/platform-browser": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/platform-server": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/service-worker": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/ssr": "^0.0.0-PLACEHOLDER",
@@ -74,6 +75,9 @@
     "@angular/localize": {
       "optional": true
     },
+    "@angular/platform-browser": {
+      "optional": true
+    },
     "@angular/platform-server": {
       "optional": true
     },
diff --git a/packages/angular/build/src/builders/application/tests/options/app-shell_spec.ts b/packages/angular/build/src/builders/application/tests/options/app-shell_spec.ts
@@ -69,10 +69,10 @@ const appShellRouteFiles: Record<string, string> = {
     export class AppServerModule {}
   `,
   'src/main.ts': `
-    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+    import { platformBrowser } from '@angular/platform-browser';
     import { AppModule } from './app/app.module';
 
-    platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
+    platformBrowser().bootstrapModule(AppModule).catch(err => console.log(err));
   `,
   'src/app/app-routing.module.ts': `
     import { NgModule } from '@angular/core';
diff --git a/packages/angular/build/src/builders/karma/polyfills/init_test_bed.js b/packages/angular/build/src/builders/karma/polyfills/init_test_bed.js
@@ -7,13 +7,10 @@
  */
 
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
 // Initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
   errorOnUnknownElements: true,
   errorOnUnknownProperties: true,
 });
diff --git a/packages/angular_devkit/build_angular/BUILD.bazel b/packages/angular_devkit/build_angular/BUILD.bazel
@@ -402,7 +402,6 @@ LARGE_SPECS = {
             "//:node_modules/@angular/compiler-cli",
             "//:node_modules/@angular/core",
             "//:node_modules/@angular/platform-browser",
-            "//:node_modules/@angular/platform-browser-dynamic",
             "//:node_modules/@angular/router",
             "//:node_modules/rxjs",
             "//:node_modules/tslib",
diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json
@@ -75,6 +75,7 @@
   "peerDependencies": {
     "@angular/compiler-cli": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/localize": "0.0.0-ANGULAR-FW-PEER-DEP",
+    "@angular/platform-browser": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/platform-server": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/service-worker": "0.0.0-ANGULAR-FW-PEER-DEP",
     "@angular/ssr": "^0.0.0-PLACEHOLDER",
@@ -92,6 +93,9 @@
     "@angular/localize": {
       "optional": true
     },
+    "@angular/platform-browser": {
+      "optional": true
+    },
     "@angular/platform-server": {
       "optional": true
     },
diff --git a/packages/angular_devkit/build_angular/src/builders/app-shell/app-shell_spec.ts b/packages/angular_devkit/build_angular/src/builders/app-shell/app-shell_spec.ts
@@ -91,11 +91,11 @@ describe('AppShell Builder', () => {
       export class AppServerModule {}
     `,
     'src/main.ts': `
-      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+      import { platformBrowser } from '@angular/platform-browser';
       import { AppModule } from './app/app.module';
 
       document.addEventListener('DOMContentLoaded', () => {
-        platformBrowserDynamic().bootstrapModule(AppModule)
+        platformBrowser().bootstrapModule(AppModule)
         .catch(err => console.log(err));
       });
     `,
diff --git a/packages/angular_devkit/build_angular/src/builders/browser/specs/rebuild_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/specs/rebuild_spec.ts
@@ -55,10 +55,10 @@ describe('Browser Builder rebuilds', () => {
         export let X = '$$_E2E_GOLDEN_VALUE_2';
       `,
       'src/main.ts': `
-        import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+        import { platformBrowser } from '@angular/platform-browser';
         import { AppModule } from './app/app.module';
 
-        platformBrowserDynamic().bootstrapModule(AppModule);
+        platformBrowser().bootstrapModule(AppModule);
 
         import * as m from './app/app.module';
         console.log(m.X);
diff --git a/packages/angular_devkit/build_angular/src/builders/browser/specs/web-worker_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/specs/web-worker_spec.ts
@@ -36,9 +36,9 @@ describe('Browser Builder Web Worker support', () => {
       });
     `,
     'src/main.ts': `
-      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+      import { platformBrowser } from '@angular/platform-browser';
       import { AppModule } from './app/app.module';
-      platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
+      platformBrowser().bootstrapModule(AppModule).catch(err => console.error(err));
 
       const worker = new Worker(new URL('./app/app.worker', import.meta.url), { type: 'module' });
       worker.onmessage = ({ data }) => {
diff --git a/packages/angular_devkit/build_angular/src/builders/jest/init-test-bed.mjs b/packages/angular_devkit/build_angular/src/builders/jest/init-test-bed.mjs
@@ -10,12 +10,9 @@
 // `@angular-devkit/build-angular` rather than the user's workspace. Should look into virtual modules to support those use cases.
 
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
   errorOnUnknownElements: true,
   errorOnUnknownProperties: true,
 });
diff --git a/packages/angular_devkit/build_angular/src/builders/karma/browser_builder.ts b/packages/angular_devkit/build_angular/src/builders/karma/browser_builder.ts
@@ -153,13 +153,10 @@ function getBuiltInMainFile(): string {
   const content = Buffer.from(
     `
   import { getTestBed } from '@angular/core/testing';
-  import {
-    BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting,
-   } from '@angular/platform-browser-dynamic/testing';
+  import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
   // Initialize the Angular testing environment.
-  getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
     errorOnUnknownElements: true,
     errorOnUnknownProperties: true
   });
diff --git a/packages/angular_devkit/build_angular/src/builders/web-test-runner/jasmine_runner.js b/packages/angular_devkit/build_angular/src/builders/web-test-runner/jasmine_runner.js
@@ -7,10 +7,7 @@
  */
 
 import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 import {
   getConfig,
   sessionFailed,
@@ -67,7 +64,7 @@ export async function runJasmineTests(jasmineEnv) {
   jasmine.DEFAULT_TIMEOUT_INTERVAL = config.defaultTimeoutInterval;
 
   // Initialize `TestBed` automatically for users. This assumes we already evaluated `zone.js/testing`.
-  getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
     errorOnUnknownElements: true,
     errorOnUnknownProperties: true,
   });
diff --git a/packages/angular_devkit/build_webpack/BUILD.bazel b/packages/angular_devkit/build_webpack/BUILD.bazel
@@ -87,7 +87,6 @@ jasmine_test(
         "//:node_modules/@angular/compiler-cli",
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/platform-browser",
-        "//:node_modules/@angular/platform-browser-dynamic",
         "//:node_modules/tslib",
         "//:node_modules/typescript",
         "//:node_modules/zone.js",
diff --git a/packages/angular_devkit/build_webpack/test/angular-app/src/main.ts b/packages/angular_devkit/build_webpack/test/angular-app/src/main.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { platformBrowser } from '@angular/platform-browser';
 import { AppModule } from './app/app.module';
 
-platformBrowserDynamic()
+platformBrowser()
   .bootstrapModule(AppModule)
   .catch((err) => console.log(err));
diff --git a/packages/schematics/angular/workspace/files/package.json.template b/packages/schematics/angular/workspace/files/package.json.template
@@ -15,7 +15,6 @@
     "@angular/core": "<%= latestVersions.Angular %>",
     "@angular/forms": "<%= latestVersions.Angular %>",
     "@angular/platform-browser": "<%= latestVersions.Angular %>",
-    "@angular/platform-browser-dynamic": "<%= latestVersions.Angular %>",
     "@angular/router": "<%= latestVersions.Angular %>",
     "rxjs": "<%= latestVersions['rxjs'] %>",
     "tslib": "<%= latestVersions['tslib'] %>",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/legacy-cli/e2e/assets/ssr-project-webpack/package.json b/tests/legacy-cli/e2e/assets/ssr-project-webpack/package.json
@@ -20,7 +20,6 @@
     "@angular/core": "^20.0.0-next.0",
     "@angular/forms": "^20.0.0-next.0",
     "@angular/platform-browser": "^20.0.0-next.0",
-    "@angular/platform-browser-dynamic": "^20.0.0-next.0",
     "@angular/platform-server": "^20.0.0-next.0",
     "@angular/router": "^20.0.0-next.0",
     "@angular/ssr": "^20.0.0-next.0",
diff --git a/tests/legacy-cli/e2e/assets/ssr-project-webpack/src/main.ts b/tests/legacy-cli/e2e/assets/ssr-project-webpack/src/main.ts
@@ -1,7 +1,5 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import { platformBrowser } from '@angular/platform-browser';
 import { AppModule } from './app/app.module';
 
-
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowser().bootstrapModule(AppModule)
   .catch(err => console.error(err));
diff --git a/tests/legacy-cli/e2e/tests/build/server-rendering/express-engine-ngmodule.ts b/tests/legacy-cli/e2e/tests/build/server-rendering/express-engine-ngmodule.ts
@@ -69,11 +69,11 @@ export default async function () {
     'projects/test-project-two/src/app/app.css': `div { color: #000 }`,
     'projects/test-project-two/src/styles.css': `* { color: #000 }`,
     'projects/test-project-two/src/main.ts': `
-      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+      import { platformBrowser } from '@angular/platform-browser';
       import { AppModule } from './app/app.module';
 
       (window as any)['doBootstrap'] = () => {
-        platformBrowserDynamic()
+        platformBrowser()
           .bootstrapModule(AppModule)
           .catch((err) => console.error(err));
       };
