feat(Angular 5.0): update engine-etc for angular 5.0 & Domino

[MarkPieszak]

Fully-Functioning version updated to work with Angular 5.0-rc1.
Waiting until we merge updates to Aspnet-engine (in universal): angular/universal#825

Before officially merging into Master branch.

WIP - More updates to come

Closes #434
Closes #435
Closes #430
Closes #424

🎁 🍾

[isaacrlevin]

@MarkPieszak since this is working (great job by the way). Do we want to clean up that mast branch to be lean with this PR? I can wait till after to create one as well

[naveedahmed1]

A clean up is much needed!

[MarkPieszak]

Yes definitely 👍👍 If you want to take the branch for a spin and clean anything up just make commits right to this branch and we'll merge them all into master.
Then it'll be easier to do the "how-to's" that add more functionality (maybe in PRs we intentionally never merge (?))

[naveedahmed1]

@MarkPieszak can't we just replace the existing TransferHttp module with a simple interceptor like this? This way it seems more aligned with the theme of new HttpClientModule.

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse, HttpEventType } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import { TransferState } from './../modules/transfer-state/transfer-state';
import { isPlatformServer } from '@angular/common';

import { ORIGIN_URL } from './shared/constants/baseurl.constants';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {

    private isServer = isPlatformServer(this.platformId);

    constructor(
        @Inject(PLATFORM_ID) private platformId,
        protected transferState: TransferState,
        @Inject(ORIGIN_URL) private baseUrl: string) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let modifiedRequest: any;
        let url: string;

        let isLocalRequest: boolean = !req.url.startsWith('http');
        if (isLocalRequest) {

            url = (isLocalRequest ? this.baseUrl + req.url : req.url);

            // Skip cache check if the request method isn't GET.
            if (req.method == 'GET') {
                const cachedResponse = this.getFromCache(url);

                if (cachedResponse) {
                    // A cached response exists. Serve it instead of forwarding
                    // the request to the next handler.

                    let modifiedResponse = new HttpResponse<any>({ headers: cachedResponse.headers, body: cachedResponse.body, status: cachedResponse.status, statusText: cachedResponse.statusText, url: cachedResponse.url });
                    return Observable.of(modifiedResponse);
                }
            }

            // Clone the request to add the new header.
            modifiedRequest = req.clone({ headers: req.headers, url: url, body: req.body });
        }

        return next.handle(isLocalRequest ? modifiedRequest : req)
            .do((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    if (this.isServer) {
                        this.setCache(url, event);
                    }
                }
            });
    }

    private setCache(key, data) {
        return this.transferState.set(key, data);
    }

    private getFromCache(key): HttpResponse<any> | null {
        return this.transferState.get(key);
    }
}

And in our AppModule we just need to add CustomHttpInterceptor as provider.

[MarkPieszak]

We'll definitely be getting rid of the need to have TransferHttp locally, as we basically moved a similar one into Angular Core itself in 5.0. :)

As for an interceptor to auto-append the current base_url, we definitely might as well add it!

[isaacrlevin]

@MarkPieszak this is probably safe to merge since your PR in Universal is merged as well. Only thing left pending is the transferhttp stuff right?

Looking at this branch, I think all the features that are there are valuable, except maybe bootstrap. Maybe we just take Bootstrap and Translate out and leave Http, LazyLoading and Basic Component

Thoughts? If that sounds good, I can take care of that real quick

[naveedahmed1]

Below is the updated interceptor, which should work with Angular 5.

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse, HttpEventType } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import { TransferState } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';

import { ORIGIN_URL } from './shared/constants/baseurl.constants';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {

    private isServer = isPlatformServer(this.platformId);

    constructor(
        @Inject(PLATFORM_ID) private platformId,
        protected transferState: TransferState,
        @Inject(ORIGIN_URL) private baseUrl: string) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let modifiedRequest: any;
        let url: string;

        let isLocalRequest: boolean = !req.url.startsWith('http');
        if (isLocalRequest) {

            url = this.baseUrl + req.url;

            // Skip cache check if the request method isn't GET.
            if (req.method == 'GET') {
                const cachedResponse = this.getFromCache(url);

                if (cachedResponse) {
                    // A cached response exists. Serve it instead of forwarding
                    // the request to the next handler.

                    let modifiedResponse = new HttpResponse<any>({ headers: cachedResponse.headers, body: cachedResponse.body, status: cachedResponse.status, statusText: cachedResponse.statusText, url: cachedResponse.url });
                    return Observable.of(modifiedResponse);
                }
            }

            // Clone the request to add the new header.
            modifiedRequest = req.clone({ headers: req.headers, url: url, body: req.body });
        }

        return next.handle(isLocalRequest ? modifiedRequest : req)
            .do((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    if (this.isServer) {
                        this.setCache(url, event);
                    }
                }
            });
    }

    private setCache(key, data) {
        return this.transferState.set(key, data);
    }

    private getFromCache(key): HttpResponse<any> | null {
        return this.transferState.get(key, null as any);
    }
}

[MarkPieszak]

Sometimes yes, but in this case since it's an InjectionToken from completely outside of itself, we need to do get it via the Injector, otherwise you get the quite vague error:

ERROR in Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler.

[MarkPieszak]

@naveedahmed1 Good news, soon there will also be built in support for automatically adding relative path in Core :)
angular/angular#19224

Since we essentially do need them to make sure transfer stuff works.

[naveedahmed1]

That would be awesome! Meanwhile I am not able to successfully implement ServerTransferStateModule from Angular 5, can you please also take a look at #448

[MarkPieszak]

I didn't have much time today, but ServerTransferStateModule seems to break server-renders for the time being, I'm going to merge this into Master, and hopefully one of us can figure out what's causing that to break, and we can eventually get that in there as well! :)

[naveedahmed1]

@MarkPieszak can TransferHttpCacheModule ( https://github.com/angular/universal/tree/master/modules/common ) be used in this case?

It says:

This is the common Angular Universal module that is common across server-side rendering app irrespective of the rendering engine.

I tried adding it, though it doesn't break the app. but the requests are still rendered twice once on server and once on client.