-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add post on Lazy Loading routes using an Observable
- Loading branch information
1 parent
c10ebd9
commit 00ea814
Showing
28 changed files
with
691 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. | ||
# For additional information regarding the format and rule options, please see: | ||
# https://github.com/browserslist/browserslist#queries | ||
|
||
# You can see what browsers were selected by your queries by running: | ||
# npx browserslist | ||
|
||
> 0.5% | ||
last 2 versions | ||
Firefox ESR | ||
not dead | ||
not IE 9-11 # For IE 9-11 support, remove 'not'. |
14 changes: 14 additions & 0 deletions
14
apps/observable-load-children/src/app/app-routing.module.1.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { Routes, RouterModule } from '@angular/router'; | ||
|
||
const routes: Routes = [ | ||
{ path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }, | ||
{ path: '', redirectTo: 'lazy', pathMatch: 'full' } | ||
]; | ||
|
||
@NgModule({ | ||
imports: [ | ||
RouterModule.forRoot(routes) | ||
], | ||
}) | ||
export class AppRoutingModule { } |
25 changes: 25 additions & 0 deletions
25
apps/observable-load-children/src/app/app-routing.module.2.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { Routes, RouterModule } from '@angular/router'; | ||
|
||
import { Observable } from 'rxjs'; | ||
|
||
const routes: Routes = [ | ||
{ | ||
path: 'lazy', loadChildren: () => new Observable(observer => { | ||
import('./lazy/lazy.module').then(m => { | ||
observer.next(m.LazyModule); | ||
observer.complete(); | ||
}, error => { | ||
observer.error(error); | ||
}) | ||
}) | ||
}, | ||
{ path: '', redirectTo: 'lazy', pathMatch: 'full' } | ||
]; | ||
|
||
@NgModule({ | ||
imports: [ | ||
RouterModule.forRoot(routes) | ||
], | ||
}) | ||
export class AppRoutingModule { } |
17 changes: 17 additions & 0 deletions
17
apps/observable-load-children/src/app/app-routing.module.3.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { Routes, RouterModule } from '@angular/router'; | ||
|
||
import { from } from 'rxjs'; | ||
import { map } from 'rxjs/operators'; | ||
|
||
const routes: Routes = [ | ||
{ path: 'lazy', loadChildren: () => from(import('./lazy/lazy.module')).pipe(map(m => m.LazyModule)) }, | ||
{ path: '', redirectTo: 'lazy', pathMatch: 'full' } | ||
]; | ||
|
||
@NgModule({ | ||
imports: [ | ||
RouterModule.forRoot(routes) | ||
], | ||
}) | ||
export class AppRoutingModule { } |
26 changes: 26 additions & 0 deletions
26
apps/observable-load-children/src/app/app-routing.module.4.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { Routes, RouterModule } from '@angular/router'; | ||
|
||
import { from } from 'rxjs'; | ||
import { map, tap } from 'rxjs/operators'; | ||
|
||
const routes: Routes = [ | ||
{ | ||
path: 'lazy', loadChildren: () => from(import('./lazy/lazy.module')).pipe( | ||
map(m => m.LazyModule), | ||
tap(() => { | ||
console.log('Lazy Module Loaded'); | ||
}, () => { | ||
console.log('Lazy Module Load Failed'); | ||
}) | ||
) | ||
}, | ||
{ path: '', redirectTo: 'lazy', pathMatch: 'full' } | ||
]; | ||
|
||
@NgModule({ | ||
imports: [ | ||
RouterModule.forRoot(routes) | ||
], | ||
}) | ||
export class AppRoutingModule { } |
23 changes: 23 additions & 0 deletions
23
apps/observable-load-children/src/app/app-routing.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { Routes, RouterModule } from '@angular/router'; | ||
import { defer } from 'rxjs'; | ||
import { map, retry, tap } from 'rxjs/operators'; | ||
|
||
|
||
const routes: Routes = [ | ||
{ | ||
path: 'lazy', | ||
loadChildren: () => defer(() => import('./lazy/lazy.module')).pipe( | ||
map(m => m.LazyModule), | ||
retry(2) | ||
) | ||
}, | ||
{ path: '', redirectTo: 'lazy', pathMatch: 'full' } | ||
]; | ||
|
||
@NgModule({ | ||
imports: [ | ||
RouterModule.forRoot(routes) | ||
] | ||
}) | ||
export class AppRoutingModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'app-root', | ||
template: ` | ||
<!--The content below is only a placeholder and can be replaced.--> | ||
<div style="text-align:center" class="content"> | ||
<h1> | ||
Welcome to {{title}}! | ||
</h1> | ||
<span style="display: block">{{ title }} app is running!</span> | ||
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> | ||
</div> | ||
<h2>Here are some links to help you start: </h2> | ||
<ul> | ||
<li> | ||
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2> | ||
</li> | ||
<li> | ||
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2> | ||
</li> | ||
<li> | ||
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> | ||
</li> | ||
</ul> | ||
<router-outlet></router-outlet> | ||
`, | ||
styles: [] | ||
}) | ||
export class AppComponent { | ||
title = 'observable-load-children'; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { BrowserModule } from '@angular/platform-browser'; | ||
import { NgModule } from '@angular/core'; | ||
import { RouterModule } from '@angular/router'; | ||
|
||
import { AppRoutingModule } from './app-routing.module'; | ||
import { AppComponent } from './app.component'; | ||
|
||
@NgModule({ | ||
declarations: [ | ||
AppComponent | ||
], | ||
imports: [ | ||
BrowserModule, | ||
AppRoutingModule, | ||
RouterModule | ||
], | ||
providers: [], | ||
bootstrap: [AppComponent] | ||
}) | ||
export class AppModule { } |
12 changes: 12 additions & 0 deletions
12
apps/observable-load-children/src/app/lazy/lazy-routing.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { Routes, RouterModule } from '@angular/router'; | ||
|
||
import { LazyComponent } from './lazy.component'; | ||
|
||
const routes: Routes = [{ path: '', component: LazyComponent }]; | ||
|
||
@NgModule({ | ||
imports: [RouterModule.forChild(routes)], | ||
exports: [RouterModule] | ||
}) | ||
export class LazyRoutingModule { } |
20 changes: 20 additions & 0 deletions
20
apps/observable-load-children/src/app/lazy/lazy.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { Component, OnInit } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'app-lazy', | ||
template: ` | ||
<p> | ||
lazy works! | ||
</p> | ||
`, | ||
styles: [ | ||
] | ||
}) | ||
export class LazyComponent implements OnInit { | ||
|
||
constructor() { } | ||
|
||
ngOnInit(): void { | ||
} | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
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 { } |
Empty file.
3 changes: 3 additions & 0 deletions
3
apps/observable-load-children/src/environments/environment.prod.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export const environment = { | ||
production: true | ||
}; |
16 changes: 16 additions & 0 deletions
16
apps/observable-load-children/src/environments/environment.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
// This file can be replaced during build by using the `fileReplacements` array. | ||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. | ||
// The list of file replacements can be found in `angular.json`. | ||
|
||
export const environment = { | ||
production: false | ||
}; | ||
|
||
/* | ||
* For easier debugging in development mode, you can import the following file | ||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. | ||
* | ||
* This import should be commented out in production mode because it will have a negative impact | ||
* on performance if an error is thrown. | ||
*/ | ||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI. |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>ObservableLoadChildren</title> | ||
<base href="/"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="icon" type="image/x-icon" href="favicon.ico"> | ||
</head> | ||
<body> | ||
<app-root></app-root> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { enableProdMode } from '@angular/core'; | ||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | ||
|
||
import { AppModule } from './app/app.module'; | ||
import { environment } from './environments/environment'; | ||
|
||
if (environment.production) { | ||
enableProdMode(); | ||
} | ||
|
||
platformBrowserDynamic().bootstrapModule(AppModule) | ||
.catch(err => console.error(err)); |
Oops, something went wrong.