fix(@nguniversal/common): correctly handle lazy loaded routes in Clover

JSDom doesn't support script with `type=module` therefore we need to strip out this from the runtime.js.

Closes #2433

integration/clover/src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { HomepageComponent } from './homepage.component';
 
 const routes: Routes = [
   { path: '', component: HomepageComponent },
+  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then((m) => m.LazyModule) },
   { path: '**', component: PokedexComponent },
 ];
 

integration/clover/src/app/lazy/lazy-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LazyComponent } from './lazy.component';
+
+const routes: Routes = [{ path: '', component: LazyComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LazyRoutingModule {}

integration/clover/src/app/lazy/lazy.component.html

@@ -0,0 +1 @@
+<p>lazy works!</p>

integration/clover/src/app/lazy/lazy.component.spec.ts

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

integration/clover/src/app/lazy/lazy.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-lazy',
+  templateUrl: './lazy.component.html',
+  styleUrls: ['./lazy.component.css'],
+})
+export class LazyComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

integration/clover/src/app/lazy/lazy.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LazyRoutingModule } from './lazy-routing.module';
+import { LazyComponent } from './lazy.component';
+
+@NgModule({
+  declarations: [LazyComponent],
+  imports: [CommonModule, LazyRoutingModule],
+})
+export class LazyModule {}

integration/clover/test.js

@@ -11,7 +11,7 @@ console.log({
   pages,
 });
 
-const expectedNumberOfPages = 5;
+const expectedNumberOfPages = 6;
 if (pages.length !== expectedNumberOfPages) {
   throw new Error(`Expected to have ${expectedNumberOfPages} index pages, but got ${pages.length}`);
 }

modules/common/clover/server/src/custom-resource-loader.ts

@@ -33,8 +33,14 @@ export class CustomResourceLoader extends ResourceLoader {
       return filePromise;
     }
 
-    const promise = promises.readFile(path).then((content) => {
-      this.fileCache.set(path, content);
+    const promise = promises.readFile(path, 'utf-8').then((content) => {
+      if (path.includes('runtime.')) {
+        // JSDOM doesn't support type=module, which will be added to lazy loaded scripts.
+        // https://github.com/jsdom/jsdom/issues/2475
+        content = content.replace(/\.type\s?=\s?['"]module["']/, '');
+      }
+
+      this.fileCache.set(path, Buffer.from(content));
 
       return content;
     }) as AbortablePromise<Buffer>;