-
Notifications
You must be signed in to change notification settings - Fork 813
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## Why? - During Angular universal application loading, the API requests were running even if the data was already rendered from the server. - The router was flickering on angular universal first page load. - Product detail page shown as blank when data is fetching from api. ## This change addresses the need by: - added state transfer interceptor to check for stored data in state and avoid api calls if data already sent from SSR server - Fixed route resolve issue for product detail - Bug fix for app route flicker on universal boot. Fix shown in this [angular Issue.](angular/angular#15716 (comment))
- Loading branch information
Showing
68 changed files
with
379 additions
and
260 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,4 +4,4 @@ | |
| "default": "angularspree", | ||
| "staging": "angularspree" | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,39 @@ | ||
| { | ||
| "index": "/index.html", | ||
| "assetGroups": [{ | ||
| "name": "app", | ||
| "installMode": "prefetch", | ||
| "resources": { | ||
| "files": [ | ||
| "/favicon.ico", | ||
| "/index.html", | ||
| "/*.css", | ||
| "/*.js" | ||
| ] | ||
| "dataGroups": [ | ||
| { | ||
| "name": "api-performance", | ||
| "urls": [ | ||
| "/products" | ||
| ], | ||
| "cacheConfig": { | ||
| "strategy": "freshness", | ||
| "maxSize": 100, | ||
| "maxAge": "3d" | ||
| } | ||
| } | ||
| }, { | ||
| "name": "assets", | ||
| "installMode": "lazy", | ||
| "updateMode": "prefetch", | ||
| "resources": { | ||
| "files": [ | ||
| "/assets/**" | ||
| ] | ||
| ], | ||
| "assetGroups": [ | ||
| { | ||
| "name": "app", | ||
| "installMode": "prefetch", | ||
| "resources": { | ||
| "files": [ | ||
| "/favicon.ico", | ||
| "/index.html", | ||
| "/*.css", | ||
| "/*.js" | ||
| ] | ||
| } | ||
| }, { | ||
| "name": "assets", | ||
| "installMode": "lazy", | ||
| "updateMode": "prefetch", | ||
| "resources": { | ||
| "files": [ | ||
| "/assets/**" | ||
| ] | ||
| } | ||
| } | ||
| }] | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { tap } from 'rxjs/operators'; | ||
| import { Observable, of } from 'rxjs'; | ||
| import { Injectable } from '@angular/core'; | ||
| import { | ||
| HttpRequest, | ||
| HttpHandler, | ||
| HttpEvent, | ||
| HttpInterceptor, | ||
| HttpResponse | ||
| } from '@angular/common/http'; | ||
| import { TransferStateService } from '../services/transfer-state.service'; | ||
|
|
||
| @Injectable() | ||
| export class TransferStateInterceptor implements HttpInterceptor { | ||
| constructor(private transferStateService: TransferStateService) { | ||
| } | ||
|
|
||
| intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { | ||
| /** | ||
| * Skip this interceptor if the request method isn't GET. | ||
| */ | ||
| if (req.method !== 'GET') { | ||
| return next.handle(req); | ||
| } | ||
|
|
||
| const cachedResponse = this.transferStateService.getCache(req.url); | ||
| if (cachedResponse) { | ||
| // A cached response exists which means server set it before. Serve it instead of forwarding | ||
| // the request to the next handler. | ||
| return of(new HttpResponse<any>({ body: cachedResponse })); | ||
| } | ||
|
|
||
| /** | ||
| * No cached response exists. Go to the network, and cache | ||
| * the response when it arrives. | ||
| */ | ||
| return next.handle(req).pipe( | ||
| tap(event => { | ||
| if (event instanceof HttpResponse) { | ||
| this.transferStateService.setCache(req.url, event.body); | ||
| } | ||
| }) | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { Inject, Injectable, PLATFORM_ID } from '@angular/core'; | ||
| import { TransferState, makeStateKey } from '@angular/platform-browser'; | ||
| import { isPlatformBrowser } from '@angular/common'; | ||
|
|
||
| /** | ||
| * Keep caches (makeStateKey) into it in each `setCache` function call | ||
| * @type {any[]} | ||
| */ | ||
| const transferStateCache: String[] = []; | ||
|
|
||
| @Injectable() | ||
| export class TransferStateService { | ||
| constructor(private transferState: TransferState, | ||
| @Inject(PLATFORM_ID) private platformId: Object, | ||
| // @Inject(APP_ID) private _appId: string | ||
| ) { | ||
| } | ||
|
|
||
| /** | ||
| * Set cache only when it's running on server | ||
| * @param {string} key | ||
| * @param data Data to store to cache | ||
| */ | ||
| setCache(key: string, data: any) { | ||
| if (!isPlatformBrowser(this.platformId)) { | ||
| transferStateCache[key] = makeStateKey<any>(key); | ||
| this.transferState.set(transferStateCache[key], data); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Returns stored cache only when it's running on browser | ||
| * @param {string} key | ||
| * @returns {any} cachedData | ||
| */ | ||
| getCache(key: string): any { | ||
| if (isPlatformBrowser(this.platformId)) { | ||
| const cachedData: any = this.transferState['store'][key]; | ||
| /** | ||
| * Delete the cache to request the data from network next time which is the | ||
| * user's expected behavior | ||
| */ | ||
| delete this.transferState['store'][key]; | ||
| return cachedData; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.