feat(aio): lazy-load embedded components (angular#18428)

Fixes angular#16127

PR Close angular#18428

Author: gkalpak

aio/scripts/_payload-limits.json

@@ -2,19 +2,19 @@
   "aio": {
     "master": {
       "gzip7": {
-        "inline": 925,
-        "main": 119519,
-        "polyfills": 11863
+        "inline": 941,
+        "main": 116124,
+        "polyfills": 11860
       },
       "gzip9": {
-        "inline": 925,
-        "main": 119301,
-        "polyfills": 11861
+        "inline": 941,
+        "main": 115954,
+        "polyfills": 11858
       },
       "uncompressed": {
-        "inline": 1533,
-        "main": 486493,
-        "polyfills": 37068
+        "inline": 1558,
+        "main": 456432,
+        "polyfills": 37070
       }
     }
   }

aio/src/app/app.component.spec.ts

@@ -12,6 +12,7 @@ import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
 import { Deployment } from 'app/shared/deployment.service';
+import { EmbedComponentsService } from 'app/embed-components/embed-components.service';
 import { GaService } from 'app/shared/ga.service';
 import { LocationService } from 'app/shared/location.service';
 import { Logger } from 'app/shared/logger.service';
@@ -24,7 +25,7 @@ import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
 import { SearchResultsComponent } from 'app/shared/search-results/search-results.component';
 import { SearchService } from 'app/search/search.service';
 import { SelectComponent } from 'app/shared/select/select.component';
-import { TocComponent } from 'app/embedded/toc/toc.component';
+import { TocComponent } from 'app/layout/toc/toc.component';
 import { TocItem, TocService } from 'app/shared/toc.service';
 
 const sideBySideBreakPoint = 992;
@@ -1033,6 +1034,7 @@ function createTestingModule(initialUrl: string, mode: string = 'stable') {
     imports: [ AppModule ],
     providers: [
       { provide: APP_BASE_HREF, useValue: '/' },
+      { provide: EmbedComponentsService, useClass: TestEmbedComponentsService },
       { provide: GaService, useClass: TestGaService },
       { provide: HttpClient, useClass: TestHttpClient },
       { provide: LocationService, useFactory: () => mockLocationService },
@@ -1047,6 +1049,10 @@ function createTestingModule(initialUrl: string, mode: string = 'stable') {
   });
 }
 
+class TestEmbedComponentsService {
+  embedInto = jasmine.createSpy('embedInto').and.returnValue(of([]));
+}
+
 class TestGaService {
   locationChanged = jasmine.createSpy('locationChanged');
 }

aio/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, HostBinding, HostListener, OnInit,
          QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { MatSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material/sidenav';
 
 import { CurrentNodes, NavigationService, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
 import { DocumentService, DocumentContents } from 'app/documents/document.service';

aio/src/app/app.module.spec.ts

@@ -0,0 +1,48 @@
+import { TestBed } from '@angular/core/testing';
+import { AppModule } from 'app/app.module';
+import { ComponentsOrModulePath, EMBEDDED_COMPONENTS } from 'app/embed-components/embed-components.service';
+import { embeddedComponents } from 'app/embedded/embedded.module';
+
+describe('AppModule', () => {
+  let componentsMap: {[multiSelectorstring: string]: ComponentsOrModulePath};
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({imports: [AppModule]});
+    componentsMap = TestBed.get(EMBEDDED_COMPONENTS);
+  });
+
+  it('should provide a map of selectors to embedded components (or module)', () => {
+    const allSelectors = Object.keys(componentsMap);
+
+    expect(allSelectors.length).toBeGreaterThan(1);
+    allSelectors.forEach(selector => {
+      const value = componentsMap[selector];
+      const isArrayOrString = Array.isArray(value) || (typeof value === 'string');
+      expect(isArrayOrString).toBe(true);
+    });
+  });
+
+  it('should provide a list of eagerly-loaded embedded components', () => {
+    const eagerSelector = Object.keys(componentsMap).find(selector => Array.isArray(componentsMap[selector]));
+    const selectorCount = eagerSelector.split(',').length;
+
+    expect(eagerSelector).not.toBeNull();
+    expect(selectorCount).toBe(componentsMap[eagerSelector].length);
+
+    // For example...
+    expect(eagerSelector).toContain('aio-toc');
+  });
+
+  it('should provide a list of lazy-loaded embedded components', () => {
+    const lazySelector = Object.keys(componentsMap).find(selector => selector.includes('code-example'));
+    const selectorCount = lazySelector.split(',').length;
+
+    expect(lazySelector).not.toBeNull();
+    expect(selectorCount).toBe(embeddedComponents.length);
+
+    // For example...
+    expect(lazySelector).toContain('code-example');
+    expect(lazySelector).toContain('code-tabs');
+    expect(lazySelector).toContain('live-example');
+  });
+});

aio/src/app/app.module.ts

@@ -5,36 +5,26 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
 
-import {
-  MatButtonModule,
-  MatIconModule,
-  MatIconRegistry,
-  MatInputModule,
-  MatProgressBarModule,
-  MatSidenavModule,
-  MatTabsModule,
-  MatToolbarModule
-} from '@angular/material';
-
-import {
-  Platform
-} from '@angular/cdk/platform';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
+import { ROUTES } from '@angular/router';
 
 // Temporary fix for MatSidenavModule issue:
 // crashes with "missing first" operator when SideNav.mode is "over"
 import 'rxjs/add/operator/first';
 
-import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
 
 import { AppComponent } from 'app/app.component';
-import { ApiService } from 'app/embedded/api/api.service';
+import { EMBEDDED_COMPONENTS, EmbeddedComponentsMap } from 'app/embed-components/embed-components.service';
 import { CustomIconRegistry, SVG_ICONS } from 'app/shared/custom-icon-registry';
 import { Deployment } from 'app/shared/deployment.service';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
 import { DtComponent } from 'app/layout/doc-viewer/dt.component';
 import { ModeBannerComponent } from 'app/layout/mode-banner/mode-banner.component';
-import { EmbeddedModule } from 'app/embedded/embedded.module';
 import { GaService } from 'app/shared/ga.service';
 import { Logger } from 'app/shared/logger.service';
 import { LocationService } from 'app/shared/location.service';
@@ -47,11 +37,18 @@ import { NavMenuComponent } from 'app/layout/nav-menu/nav-menu.component';
 import { NavItemComponent } from 'app/layout/nav-item/nav-item.component';
 import { ScrollService } from 'app/shared/scroll.service';
 import { ScrollSpyService } from 'app/shared/scroll-spy.service';
-import { SearchBoxComponent } from './search/search-box/search-box.component';
+import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
+import { TocComponent } from 'app/layout/toc/toc.component';
 import { TocService } from 'app/shared/toc.service';
 import { WindowToken, windowProvider } from 'app/shared/window';
 
+import { EmbedComponentsModule } from 'app/embed-components/embed-components.module';
 import { SharedModule } from 'app/shared/shared.module';
+import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
+
+
+// The path to the `EmbeddedModule`.
+const embeddedModulePath = 'app/embedded/embedded.module#EmbeddedModule';
 
 // These are the hardcoded inline svg sources to be used by the `<mat-icon>` component
 export const svgIconProviders = [
@@ -78,15 +75,13 @@ export const svgIconProviders = [
 @NgModule({
   imports: [
     BrowserModule,
-    EmbeddedModule,
-    HttpClientModule,
     BrowserAnimationsModule,
+    EmbedComponentsModule,
+    HttpClientModule,
     MatButtonModule,
     MatIconModule,
-    MatInputModule,
     MatProgressBarModule,
     MatSidenavModule,
-    MatTabsModule,
     MatToolbarModule,
     SwUpdatesModule,
     SharedModule
@@ -100,10 +95,10 @@ export const svgIconProviders = [
     NavMenuComponent,
     NavItemComponent,
     SearchBoxComponent,
+    TocComponent,
     TopMenuComponent,
   ],
   providers: [
-    ApiService,
     Deployment,
     DocumentService,
     GaService,
@@ -113,15 +108,32 @@ export const svgIconProviders = [
     LocationService,
     { provide: MatIconRegistry, useClass: CustomIconRegistry },
     NavigationService,
-    Platform,
     ScrollService,
     ScrollSpyService,
     SearchService,
     svgIconProviders,
     TocService,
     { provide: WindowToken, useFactory: windowProvider },
+
+    {
+      provide: EMBEDDED_COMPONENTS,
+      useValue: {
+        /* tslint:disable: max-line-length */
+        'aio-toc': [TocComponent],
+        'aio-api-list, aio-contributor-list, aio-file-not-found-search, aio-resource-list, code-example, code-tabs, current-location, live-example': embeddedModulePath,
+        /* tslint:enable: max-line-length */
+      } as EmbeddedComponentsMap,
+    },
+    {
+      // This is currently the only way to get `@angular/cli`
+      // to split `EmbeddedModule` into a separate chunk :(
+      provide: ROUTES,
+      useValue: [{ path: '/embedded', loadChildren: embeddedModulePath }],
+      multi: true,
+    },
   ],
-  bootstrap: [AppComponent]
+  entryComponents: [ TocComponent ],
+  bootstrap: [ AppComponent ]
 })
 export class AppModule {
 }

aio/src/app/embed-components/embed-components.module.ts

@@ -0,0 +1,13 @@
+import { NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader } from '@angular/core';
+
+import { EmbedComponentsService } from './embed-components.service';
+
+
+@NgModule({
+  providers: [
+    EmbedComponentsService,
+    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },
+  ],
+})
+export class EmbedComponentsModule {
+}