Skip to content

Latest commit

 

History

History
37 lines (31 loc) · 2.29 KB

gotchas.md

File metadata and controls

37 lines (31 loc) · 2.29 KB

Universal "Gotchas"

When building Universal components in Angular there are a few things to keep in mind.

  • window, document, navigator, and other browser types - do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work. You do have some options, if you truly need some of this functionality:

    • If you need to use them, consider limiting them to only your client and wrapping them situationally. You can use the Object injected using the PLATFORM_ID token to check whether the current platform is browser or server.
     import { PLATFORM_ID } from '@angular/core';
     import { isPlatformBrowser, isPlatformServer } from '@angular/common';
     
     constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }
     
     ngOnInit() {
       if (isPlatformBrowser(this.platformId)) {
          // Client only code.
          ...
       }
       if (isPlatformServer(this.platformId)) {
         // Server only code.
         ...
       }
     }
    • Try to limit or avoid using setTimeout. It will slow down the server-side rendering process. Make sure to remove them in the ngOnDestroy method of your Components.
    • Also for RxJs timeouts, make sure to cancel their stream on success, for they can slow down rendering as well.
  • Don't manipulate the nativeElement directly. Use the Renderer2. We do this to ensure that in any environment we're able to change our view.

constructor(element: ElementRef, renderer: Renderer2) {
  renderer.setStyle(element.nativeElement, 'font-size', 'x-large');
}
  • The application runs XHR requests on the server & once again on the Client-side (when the application bootstraps)
    • Use a cache that's transferred from server to client (TODO: Point to the example)
  • Know the difference between attributes and properties in relation to the DOM.
  • Keep your directives stateless as much as possible. For stateful directives, you may need to provide an attribute that reflects the corresponding property with an initial string value such as url in img tag. For our native element the src attribute is reflected as the src property of the element type HTMLImageElement.