Using Angular 2 Components in a Non Angular app

on YouTube ↗15m

" summary

Claim: migrate a 700k-line jQuery app to Angular piecemeal by dynamically loading Angular components into the existing JS shell, cutting dedicated rewrite effort to regular sprints. Implementation uses entryComponents, DOM insertion, ComponentFactoryResolver to create ComponentRef, applicationRef.attachView to enable change detection, and public interfaces or Google Closure-style events for JS↔Angular comms. Team reports it works in production with no significant perf cost when using ahead-of-time compilation.

AI-written summary · about

" chapters (12)

1. 0:00Introduction
2. 0:58What do I do
3. 2:58piecemeal migration
4. 3:49loading static components
5. 6:11component factory
6. 8:16attached view
7. 8:59load component
8. 9:26how it works
9. 11:43why is it helpful
10. 11:53why is it not helpful
11. 12:07inputs
12. 12:41Wrap up

" related talks

• 05mMigrating a Portfolio of Front-End Apps to AngularCraig Shipton, Mike Smith · AngularConnect 2017
• 20mBuilding Platforms with AngularJen Bourey · ng-conf 2015
• 23mUpgrading to Angular without ngUpgradeErin Coughlan · Angular Connect 2018
• 20mUpgrading Enterprise Angular ApplicationsVictor Savkin · ng-conf 2017
• 41mFrom .component() to @ComponentTodd Motto · Angular Camp 2016
• 42mHow Angular2 can improve your Angular1 apps todayNir Kaufman · Codemotion Rome 2016
• 24mGetting to Angular 2Jen Bourey · ng-europe 2016
• 20mEngineering Scalable Angular ComponentsAlex Rickabaugh · EnterpriseNG 2021