Added providedIn: feature module exploration in Angular 6.1.9. · thiensk/JavaScript-Demos@babd4d3 · GitHub
Skip to content

Commit babd4d3

Browse files
bennadelbennadel
committed
Added providedIn: feature module exploration in Angular 6.1.9.
1 parent 99604aa commit babd4d3

26 files changed

Lines changed: 1408 additions & 1111 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions

‎demos/provided-in-fail-angular6/app/app.component.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ import { Component } from "@angular/core";
1010
styleUrls: [ "./app.component.less" ],
1111
template:
1212
`
13-
Trying to do things.
13+
<p>
14+
<a routerLink="./">Goto home</a> &mdash;
15+
<a routerLink="./sub">Goto sub module</a>
16+
</p>
1417
15-
<sub-a></sub-a>
16-
<sub-b></sub-b>
18+
<router-outlet></router-outlet>
1719
`
1820
})
1921
export class AppComponent {

‎demos/provided-in-fail-angular6/app/app.module.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,30 @@
22
// Import the core angular services.
33
import { BrowserModule } from "@angular/platform-browser";
44
import { NgModule } from "@angular/core";
5+
import { RouterModule } from "@angular/router";
6+
import { Routes } from "@angular/router";
57

68
// Import the application components and services.
79
import { AppComponent } from "./app.component";
8-
import { SubModule } from "./sub.module";
10+
// import { SubModule } from "./sub.module";
11+
import { subModuleRoutes } from "./sub.module";
912

1013
// ----------------------------------------------------------------------------------- //
1114
// ----------------------------------------------------------------------------------- //
1215

1316
@NgModule({
1417
imports: [
1518
BrowserModule,
16-
SubModule
19+
// SubModule, // <---- Import the feature module.
20+
RouterModule.forRoot(
21+
[
22+
...subModuleRoutes
23+
],
24+
{
25+
// Tell the router to use the HashLocationStrategy.
26+
useHash: true
27+
}
28+
)
1729
],
1830
declarations: [
1931
AppComponent

‎demos/provided-in-fail-angular6/app/main.htm‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
<meta charset="utf-8" />
55

66
<title>
7-
ProvidedIn-Module Seams To Break With More Than One Service In Angular 6.1.9
7+
ProvidedIn FeatureModule Is A Confusing Concept For Me In Angular 6.1.9
88
</title>
99
</head>
1010
<body>
1111

1212
<h1>
13-
ProvidedIn-Module Seams To Break With More Than One Service In Angular 6.1.9
13+
ProvidedIn FeatureModule Is A Confusing Concept For Me In Angular 6.1.9
1414
</h1>
1515

1616
<my-app>

‎demos/provided-in-fail-angular6/app/sub-c.component.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// Import the application components and services.
6+
import { ThingCService } from "./thing-c.service";
7+
8+
// ----------------------------------------------------------------------------------- //
9+
// ----------------------------------------------------------------------------------- //
10+
11+
@Component({
12+
selector: "sub-b",
13+
template:
14+
`
15+
Sub-C Component is here!
16+
`
17+
})
18+
export class SubCComponent {
19+
20+
constructor( thingCService: ThingCService ) {
21+
22+
console.log( "Thing C Service:", thingCService );
23+
24+
}
25+
26+
}

‎demos/provided-in-fail-angular6/app/sub.component.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "sub-a",
10+
template:
11+
`
12+
<h2>
13+
Sub Module
14+
</h2>
15+
16+
<p>
17+
<a routerLink="./a">Sub-A</a> &mdash;
18+
<a routerLink="./b">Sub-B</a> &mdash;
19+
<a routerLink="./c">Sub-C</a>
20+
</p>
21+
22+
<router-outlet></router-outlet>
23+
`
24+
})
25+
export class SubComponent {
26+
// ...
27+
}

‎demos/provided-in-fail-angular6/app/sub.module.ts‎

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,57 @@
1-
21
// Import the core angular services.
32
import { CommonModule } from "@angular/common";
43
import { NgModule } from "@angular/core";
4+
import { RouterModule } from "@angular/router";
5+
import { Routes } from "@angular/router";
56

67
// Import the application components and services.
8+
import { SubComponent } from "./sub.component";
79
import { SubAComponent } from "./sub-a.component";
810
import { SubBComponent } from "./sub-b.component";
11+
import { SubCComponent } from "./sub-c.component";
912

1013
// ----------------------------------------------------------------------------------- //
1114
// ----------------------------------------------------------------------------------- //
1215

16+
export var subModuleRoutes: Routes = [
17+
{
18+
path: "sub",
19+
loadChildren: "./sub.module#SubModule" // <---- Layz loading the module.
20+
}
21+
];
22+
1323
@NgModule({
1424
imports: [
15-
CommonModule
16-
],
17-
exports: [
18-
SubAComponent,
19-
SubBComponent
25+
CommonModule,
26+
RouterModule.forChild([
27+
{
28+
// NOTE: Since this module is being lazy-loaded, the root segment has
29+
// already been defined (as part of the lazy-load configuration). As
30+
// such, the root segment here is empty.
31+
path: "",
32+
component: SubComponent,
33+
children: [
34+
{
35+
path: "a",
36+
component: SubAComponent
37+
},
38+
{
39+
path: "b",
40+
component: SubBComponent
41+
},
42+
{
43+
path: "c",
44+
component: SubCComponent
45+
}
46+
]
47+
}
48+
])
2049
],
2150
declarations: [
51+
SubComponent,
2252
SubAComponent,
23-
SubBComponent
53+
SubBComponent,
54+
SubCComponent
2455
]
2556
})
2657
export class SubModule {

‎demos/provided-in-fail-angular6/app/thing-a.service.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,24 @@
33
import { Injectable } from "@angular/core";
44

55
// Import the application components and services.
6-
import { SubModule } from "./sub.module";
6+
// import { SubModule } from "./sub.module";
77

88
// ----------------------------------------------------------------------------------- //
99
// ----------------------------------------------------------------------------------- //
1010

11+
// The problem becomes obvious when we log the SubModule that we're using in the meta-
12+
// data. It will be DEFINED in only ONE of the services that is bootstrapped. Then, it
13+
// will be UNDEFINED in the rest of the services.
14+
// console.log( "Bootstrapping C:", SubModule );
15+
16+
// NOTE: By using the "providedIn: Module" syntax, we are supposed to be able to get
17+
// better tree-shaking ability in our Angular application. However, this does not seem
18+
// to work very intuitively.
1119
@Injectable({
12-
providedIn: SubModule
20+
providedIn: "root"
1321
})
1422
export class ThingAService {
15-
// ...
23+
24+
public label: string = "Thing A";
25+
1626
}

‎demos/provided-in-fail-angular6/app/thing-b.service.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,24 @@
33
import { Injectable } from "@angular/core";
44

55
// Import the application components and services.
6-
import { SubModule } from "./sub.module";
6+
// import { SubModule } from "./sub.module";
77

88
// ----------------------------------------------------------------------------------- //
99
// ----------------------------------------------------------------------------------- //
1010

11+
// The problem becomes obvious when we log the SubModule that we're using in the meta-
12+
// data. It will be DEFINED in only ONE of the services that is bootstrapped. Then, it
13+
// will be UNDEFINED in the rest of the services.
14+
// console.log( "Bootstrapping B:", SubModule );
15+
16+
// NOTE: By using the "providedIn: Module" syntax, we are supposed to be able to get
17+
// better tree-shaking ability in our Angular application. However, this does not seem
18+
// to work very intuitively.
1119
@Injectable({
12-
providedIn: SubModule
20+
providedIn: "root"
1321
})
1422
export class ThingBService {
15-
// ...
23+
24+
public label: string = "Thing B";
25+
1626
}

‎demos/provided-in-fail-angular6/app/thing-c.service.ts‎

Lines changed: 26 additions & 0 deletions

0 commit comments

Comments
 (0)