Universal Starter | Tips and Tricks

2016-12-23 13:39:46

Some tips and tricks for Universal Starter

1- Lazy Loading not working as we expect on it in Universal Starter. Lazy loading loads necessary bundle(s) in related route.

for example:

if your site has multi routes such as home,users,admin and register and if you be in /users it will just loads main bundle and UserModule not all modules. 

But in Universal Starter sets load all modules as default. In order to change it open browser.module.ts and find

RouterModule.forRoot([], { useHash: false, preloadingStrategy: IdlePreload }),

and just replace with

RouterModule.forRoot([], { useHash: false}),

2-Universal Starter needs to Droid Sans font but with lity heavy and makes interrupt in page loading. If you wont use it you can open client.ts and client.aot.ts and find 

loadWebFont({
google: {
families: ['Droid Sans']
}
})

and puts this code block to comment /* laodWebFont .... ['Droid Sans']}})*/.

3-Working with dom object

if you want to elementRef.nativeElement.querySelector(".anyClass"), getElementById() and any other selector you must do 2 things,

a-implement ngAfterViewInit to your component or directive

b-check that isBrowser is false or true

import { isBrowser, isNode } from 'angular2-universal'
@Directive({
selector: "[my-custom-directive]"
})

export class MyCustomDirective implements AfterViewInit{

public usersDom:any; constructor(public elem:ElementRef, public renderer:Renderer) {

} ngAfterViewInit() {
if(isBrowser==true)
{
this.domObjs = this.elem.nativeElement;
this.usersDom = this.domObjs.querySelectorAll(".users");
}
}

}

Happy Coding!

Tags Cloud

Angular 2

Universal

Prerender

Server

side

rendering

webpack

starter

ng2 isomorphic