57

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

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

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

isherwood
  • 52,576
  • 15
  • 105
  • 143

3 Answers3

69

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

Using the dynamic platform makes angular sending the Just-in-Time compiler to the front-end as well as your application. Which means your application is being compiled on client-side.

On the other hand, using platform-browser leads to an Ahead-of-Time pre-compiled version of your applicatiion being sent to the browser. Which usually means a significantally smaller package being sent to the browser.

The angular2-documentation for bootstrapping at https://angular.io/docs/ts/latest/guide/ngmodule.html#!#bootstrap explains it in more detail.

niliuz
  • 691
  • 5
  • 2
  • 8
    this is the most accurate answer. This explains the fundamental difference, which is the JIT vs ahead-of-time compilation. Other answers to this question are misleading, and over complicating. – Sunil Purushothaman Nov 30 '16 at 02:44
  • 5
    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! – The Red Pea Mar 17 '17 at 06:50
  • So, does it mean that if I use `platform-browser-dynamic` then I don't need to include `platform-browser`? – Saeed Neamati Jan 08 '18 at 11:00
  • 1
    documentation link is broken – AJ Richardson May 15 '18 at 15:09
  • 5
    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. – Pavel Gurecki May 07 '20 at 14:41
  • Hi Pavel, thank you for pointing out the latest changes n Angular 9, [here](https://angular.io/guide/aot-compiler) is the docs link for the "AOT is enabled by default" – Rov Mar 01 '21 at 23:17
  • 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. – elliottregan Sep 30 '21 at 22:07
67
  • 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://stackoverflow.com/a/36017067/217408 then you need the dynamic stuff.

Community
  • 1
  • 1
Günter Zöchbauer
  • 558,509
  • 191
  • 1,911
  • 1,506
  • 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. – Rov Mar 01 '21 at 23:09
  • 1
    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. – Günter Zöchbauer Mar 02 '21 at 07:07
4

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 enter image description here

for more information please visit

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

i Hope you will find your answer. Thanks

vignesh
  • 37
  • 1
  • 8
himadri
  • 596
  • 3
  • 19
  • 15
    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 @user2227400 pointed out. – Aejay Oct 04 '16 at 23:17