feat(ng-lib): use GuardsCheckEnd instead of Navigationend. see #1529 (#…

…1533)

* feat(ng-lib): use GuardsCheckEnd instead of Navigationend. see #1529

ISSUES CLOSED: #1529

* fix(monorepo): add workaround for [#22606](angular/angular-cli#22606)

ISSUES CLOSED: #1529

* test(ng-lib): add test to check if tss works with route-resolvers

ISSUES CLOSED: #1529

.github/test-build/action.yml

@@ -71,11 +71,11 @@ runs:
         echo "install Scully"
         npx ng g @scullyio/init:ng-add --renderer puppeteer
         npx ng g @scullyio/init:blog
-        echo "build"
     - name: build and run
       shell: bash
       run: |
         cd ../demo
+        npx browserslist "> 10%" > .browserslistrc
         npx ng build
         echo "run Scully"
         npx scully --noPrompt

apps/sample-blog/src/app/app-routing.module.ts

@@ -47,6 +47,7 @@ const routes: Routes = [
     path: 'noScript',
     loadChildren: () => import('./noscript/noscript.module').then((m) => m.NoScriptModule),
   },
+  { path: 'tssr', loadChildren: () => import('./tss-resolver/tss-resolver.module').then((m) => m.TssResolverModule) },
   {
     path: '**',
     loadChildren: () => import('./pagenotfound/pagenotfound.module').then((m) => m.PagenotfoundModule),

apps/sample-blog/src/app/tss-resolver/tss-resolver-routing.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TssResolverComponent } from './tss-resolver.component';
+import { UserResolver } from './user.resolver';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TssResolverComponent,
+    resolve: {
+      user: UserResolver,
+    },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TssResolverRoutingModule {}

apps/sample-blog/src/app/tss-resolver/tss-resolver.component.html

@@ -0,0 +1,19 @@
+<section *ngIf="user$ | async as user; else loading">
+  <h4>User Data</h4>
+
+  <section id="user">
+    <label>Id</label>
+    <p>{{ user.id }}</p>
+    <label>Name</label>
+    <p>{{ user.name }}</p>
+    <label>email</label>
+    <p>{{ user.email }}</p>
+    <label>company</label>
+    <p>{{ user.company.name }}</p>
+  </section>
+
+  <strong>{{ user.company.catchPhrase }}</strong>
+</section>
+<ng-template #loading>
+  <section>Loading ...</section>
+</ng-template>

apps/sample-blog/src/app/tss-resolver/tss-resolver.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TssResolverComponent } from './tss-resolver.component';
+
+describe('TssResolverComponent', () => {
+  let component: TssResolverComponent;
+  let fixture: ComponentFixture<TssResolverComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TssResolverComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TssResolverComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/sample-blog/src/app/tss-resolver/tss-resolver.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { pluck, tap } from 'rxjs';
+
+@Component({
+  selector: 'scullyio-tss-resolver',
+  templateUrl: './tss-resolver.component.html',
+  styleUrls: ['./tss-resolver.component.css'],
+})
+export class TssResolverComponent implements OnInit {
+  user$ = this.route.data.pipe(pluck('user'));
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit(): void {}
+}

apps/sample-blog/src/app/tss-resolver/tss-resolver.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TssResolverRoutingModule } from './tss-resolver-routing.module';
+import { TssResolverComponent } from './tss-resolver.component';
+
+@NgModule({
+  declarations: [TssResolverComponent],
+  imports: [CommonModule, TssResolverRoutingModule],
+})
+export class TssResolverModule {}

apps/sample-blog/src/app/tss-resolver/user.resolver.ts

@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { TransferStateService } from '@scullyio/ng-lib';
+import { User } from '@sentry/node';
+import { first, Observable } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class UserResolver implements Resolve<User> {
+  constructor(private http: HttpClient, private tss: TransferStateService) {}
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<User> {
+    return this.tss.useScullyTransferState('tssUsers', this.http.get<User>('http://localhost:8200/users/10')).pipe(first());
+  }
+}

libs/ng-lib/src/lib/transfer-state/transfer-state.service.ts

@@ -1,7 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Inject, Injectable } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { GuardsCheckEnd, NavigationStart, Router } from '@angular/router';
 import { BehaviorSubject, catchError, filter, first, firstValueFrom, map, NEVER, Observable, of, pluck, shareReplay, switchMap, takeWhile, tap } from 'rxjs';
 import { basePathOnly } from '../utils/basePathOnly';
 import { isScullyGenerated, isScullyRunning } from '../utils/isScully';
@@ -57,11 +57,11 @@ export class TransferStateService {
     /** prevent emitting before navigation to _this_ URL is done. */
     switchMap((e: NavigationStart) =>
       this.router.events.pipe(
-        filter((ev) => ev instanceof NavigationEnd && ev.url === e.url),
+        filter((ev) => ev instanceof GuardsCheckEnd && ev.url === e.url),
         first()
       )
     ),
-    map((ev: NavigationEnd) => basePathOnly(ev.urlAfterRedirects || ev.url)),
+    map((ev: GuardsCheckEnd) => basePathOnly(ev.urlAfterRedirects || ev.url)),
     shareReplay(1)
   );
 
@@ -235,7 +235,7 @@ export class TransferStateService {
   }
 
   private readFromIndex(url): Promise<object> {
-    return firstValueFrom(this.http.get(dropPreSlash(mergePaths(url, '/index.html')), {responseType: 'text'})).then((html: string) => {
+    return firstValueFrom(this.http.get(dropPreSlash(mergePaths(url, '/index.html')), { responseType: 'text' })).then((html: string) => {
       const newStateStr = html.split(SCULLY_STATE_START)[1].split(SCULLY_STATE_END)[0];
       return JSON.parse(unescapeHtml(newStateStr));
     });