path to the module to load, in the form of a string value. • Why a string value? The reason is that we cannot use the component property as you do with non-lazy routes, because that implies importing the according component type from a file, thus “hard-wiring” it together 5 New syntax from angular 8 loadChildren: () => import('./search/search.module').then(mod => mod.SearchModule)
modules should be bundled separately by adding the path of the lazy module to the lazyModules array of angular.json. • Use NgModuleFactory Loader to load the corresponding module JS file at runtime and boot it 8
Directive to mark valid insertion points in the template. ▪ use directive on template ▪ use ComponentFactoryResolver to add components dynamically. ▪ ensure that the compiler still generates a factory, add dynamically loaded components to the NgModule's entryComponents array
for legacy browsers and one (with reduced polyfills) for modern evergreen browsers. ▪The type="module" will be interpreted by modern browsers, loading the es2015optimized bundles, while legacy browsers will fallback to the nomodule script tags. This allows to save ~7-20% of the current bundle size. And the best of all? No server-side infrastructure changes are needed. This is entirely handled by the browser 12
custom elements from Angular components (web component) ▪Expose as web component so that you can use them everywhere every framework (i.e. expose custom elements) ▪To make it work with legacy browser, we must to install the polyfill. One of these polyfill which come from Polymer project from google ▪Angular Elements are not just about compiling them into standalone JS files to be used outside of Angular but also use for dynamically loading components. 13
with our Angular Element inside a separate module Declare the module to be bundled separately // angular.json"lazyModules": ["src/app/projects/ProjectsModule"]
the ivy: node_modules/.bin/ngc -p tsconfig.app.json ▪Ivy compare with ViewEngine : • No more factory files ABCComponent.ngfactory.js • The factory became a static method inside the component def • All Angular decorators now have their static function inside the component class: @Component —> ngComponentDef @Injectable —> ngInjectableDef @Directive —> ngDirectiveDef • The set of instructions has changed so it can be tree shakable and will be much smaller. 24
what changed ▪Compiling them only requires local information ▪If Component changes, it’s dependencies doesn’t have to recompile => Locality principle 25
stack traces ▪Setting breakpoints in Templates ▪Try version 9 today ! npm i –g @angular/cli@next ▪Angular CLI 9.0.0-next.0 – Ivy by default ! ng new my-app 28
HOC is a function which gets a component and returns a component but also affecting the component in between. ▪ “const injector = ɵɵdirectiveInject(INJECTOR);” : get the injector without the Angular DI ▪ used the HOC function to create a new “life cycle” function named afterViewLoad that if it exists on the original component, it will be invoked after the lazy component got rendered ▪ ɵdetectChanges(this): triggering change detection manually (ɵ that it is currently still part of Ivy’s private API.) ▪ ɵrenderComponent(ProjectListComponent, { host: this }): The passed host is the DOM element that will represent the component. In our case the Custom Element itself is the host, hence we pass just this.
https://stackblitz.com/edit/lazy-load-angular-component-with- ivy?file=index.ts ▪DEMO RENDERING A COMPONENT WITH IVY https://stackblitz.com/edit/rendering-an-angular-componentivy-without- complete-app ▪Future of Angular: • Standalone components • Easier dynamoc loading of modules & Component • HOC • Angular element • and more ! 32
hide2kano
.png){kind=avatar}
shuntatoda
mickey_kubo
frievea
ainischool
jonoalderson
mugiiicha
bernhardsvt
mimoza60
behomazn
cbtlibrary
emna__ayadi
konakalab
chikuwait
ryanjones
brad_frost
aemeredith
techseoconnect
greggifford
rkendrick25
reverentgeek
dugsong
leimatthew05
