Universal Starter

2016-12-21 00:36:46

Universal Starter for Angular 2 + Webpack

As you may know one of the most important part of web applications developing with new Javascript (or Typescript) frameworks such as Angular 2 is SEO.

In Angular 2 there a just one index.html that puts all application between app tag.

When search engines crawling on your website couldn't find any meaningful on it and just index empty page on your app.

In AngularJS there is a way to prevent empty page indexing that provides by Prerender.io.

I would like to Introduce same but more complex way in Angular 2 by Universal.

Unfortunately the documentation is out of date to use but you can find useful updates in Universal Starter in Github.

Before start developing your applicatin please pay attention that:

AOT Don'ts

The following are some things that will make AOT compile fail.

  • Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
  • Don’t use default exports.
  • Don’t use form.controls.controlName, use form.get(‘controlName’)
  • Don’t use control.errors?.someError, use control.hasError(‘someError’)
  • Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
  • Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public
  • if you need run timer such as setTimeout or setInterval or manipulate dom objects in your ng2 application you must check that your code running on browser or node. 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 main.client and wrapping them situationally with the imported isBrowser / isNode features from Universal. import { isBrowser, isNode } from 'angular2-universal';
  • Don't manipulate the nativeElement directly. Use the Renderer. We do this to ensure that in any environment we're able to change our view.
    constructor(element: ElementRef, renderer: Renderer) {
      renderer.setElementStyle(element.nativeElement, 'font-size', 'x-large');
  • Don't use Guard or Resolver as possible as you can because it cause rerendering page, I suggest do it in constructor.

My studying on Universal to be continued and I will appreciate who contributed with me to solve better this framework.




Tags Cloud

Angular 2