angular-universal

We have a simple Angular Universal app using angular/cli: 1.4.3 (and node: 6.9.5). We manage to configure the server side view. When the dom is ready, we switch to a client view. But, the switch is made before we collect all the data needed from the API. So there is a moment right after the switch when the page is displayed without the data. Is there any way to trigger manually the switch between the 2 states? In this case, we want to display the client view after we get the response from the API. Here is the simplified example we made for this: import { Component, OnInit } from '@angular/core

I am using @angular v4.0.3 and webpack 2.2.0. It was working fine using Auler post but as I included localStorage it stopped working. Is there any way to make it work or any module for localStorage in angular universal A good way is to make localStorage an injectable and provide different implementations for it. An abstract class that reflects Storage API can be used as a token: export abstract class LocalStorage { readonly length: number; abstract clear(): void; abstract getItem(key: string): string | null; abstract key(index: number): string | null; abstract removeItem(key: string): void;

My beautiful server-side rendered Angular 5 application (using Universal with a node express.js server) is having problems with styling during the bootstrap (preboot) phase. The global CSS stylesheet seems to be fine, but the component-specific styles disappear once bootstrapping begins. Example: Component styling with javascript disabled (pure html and css from the server): Component styling with javascript enabled and before app starts bootstrapping (still fine, still pure html and css from the server): Component styling during bootstrapping transition phase (terrible because the component

I have setup and used successfully Angular5 + SSR. It is still pretty nice. All components works well on SSR and Non-SSR. And there are some services which calls external HTTP get apis to get some data. Of course it work well on a Non-SSR mode. But, the problem is that on SSR, node server does dot support to fetch and render the data. I can only see the fetched data after client side fetching and rendering. import {Injectable} from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import 'rxjs/add/operator/map'; import {Observable} from "rxjs"; const httpOptions

I'm searching a fully working example about SEO or Metatags with Angular 2 using Angular universal to render on server side (to be recognize by facebook, twiter, and other metatags) but I had not success.. I found multiple articles, but there are incomplete (no all source code is available) or oldest (not compile with the latest versions): a) blog.devcross.net/2016/04/17/angular-2-universal-seo-friendly-website/ NOTE: Excelent post with source code, but It's not working. b) builtvisible.com/universal-angular-2-server-side-rendering-seo-crawl-friendliness/ NOTE: Very usefull but with no source

Are there any examples of Angular Universal with WebSockets? Serverside rendering does not know wat a WebSocket object is in my case. And if I use socket.io the node server hangs when trying to make a connections. Some additional information about the problem: I downloaded angular-universal-starter from github: https://github.com/angular/universal-starter Which works fine out of the box running 'npm install' and 'npm start' But after i added the following code to AppComponent export class AppComponent implements OnInit { ngOnInit() { let webSocket = new WebSocket("----server url----") } } I