@angular/platform-browser-dynamic

What is @angular/platform-browser-dynamic?

The @angular/platform-browser-dynamic npm package provides methods for bootstrapping Angular applications in a browser environment with Just-In-Time (JIT) compilation. This package is typically used for development purposes, as it compiles the application dynamically in the browser, allowing for a faster development cycle. However, for production builds, Ahead-Of-Time (AOT) compilation is preferred for performance reasons, which is handled by the @angular/platform-browser package.

What are @angular/platform-browser-dynamic's main functionalities?

Bootstrapping Angular Modules

This code snippet demonstrates how to bootstrap an Angular module using the platformBrowserDynamic function. It imports the AppModule and then calls the bootstrapModule method to initialize the application.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Other packages similar to @angular/platform-browser-dynamic

@angular/platform-browser

This package provides tools for running Angular applications in a web browser with Ahead-Of-Time (AOT) compilation. Unlike @angular/platform-browser-dynamic, it is optimized for production by pre-compiling templates to make the application load faster and be more performant.

react-dom

Similar to @angular/platform-browser-dynamic for Angular, react-dom is used for bootstrapping and rendering React applications in the browser. It provides the entry point to the DOM and server renderers for React and can be considered an equivalent in the React ecosystem.

vue

The Vue.js framework has a similar package for bootstrapping and rendering Vue applications in the browser. It provides the functionality to create and mount the root Vue instance to the DOM, similar to how Angular applications are bootstrapped with @angular/platform-browser-dynamic.

README

Angular

The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.

Usage information and reference details can be found in Angular documentation.

License: MIT

Changelog

19.0.0 (2024-11-19)

Blog post: https://blog.angular.dev/meet-angular-v19-7b29dfd05b84

Breaking Changes

compiler

• this.foo property reads no longer refer to template context variables. If you intended to read the template variable, do not use this..
• changes to CSS selectors parsing where introduced, mainly to: pseudo selectors :where() and :is(), parsing of :host and host-context, parsing selectors within pseudo selector arguments (for instance comma separated selectors). These changes could lead to a different specificity of the resulting selectors and/or previously broken selectors being applied now, for example :where(:host) used to transform to :where()[ng-host] and is being :where([ng-host]) now. Unlike the previous outcome, the new result can target elements and therefore could lead to breakages.

core

• Angular directives, components and pipes are now standalone by default.

  • Specify standalone: false for declarations that are currently declared in @NgModules.
  • ng update for v19 will take care of this automatically.

• TypeScript versions less than 5.5 are no longer supported.

• Timing changes for effect API (in developer preview):

  • effects which are triggered outside of change detection run as part of the change detection process instead of as a microtask. Depending on the specifics of application/test setup, this can result in them executing earlier or later (or requiring additional test steps to trigger; see below examples).

  • effects which are triggered during change detection (e.g. by input signals) run earlier, before the component's template.

• ExperimentalPendingTasks has been renamed to PendingTasks.

• The autoDetect feature of ComponentFixture will now attach the fixture to the ApplicationRef. As a result, errors during automatic change detection of the fixture be reported to the ErrorHandler. This change may cause custom error handlers to observe new failures that were previously unreported.

• createComponent will now render default fallback with empty projectableNodes.

  • When passing an empty array to projectableNodes in the createComponent API, the default fallback content of the ng-content will be rendered if present. To prevent rendering the default content, pass document.createTextNode('') as a projectableNode.

  // The first ng-content will render the default fallback content if present
  createComponent(MyComponent. { projectableNodes: [[], [secondNode]] });
  
  // To prevent projecting the default fallback content:
  createComponent(MyComponent. { projectableNodes: [[document.createTextNode('')], [secondNode]] });
  
  

• Errors that are thrown during ApplicationRef.tick will now be rethrown when using TestBed. These errors should be resolved by ensuring the test environment is set up correctly to complete change detection successfully. There are two alternatives to catch the errors:

  • Instead of waiting for automatic change detection to happen, trigger it synchronously and expect the error. For example, a jasmine test could write expect(() => TestBed.inject(ApplicationRef).tick()).toThrow()
  • TestBed will reject any outstanding ComponentFixture.whenStable promises. A jasmine test, for example, could write expectAsync(fixture.whenStable()).toBeRejected().

  As a last resort, you can configure errors to not be rethrown by setting rethrowApplicationErrors to false in TestBed.configureTestingModule.

• The timers that are used for zone coalescing and hybrid mode scheduling (which schedules an application state synchronization when changes happen outside the Angular zone) will now run in the zone above Angular rather than the root zone. This will mostly affect tests which use fakeAsync: these timers will now be visible to fakeAsync and can be affected by tick or flush.

• The deprecated factories property in KeyValueDiffers has been removed.

elements

• as part of switching away from custom CD behavior to the hybrid scheduler, timing of change detection around custom elements has changed subtly. These changes make elements more efficient, but can cause tests which encoded assumptions about how or when elements would be checked to require updating.

