@angular/platform-browser vs. @angular/platform-browser-dynamic

Question

In the newer examples (seeds, angular.io,..) there is another import for the bootstrapping process: @angular/platform-browser-dynamic.

Could someone explain what the differences are between that and @angular/platform-browser?

There is no information on the official angular.io website yet.

Duntson

Answer 1

If you look closely at the history of the angular2 then you will find there are two version 1) beta version 2) release candidate version. At present it is r.c 3 (release candidate 3). Release candidate version means bug fix releases before the final release. So when angular2 moves to first release candidate version(rc1) from beta version then it make some directory change... for example

angular2/core---->@angular/core
angular2/platform/browser------>@angular/platform-browser-dynamic

I add a snape here

for more information please visit

https://github.com/angular/angular/blob/master/CHANGELOG.md

i Hope you will find your answer. Thanks

Amphibrach

While the history is interesting, the text of this answer doesn't address the question asked, and it incorrectly implies that the angular2/platform/browser project was renamed to @angular/platform-browser-dynamic, as @Duntson pointed out. – Whitsuntide

Answer 2

The difference between platform-browser-dynamic and platform-browser is the way your Angular app will be compiled.

Using the dynamic platform makes Angular send the just-in-time compiler to the front-end along with your application. Which means your application is being compiled client-side.

On the other hand, using platform-browser leads to an ahead-of-time pre-compiled version of your application being sent to the browser. Which usually means a significantly smaller package is sent to the browser.

The documentation for bootstrapping explains it in more detail.

Minier

Agree with Sunil. I think this answer excels because it includes a link to the docs -- and I think the docs are very relevant & clear. The docs use these acronyms/terms, which we should reinforce here: "Ahead-of-time" = "AOT" = "Static" vs "Just-in-Time"="JIT"="Dynamic". And the docs have more detail, but they are still are simple and direct, just like niliuz' answer! Read them! – Bullis

So, does it mean that if I use platform-browser-dynamic then I don't need to include platform-browser? – Deel

I don't think this answer is relevant anymore. JIT or AOT switch is set through CLI when you run ng build. In fact, in angular 9 AOT is enabled by default. Importing platform-browser-dynamic or platform-browser is irrelevant in context of AOT/JIT switching. – Bartholemy

Hi Pavel, thank you for pointing out the latest changes n Angular 9, here is the docs link for the "AOT is enabled by default" – Breadth

I don't see a difference in bundle size by switching between dynamic or not. This is on Angular 12. Might be that tree-shaking is removing anything not used...or Angular just doesn't include it if you're using AOT. – Socio

Answer 3

• platform-browser contains code shared for browser execution (DOM thread, WebWorker)
• platform-browser-dynamic contains the client side code that processes templates (bindings, components, ...) and reflective dependency injection

When the offline template compiler is used, platform-browser-dynamic isn't necessary anymore because all reflective access and metadata are converted to generated code.

If you still want to dynamically generate components like shown in https://mcmap.net/q/263452/-how-to-realize-website-with-hundreds-of-pages-in-angular2 then you need the dynamic stuff.

Vamp

Great answer, thank you Gunter! It would be also nice to add the bundle size difference of including one vs the other as I heard the platform browser dynamic adds more kbs to the final bundle size. – Breadth

I think the answer is a bit outdated in regards to terminology. But basically with dynamic components, you need some compiler that compiles components at runtime, which of course adds to the bundle size. If you do not use dynamic components, then everything has to be compiled statically, but then the component compiler does not need to be added to the bundle. Dynamic components are components where you generate the components template at runtime (string concatenation, download from other servers, ...) and then compile it to an Angular components that you can add to a view. – Obtrude