build: serve ivy dev-app with lazy loading (#15557)

* Revert "Revert "chore(dev-app): add lazy loading (#15522)""

This reverts commit 44f185b.

* build: serve ivy dev-app with lazy loading

* Updates the Ivy script/build pipeline to support lazy-loading with the dev-app.
* Removes duplicate lazy routes (otherwise causes error within rollup)
* Ensures Ivy Angular install script ensures clean Ivy packages are installed
* Ensures Ivy `build.sh` script works if Gulp is not installed globally.

Author: devversion

.github/CODEOWNERS

@@ -111,7 +111,7 @@
 /src/dev-app/connected-overlay/**                  @jelbourn @crisbeto
 /src/dev-app/dataset/**                            @andrewseguin
 /src/dev-app/datepicker/**                         @mmalerba
-/src/dev-app/dev-app-layout/**                     @mmalerba
+/src/dev-app/dev-app/**                            @mmalerba
 /src/dev-app/dialog/**                             @jelbourn @crisbeto
 /src/dev-app/drag-drop/**                          @crisbeto
 /src/dev-app/drawer/**                             @mmalerba

package.json

@@ -125,10 +125,12 @@
     "node-sass": "^4.11.0",
     "parse5": "^5.0.0",
     "protractor": "^5.4.1",
+    "requirejs": "^2.3.6",
     "resolve-bin": "^0.4.0",
-    "rollup": "^0.56.3",
-    "rollup-plugin-alias": "^1.4.0",
-    "rollup-plugin-node-resolve": "^3.0.3",
+    "rollup": "^1.7.0",
+    "rollup-plugin-alias": "^1.5.1",
+    "rollup-plugin-commonjs": "^9.2.1",
+    "rollup-plugin-node-resolve": "^4.0.1",
     "run-sequence": "^1.2.2",
     "scss-bundle": "^2.0.1-beta.7",
     "selenium-webdriver": "^3.6.0",

scripts/ivy/build.sh

@@ -4,24 +4,22 @@ set -e
 
 echo ">>> Build Material"
 rm -rf dist
-gulp build:devapp
+yarn gulp build:devapp
 
 echo ">>> Rebuild dev-app with ngtsc"
 node_modules/.bin/ngc -p src/dev-app/tsconfig-build.json
 
-echo ">>> Bundle demo-app with SystemJS"
-node ./src/dev-app/systemjs-bundle.js
+echo ">>> Bundling dev-app with Rollup"
+node ./src/dev-app/rollup-bundles.js
 
-echo ">>> Assembling app"
-mkdir dist/demo
-cp dist/packages/dev-app/bundle.js dist/demo
+echo ">>> Copying assets to output"
 cp src/dev-app/index.html dist/demo
 cp dist/packages/dev-app/theme.css dist/demo
 cp 'node_modules/@webcomponents/custom-elements/custom-elements.min.js' dist/demo
 cp node_modules/core-js/client/core.js dist/demo
-cp node_modules/systemjs/dist/system.src.js dist/demo
+cp node_modules/requirejs/require.js dist/demo
 cp node_modules/zone.js/dist/zone.js dist/demo
 cp node_modules/hammerjs/hammer.min.js dist/demo
 
 echo ">>> Done."
-echo "Output: $(pwd)/dist/demo"
+echo "Output: $(pwd)/dist/demo"

scripts/ivy/install-angular.sh

@@ -21,6 +21,7 @@ function build_angular_packages() {
 function install_angular_package() {
   name=$1
   echo "    @angular/$name"
+  rm -Rf "node_modules/@angular/${name}"
   cp -r "${output_path}/${name}/npm_package" "node_modules/@angular/${name}"
 }
 

src/dev-app/autocomplete/autocomplete-demo-module.ts

@@ -16,6 +16,7 @@ import {
   MatFormFieldModule,
   MatInputModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {AutocompleteDemo} from './autocomplete-demo';
 
 @NgModule({
@@ -28,6 +29,7 @@ import {AutocompleteDemo} from './autocomplete-demo';
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: AutocompleteDemo}]),
   ],
   declarations: [AutocompleteDemo],
 })

src/dev-app/badge/badge-demo-module.ts

@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatBadgeModule, MatButtonModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {BadgeDemo} from './badge-demo';
 
 @NgModule({
@@ -19,6 +20,7 @@ import {BadgeDemo} from './badge-demo';
     MatBadgeModule,
     MatButtonModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: BadgeDemo}]),
   ],
   declarations: [BadgeDemo],
 })

src/dev-app/baseline/baseline-demo-module.ts

@@ -17,6 +17,7 @@ import {
   MatSelectModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {BaselineDemo} from './baseline-demo';
 
 @NgModule({
@@ -29,6 +30,7 @@ import {BaselineDemo} from './baseline-demo';
     MatRadioModule,
     MatSelectModule,
     MatToolbarModule,
+    RouterModule.forChild([{path: '', component: BaselineDemo}]),
   ],
   declarations: [BaselineDemo],
 })

src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts

@@ -20,6 +20,7 @@ import {
   MatListModule,
   MatSelectModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet-demo';
 
 @NgModule({
@@ -35,6 +36,7 @@ import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet-demo';
     MatInputModule,
     MatListModule,
     MatSelectModule,
+    RouterModule.forChild([{path: '', component: BottomSheetDemo}]),
   ],
   declarations: [BottomSheetDemo, ExampleBottomSheet],
   entryComponents: [ExampleBottomSheet],

src/dev-app/button-toggle/button-toggle-demo-module.ts

@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonToggleModule, MatCheckboxModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ButtonToggleDemo} from './button-toggle-demo';
 
 @NgModule({
@@ -19,6 +20,7 @@ import {ButtonToggleDemo} from './button-toggle-demo';
     MatButtonToggleModule,
     MatCheckboxModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: ButtonToggleDemo}]),
   ],
   declarations: [ButtonToggleDemo],
 })

src/dev-app/button/button-demo-module.ts

@@ -8,12 +8,14 @@
 
 import {NgModule} from '@angular/core';
 import {MatButtonModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ButtonDemo} from './button-demo';
 
 @NgModule({
   imports: [
     MatButtonModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: ButtonDemo}]),
   ],
   declarations: [ButtonDemo],
 })

src/dev-app/card/card-demo-module.ts

@@ -13,6 +13,7 @@ import {
   MatDividerModule,
   MatProgressBarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {CardDemo} from './card-demo';
 
 @NgModule({
@@ -21,6 +22,7 @@ import {CardDemo} from './card-demo';
     MatCardModule,
     MatDividerModule,
     MatProgressBarModule,
+    RouterModule.forChild([{path: '', component: CardDemo}]),
   ],
   declarations: [CardDemo],
 })

src/dev-app/checkbox/checkbox-demo-module.ts

@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatCheckboxModule, MatPseudoCheckboxModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox-demo';
 
 @NgModule({
@@ -18,6 +19,7 @@ import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox-demo';
     FormsModule,
     MatCheckboxModule,
     MatPseudoCheckboxModule,
+    RouterModule.forChild([{path: '', component: CheckboxDemo}]),
   ],
   declarations: [CheckboxDemo, MatCheckboxDemoNestedChecklist],
 })

src/dev-app/chips/chips-demo-module.ts

@@ -18,6 +18,7 @@ import {
   MatIconModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ChipsDemo} from './chips-demo';
 
 @NgModule({
@@ -31,6 +32,7 @@ import {ChipsDemo} from './chips-demo';
     MatFormFieldModule,
     MatIconModule,
     MatToolbarModule,
+    RouterModule.forChild([{path: '', component: ChipsDemo}]),
   ],
   declarations: [ChipsDemo],
 })

src/dev-app/connected-overlay/connected-overlay-demo-module.ts

@@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule, MatCheckboxModule, MatRadioModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ConnectedOverlayDemo} from './connected-overlay-demo';
 
 @NgModule({
@@ -21,6 +22,7 @@ import {ConnectedOverlayDemo} from './connected-overlay-demo';
     MatCheckboxModule,
     MatRadioModule,
     OverlayModule,
+    RouterModule.forChild([{path: '', component: ConnectedOverlayDemo}]),
   ],
   declarations: [ConnectedOverlayDemo],
 })

src/dev-app/datepicker/datepicker-demo-module.ts

@@ -16,8 +16,10 @@ import {
   MatFormFieldModule,
   MatIconModule,
   MatInputModule,
+  MatNativeDateModule,
   MatSelectModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker-demo';
 
 @NgModule({
@@ -30,8 +32,10 @@ import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker-
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
+    MatNativeDateModule,
     MatSelectModule,
     ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: DatepickerDemo}]),
   ],
   declarations: [CustomHeader, CustomHeaderNgContent, DatepickerDemo],
   entryComponents: [CustomHeader, CustomHeaderNgContent],