localize

• The name option in the ng add @localize`` schematic has been removed in favor of the project option.

platform-browser

• The deprecated BrowserModule.withServerTransition method has been removed. Please use the APP_ID DI token to set the application id instead.

router

• The Router.errorHandler property has been removed. Adding an error handler should be configured in either withNavigationErrorHandler with provideRouter or the errorHandler property in the extra options of RouterModule.forRoot. In addition, the error handler cannot be used to change the return value of the router navigation promise or prevent it from rejecting. Instead, if you want to prevent the promise from rejecting, use resolveNavigationPromiseOnError.
• The return type of the Resolve interface now includes RedirectCommand.

common

| Commit | Type | Description | | -- | -- | -- | | 24c6373820 | feat | add optional rounded transform support in cloudinary image loader (#55364) | | 50f08e6c4b | feat | automatically use sizes auto in NgOptimizedImage (#57479) | | 13c13067bc | feat | disable keyvalue sorting using null compareFn (#57487) |

compiler

| Commit | Type | Description | | -- | -- | -- | | a2e4ee0cb3 | feat | add diagnostic for unused standalone imports (#57605) | | 0c9d721ac1 | feat | add support for the typeof keyword in template expressions. (#58183) | | 09f589f000 | fix | this.a should always refer to class property a (#55183) | | 98804fd4be | fix | add more specific matcher for hydrate never block (#58360) | | b25121ee4a | fix | avoid having to duplicate core environment (#58444) | | 560282aa9b | fix | control flow nodes with root at the end projected incorrectly (#58607) | | 2be161d015 | fix | fix :host parsing in pseudo-selectors (#58681) | | 806a61b5a6 | fix | fix multiline selectors (#58681) | | a3cb530d84 | fix | handle typeof expressions in serializer (#58217) | | ba4340875a | fix | ignore placeholder-only i18n messages (#58154) | | e5d3abb298 | fix | resolve :host:host-context(.foo) (#58681) | | 80f56954ce | fix | transform chained pseudo-selectors (#58681) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | d9687f43dd | feat | 'strictStandalone' flag enforces standalone (#57935) | | 9e87593055 | feat | ensure template style elements are preprocessed as inline styles (#57429) | | 231e6ff6ca | feat | generate the HMR replacement module (#58205) | | dbe612f2cd | fix | disable standalone by default on older versions of Angular (#58405) | | d4d76ead80 | fix | do not fail fatal when references to non-existent module are discovered (#58515) | | 33fe252c58 | fix | do not report unused declarations coming from an imported array (#57940) | | fb44323c51 | fix | incorrectly generating relative file paths on case-insensitive platforms (#58150) | | 22cd6869ef | fix | make the unused imports diagnostic easier to read (#58468) | | 9bbb01c85e | fix | report individual diagnostics for unused imports (#58589) | | 4716c3b966 | perf | reduce duplicate component style resolution (#57502) |

core

| Commit | Type | Description | | -- | -- | -- | | 6ea8e1e9aa | feat | Add a schematics to migrate to standalone: false. (#57643) | | 3ebe6b4ad4 | feat | Add async run method on ExperimentalPendingTasks (#56546) | | 69fc5ae922 | feat | Add incremental hydration public api (#58249) | | 8ebbae88ca | feat | Add rxjs operator prevent app stability until an event (#56533) | | 19edf2c057 | feat | add syntactic sugar for initializers (#53152) | | c93b510f9b | feat | allow passing undefined without needing to include it in the type argument of input (#57621) | | ab25a192ba | feat | allow running output migration on a subset of paths (#58299) | | fc59e2a7b7 | feat | change effect() execution timing & no-op allowSignalWrites (#57874) | | 8bcc663a53 | feat | drop support for TypeScript 5.4 (#57577) | | 18d8d44b1f | feat | experimental resource() API for async dependencies (#58255) | | 9762b24b5e | feat | experimental impl of rxResource() (#58255) | | 6b8c494d05 | feat | flipping the default value for standalone to true (#58169) | | e6e5d29e83 | feat | initial version of the output migration (#57604) | | be2e49639b | feat | introduce afterRenderEffect (#57549) | | ec386e7f12 | feat | introduce debugName optional arg to framework signal functions (#57073) | | 8311f00faa | feat | introduce the reactive linkedSignal (#58189) | | 1b1519224d | feat | mark input, output and model APIs as stable (#57804) | | a7eff3ffaa | feat | mark signal-based query APIs as stable (#57921) | | a1f229850a | feat | migrate ExperimentalPendingTasks to PendingTasks (#57533) | | 3f1e7ab6ae | feat | promote outputFromObservable & outputToObservable to stable. (#58214) | | 97c44a1d6c | feat | Promote takeUntilDestroyed to stable. (#58200) | | e5adf92965 | feat | stabilize @let syntax (#57813) | | b063468027 | feat | support TypeScript 5.6 (#57424) | | 819ff034ce | feat | treat directives, pipes, components as by default (#58229) | | ee426c62f0 | fix | allow signal write error (#57973) | | c095679f92 | fix | avoid breaking change with apps using rxjs 6.x (#58341) | | 71ee81af2c | fix | clean up event contract once hydration is done (#58174) | | f03d274e87 | fix | ComponentFixture autoDetect feature works like production (#55228) | | 950a5540f1 | fix | Ensure the ViewContext is retained after closure minification (#57903) | | 7b1e5be20b | fix | fallback to default ng-content with empty projectable nodes. (#57480) | | 0300dd2e18 | fix | Fix fixture.detectChanges with autoDetect disabled and zoneless (#57416) | | 5fe57d4fbb | fix | fixes issues with control flow and incremental hydration (#58644) | | 51933ef5a6 | fix | prevent errors on contract cleanup (#58614) | | fd7716440b | fix | Prevents trying to trigger incremental hydration on CSR (#58366) | | 656b5d3e78 | fix | Re-assign error codes to be within core bounds (<1000) (#53455) | | 6e0af6dbbb | fix | resolve forward-referenced host directives during directive matching (#58492) | | 468d3fb9b1 | fix | rethrow errors during ApplicationRef.tick in TestBed (#57200) | | 226a67dabb | fix | Schedulers run in zone above Angular rather than root (#57553) | | 97fb86d331 | perf | set encapsulation to None for empty component styles (#57130) | | c15ec36bd1 | refactor | remove deprecated factories Property in KeyValueDiffers (#58064) |

elements

| Commit | Type | Description | | -- | -- | -- | | fe5c4e086a | fix | support output()-shaped outputs (#57535) | | 0cebfd7462 | fix | switch to ComponentRef.setInput & remove custom scheduler (#56728) |

forms

| Commit | Type | Description | | -- | -- | -- | | 3e7d724037 | feat | add ability to clear a FormRecord (#50750) | | 18b6f3339f | fix | fix FormRecord type inference (#50750) |

http

| Commit | Type | Description | | -- | -- | -- | | 4b9accdf16 | feat | promote withRequestsMadeViaParent to stable. (#58221) | | 057cf7fb6b | fix | preserve all headers from Headers object (#57802) |

language-service

| Commit | Type | Description | | -- | -- | -- | | 8da9fb49b5 | feat | add code fix for unused standalone imports (#57605) | | 1f067f4507 | feat | add code reactoring action to migrate @Input to signal-input (#57214) | | 56ee47f2ec | feat | allow code refactorings to compute edits asynchronously (#57214) | | bc83fc1e2e | feat | support converting to signal queries in VSCode extension (#58106) | | 5c4305f024 | feat | support migrating full classes to signal inputs in VSCode (#57975) | | 6342befff8 | feat | support migrating full classes to signal queries (#58263) | | 7ecfd89592 | fix | The suppress diagnostics option should work for external templates (#57873) |

localize

| Commit | Type | Description | | -- | -- | -- | | 9c3bd1b5d1 | refactor | remove deprecated name option. (#58063) |

migrations

| Commit | Type | Description | | -- | -- | -- | | dff4de0f75 | feat | add a combined migration for all signals APIs (#58259) | | b6bc93803c | feat | add schematic to migrate to signal queries (#58032) | | 2bfc64daf1 | feat | expose output as function migration (#58299) | | 59fe9bc772 | feat | introduce signal input migration as ng generate schematic (#57805) | | 90c7ec39a0 | fix | inject migration always inserting generated variables before super call (#58393) | | 7a65cdd911 | fix | inject migration not inserting generated code after super call in some cases (#58393) | | c1aa411cf1 | fix | properly resolve tsconfig paths on windows (#58137) | | e26797b38e | fix | replace removed NgModules in tests with their exports (#58627) |

platform-browser

| Commit | Type | Description | | -- | -- | -- | | c36a1c023b | fix | correctly add external stylesheets to ShadowDOM components (#58482) | | 5c61f46409 | refactor | remove deprecated BrowserModule.withServerTransition method (#58062) |

platform-server

| Commit | Type | Description | | -- | -- | -- | | 9e82559de4 | fix | destroy PlatformRef when error happens during the bootstrap() phase (#58112) |

router

| Commit | Type | Description | | -- | -- | -- | | f271021e19 | feat | Add routerOutletData input to RouterOutlet directive (#57051) | | b2790813a6 | fix | Align RouterModule.forRoot errorHandler with provider error handler (#57050) | | a49c35ec76 | fix | remove setter for injector on OutletContext (#58343) | | 7436d3180e | fix | Update Resolve interface to include RedirectCommand like ResolveFn (#57309) |

service-worker

| Commit | Type | Description | | -- | -- | -- | | 8ddce80a0b | feat | allow specifying maxAge for entire application (#49601) | | 1479af978c | feat | finish implementation of refreshAhead feature (#53356) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="18.2.12"></a>