feat(demo): support lazy loading route (app1's user module) #55

examples/app1/src/app/app.module.ts

@@ -3,20 +3,26 @@ import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { RouterModule, Route } from '@angular/router';
-import { UserListComponent } from './user/user-list.component';
 import { NgxTethysModule } from 'ngx-tethys';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { routers } from './app.routing';
-import { UserDetailComponent } from './user/detail/user-detail.component';
 import { AppRootComponent } from './root/root.component';
 import { DemoCommonModule } from '@demo/common';
 import { NgxPlanetModule } from 'ngx-planet';
+import { UserModule } from './user/user.module';
 
 @NgModule({
-    declarations: [AppComponent, AppRootComponent, UserListComponent, UserDetailComponent, DashboardComponent],
-    imports: [BrowserModule, RouterModule.forRoot(routers), NgxTethysModule, DemoCommonModule, NgxPlanetModule],
+    declarations: [AppComponent, AppRootComponent, DashboardComponent],
+    imports: [
+        BrowserModule,
+        RouterModule.forRoot(routers),
+        // UserModule,
+        NgxTethysModule,
+        DemoCommonModule,
+        NgxPlanetModule
+    ],
     providers: [],
-    entryComponents: [UserDetailComponent],
+    entryComponents: [],
     bootstrap: [AppComponent]
 })
 export class AppModule {}

examples/app1/src/app/app.routing.ts

@@ -1,7 +1,5 @@
-import { UserListComponent } from './user/user-list.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { Route } from '@angular/router';
-import { UserDetailComponent } from './user/detail/user-detail.component';
 import { AppRootComponent } from './root/root.component';
 import { EmptyComponent } from 'ngx-planet';
 
@@ -21,14 +19,18 @@ export const routers: Route[] = [
             },
             {
                 path: 'users',
-                component: UserListComponent,
-                children: [
-                    {
-                        path: ':id',
-                        component: UserDetailComponent
-                    }
-                ]
+                loadChildren: () => import('./user/user.module').then(mod => mod.UserModule)
             }
+            // {
+            //     path: 'users',
+            //     component: UserListComponent,
+            //     children: [
+            //         {
+            //             path: ':id',
+            //             component: UserDetailComponent
+            //         }
+            //     ]
+            // }
         ]
     },
     {

examples/app1/src/app/shared.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { ThyLayoutModule, ThyButtonModule, ThyListModule, ThyDialogModule } from 'ngx-tethys';
+import { DemoCommonModule } from '@demo/common';
+import { NgxPlanetModule } from 'ngx-planet';
+
+@NgModule({
+    declarations: [],
+    imports: [
+        CommonModule,
+        RouterModule,
+        ThyLayoutModule,
+        ThyButtonModule,
+        ThyListModule,
+        ThyDialogModule,
+        DemoCommonModule,
+        NgxPlanetModule
+    ],
+    exports: [
+        CommonModule,
+        RouterModule,
+        ThyLayoutModule,
+        ThyButtonModule,
+        ThyListModule,
+        ThyDialogModule,
+        DemoCommonModule,
+        NgxPlanetModule
+    ],
+    providers: []
+})
+export class SharedModule {}

examples/app1/src/app/user/user-list.component.html

@@ -1,7 +1,7 @@
-<p>This is user list page</p>
+<p>This is user list page, <code>and this module is loaded lazy.</code></p>
 <thy-list>
-    <thy-list-item class="thy-list-option"><span (click)="openUserDetail(1)">Peter</span></thy-list-item>
-    <thy-list-item class="thy-list-option"><span (click)="openUserDetail(2)">Lily</span></thy-list-item>
+  <thy-list-item class="thy-list-option" (click)="openUserDetail(1)"><span>Peter</span></thy-list-item>
+  <thy-list-item class="thy-list-option" (click)="openUserDetail(2)"><span>Lily</span></thy-list-item>
 </thy-list>
 
 <router-outlet></router-outlet>

examples/app1/src/app/user/user.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserListComponent } from './user-list.component';
+import { UserDetailComponent } from './detail/user-detail.component';
+import { NgxTethysModule } from 'ngx-tethys';
+import { DemoCommonModule } from '@demo/common';
+import { NgxPlanetModule } from 'ngx-planet';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from '../shared.module';
+
+@NgModule({
+    declarations: [UserListComponent, UserDetailComponent],
+    imports: [
+        SharedModule,
+        RouterModule.forChild([
+            {
+                path: '',
+                component: UserListComponent,
+                children: [
+                    {
+                        path: ':id',
+                        component: UserDetailComponent
+                    }
+                ]
+            }
+        ])
+    ],
+    exports: [UserListComponent, UserDetailComponent],
+    providers: []
+})
+export class UserModule {}

package.json

@@ -3,13 +3,17 @@
   "version": "1.0.9",
   "scripts": {
     "ng": "ng",
+    "// start": "run app1 and app2 use webpack dev-server",
     "start": "concurrently \"npm run serve:portal\" \"npm run serve:app1\" \"npm run serve:app2\"",
+    "// start:dev": "concurrently \"npm run serve:portal\" \"npm run build:app1:dev\" \"npm run build:app2:dev\"",
     "serve:portal": "ng run portal:serve",
-    "serve:app1": "ng serve app1",
-    "serve:app2": "ng serve app2",
+    "serve:app1": "ng serve app1 --deploy-url=/static/app1/",
+    "serve:app2": "ng serve app2 --deploy-url=/static/app2/",
     "build:portal": "ng build",
     "build:app1": "ng build app1",
     "build:app2": "ng build app2",
+    "// build:app1:dev": "ng build app1 --watch true --deploy-url=/static/app1/",
+    "// build:app2:dev": "ng build app2 --watch true --deploy-url=/static/app2/",
     "build:portal:prod": "ng build --prod",
     "build:app1:prod": "ng build app1 --prod",
     "build:app2:prod": "ng build app2 --prod",

proxy.conf.js

@@ -2,14 +2,14 @@ const PROXY_CONFIG = {};
 
 PROXY_CONFIG['/static/app1'] = {
     target: 'http://localhost:3001',
-    pathRewrite: { '^/static/app1': '' },
+    // pathRewrite: { '^/static/app1': '' },
     secure: false,
     changeOrigin: false
 };
 
 PROXY_CONFIG['/static/app2'] = {
     target: 'http://localhost:3002',
-    pathRewrite: { '^/static/app2': '' },
+    // pathRewrite: { '^/static/app2': '' },
     secure: false,
     changeOrigin: true
 };

tsconfig.json

@@ -5,7 +5,7 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esNext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,