11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/
Tuesday, September 5, 2017

How To Work With Multiple Modules In Angular v4

A few months ago once I was going to create  angular application for my company project at that time I faced a problem to configure angular Module in application. After some time I found a solution which is very simple. So today I am going to explain how to use multiple modules. I am sure you will face this type of problem if you are beginner in angular 4 and want to develop an e-commerce or any other type of application so first of all read this article. Because of the module is the backbone of angular application.

 If you are beginner in angular so just go through these given article below.
So now you need to follow some simple steps to use multiple modules in angular application Create a simple application using Angular CLI, if you are going to use angular first time and not aware about how to create angular application click here.. I am going to create an application which contains three module App, Employee, Admin, Home. see the image.

In this image you can see I have created an app with three module. I think we can understand very easily after run cli command created, a default project and after that what we need to be done, see image..

http://www.c-sharpcorner.com/article/getting-started-with-angular2-using-webpack-in-visual-studio-code/Images/2.png 
In above image we can see inside src=>app=>Admin,Employee,Home,Login four folder are avilable,and each folder conataining file like this e.g.
home.module.ts
home.route.ts
home.component.ts
home.component.html 
So go your app folder and create for all thereafter use given code as per given file.So i am going to explain for one Home
Create src=>app=>Home=>home.module.ts.

src=>app=>Home=>home.module.ts 
1.  import { BrowserModule } from '@angular/platform-browser';  
2.  import { NgModule } from '@angular/core';  
3.  import { RouterModule, Routes } from '@angular/router';  
4.  import { HomeComponent } from './home.component';  
5.  const routes: Routes = [  
6.      { path: 'Home', component: HomeComponent },  
7.  ];  
8.  @NgModule({  
9.      declarations: [  
10.         HomeComponent  
11.     ],  
12.     imports: [  
13.         BrowserModule,  
14.         RouterModule.forRoot(routes)  
15.     ],  
16.     providers: [],  
17.   
18. })  
19. export class HomeModule { }  
  src=>app=>Home=>home.route.ts for now iam not using this file ,if you want just copy highlighted code and paste inside home.route.ts and import in module.

  src=>app=>Home=>home.component.ts 
1.  import { Component } from '@angular/core';  
2.    
3.  @Component({  
4.    selector: 'home',  
5.    templateUrl: './home.component.html',   
6.  })  
7.  export class HomeComponent {  
8.    title = 'Home component ';  
9.  }  
 src=>app=>Home=>home.component.html
1.  <h1>  
2.    Welcome to {{title}}!  
3.  </h1>  
 So we have done with one module Home now time to register this module in AppModule.
As well as you can create any number of module by following above steps, but keep in mind you have to register inside app module.

Inside the app folderyou can see there are three main file

app.component.ts
app.component.html
app.module.ts

Here no route configuring becasue of this module is set for bootsraping,means will run at starting point.
let me explain how to set route for other module and configure.

src=>app=>app.component.ts
1.  import { Component } from '@angular/core';  
2.    
3.  @Component({  
4.    selector: 'app-root',  
5.    templateUrl: './app.component.html',   
6.  })  
7.  export class AppComponent {  
8.    title = 'Angular app using Angular CLI by Bikesh Srivastava ';  
9.  }  
 src=>app=>app.component.html

1.  <div class="container" style="height:100%">   
2.    <nav class="navbar navbar-inverse navbar-toggleable-md  bg-primary">  
3.    <a class="navbar-brand" href="#">Welcome {{title}}</a>  
4.    <div  id="navbarNav">  
5.      <ul class="navbar-nav">  
6.        <li class="nav-item active">  
7.          <a class="nav-link" routerLink="/Home">Home</a>  
8.        </li>        
9.        <li class="nav-item">  
10.         <a class="nav-link" routerLink="/Admin">Admin</a>  
11.       </li>    
12.        <li class="nav-item">  
13.         <a class="nav-link" routerLink="/Employee">Employee</a>  
14.       </li>     
15.     </ul>  
16.   </div>  
17. </nav>  
18. <div style="margin-top:20px; height:100%">  
19.   <router-outlet ></router-outlet>   
20.   </div>  
21. </div>  
 src=>app=>app.module.ts
1.  import { BrowserModule } from '@angular/platform-browser';  
2.  import { NgModule } from '@angular/core';  
3.  import { AppComponent } from './app.component';  
4.  import { RouterModule, Routes ,PreloadAllModules} from '@angular/router';  
5.  import {AdminComponent} from './Admin/admin.component';  
6.  import {EmployeeComponent} from './Employee/emp.component';  
7.  import {HomeComponent} from './Home/home.component';  
8.  import {HomeModule} from './Home/home.module';  
9.  import {EmployeeModule} from './Employee/emp.module';  
10. import {AdminModule} from './Admin/admin.module';  
11. import {LogInComponent} from './Login/login.component'  
12.   
13. const routes: Routes = [    
14.   //{path:'',component:LogInComponent},  
15.   { path: 'Home', loadChildren:()=> System.import('./Home').then((comp: any) => comp.default) },  
16.   { path: 'Admin', loadChildren:()=> System.import('./Admin').then((comp: any) => comp.default) },  
17.   { path: 'Employee', loadChildren:()=> System.import('./Employee').then((comp: any) => comp.default) },  
18. ];  
19. @NgModule({  
20.   declarations: [  
21.     AppComponent, //LogInComponent      
22.   ],  
23.   imports: [  
24.     BrowserModule,  
25.     HomeModule,  
26.     EmployeeModule,  
27.     AdminModule,      
28.     RouterModule.forRoot(routes, { useHash: false, preloadingStrategy: PreloadAllModules }),  
29.   ],  
30.   providers: [],  
31.   bootstrap: [AppComponent]  
32. })  
33. export class AppModule { }  
src=>main.ts
1.  import { enableProdMode } from '@angular/core';  
2.  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
3.    
4.  import { AppModule } from './app/app.module';  
5.  import { environment } from './environments/environment';  
6.    
7.  if (environment.production) {  
8.    enableProdMode();  
9.  }  
10.   
11. platformBrowserDynamic().bootstrapModule(AppModule);  
src=>index.html
1.  <!doctype html>  
2.  <html lang="en">  
3.  <head>  
4.    <meta charset="utf-8">  
5.    <title>Angular4</title>  
6.    <base href="/">  
7.    
8.    <meta name="viewport" content="width=device-width, initial-scale=1">  
9.    <link rel="icon" type="image/x-icon" href="favicon.ico">  
10. </head>  
11. <body>  
12.   <app-root></app-root>  
13. </body>  
14. </html>  
 src=>custom-typings.d.ts  Don't forget to add this part of file and code inside src folder,otherwise you can't find System.import function.
1.  /* 
2.   * Custom Type Definitions 
3.   * When including 3rd party modules you also need to include the type definition for the module 
4.   * if they don't provide one within the module. You can try to install it with @types 
5.   
6.  npm install @types/node 
7.  npm install @types/lodash 
8.   
9.   * If you can't find the type definition in the registry we can make an ambient/global definition in 
10.  * this file for now. For example 
11.  
12. declare module 'my-module' { 
13.  export function doesSomething(value: string): string; 
14. } 
15.  
16.  * If you are using a CommonJS module that is using module.exports then you will have to write your 
17.  * types using export = yourObjectOrFunction with a namespace above it 
18.  * notice how we have to create a namespace that is equal to the function we're 
19.  * assigning the export to 
20.  
21. declare module 'jwt-decode' { 
22.   function jwtDecode(token: string): any; 
23.   namespace jwtDecode {} 
24.   export = jwtDecode; 
25. } 
26.  
27.  * 
28.  * If you're prototying and you will fix the types later you can also declare it as type any 
29.  * 
30.  
31. declare var assert: any; 
32. declare var _: any; 
33. declare var $: any; 
34.  
35.  * 
36.  * If you're importing a module that uses Node.js modules which are CommonJS you need to import as 
37.  * in the files such as main.browser.ts or any file within app/ 
38.  * 
39.  
40. import * as _ from 'lodash' 
41.  
42.  * You can include your type definitions in this file until you create one for the @types 
43.  * 
44.  */  
45.   
46. // support NodeJS modules without type definitions  
47. declare module '*';  
48.   
49. /* 
50. // for legacy tslint etc to understand rename 'modern-lru' with your package 
51. // then comment out `declare module '*';`. For each new module copy/paste 
52. // this method of creating an `any` module type definition 
53. declare module 'modern-lru' { 
54.   let x: any; 
55.   export = x; 
56. } 
57. */  
58.   
59. // Extra variables that live on Global that will be replaced by webpack DefinePlugin  
60. declare var ENV: string;  
61. declare var HMR: boolean;  
62. declare var System: SystemJS;  
63.   
64. interface SystemJS {  
65.   import: (path?: string) => Promise<any>;  
66. }  
67.   
68. interface GlobalEnvironment {  
69.   ENV: string;  
70.   HMR: boolean;  
71.   SystemJS: SystemJS;  
72.   System: SystemJS;  
73. }  
74.   
75. interface Es6PromiseLoader {  
76.   (id: string): (exportName?: string) => Promise<any>;  
77. }  
78.   
79. type FactoryEs6PromiseLoader = () => Es6PromiseLoader;  
80. type FactoryPromise = () => Promise<any>;  
81.   
82. type AsyncRoutes = {  
83.   [component: string]: Es6PromiseLoader |  
84.                                Function |  
85.                 FactoryEs6PromiseLoader |  
86.                          FactoryPromise  
87. };  
88.   
89.   
90. type IdleCallbacks = Es6PromiseLoader |  
91.                              Function |  
92.               FactoryEs6PromiseLoader |  
93.                        FactoryPromise ;  
94.   
95. interface WebpackModule {  
96.   hot: {  
97.     data?: any,  
98.     idle: any,  
99.     accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void;  
100.             decline(deps?: any | string | string[]): void;  
101.             dispose(callback?: (data?: any) => void): void;  
102.             addDisposeHandler(callback?: (data?: any) => void): void;  
103.             removeDisposeHandler(callback?: (data?: any) => void): void;  
104.             check(autoApply?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void;  
105.             apply(options?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void;  
106.             status(callback?: (status?: string) => void): void | string;  
107.             removeStatusHandler(callback?: (status?: string) => void): void;  
108.           };  
109.         }  
110.           
111.           
112.         interface WebpackRequire {  
113.             (id: string): any;  
114.             (paths: string[], callback: (...modules: any[]) => void): void;  
115.             ensure(ids: string[], callback: (req: WebpackRequire) => void, chunkName?: string): void;  
116.             context(directory: string, useSubDirectories?: boolean, regExp?: RegExp): WebpackContext;  
117.         }  
118.           
119.         interface WebpackContext extends WebpackRequire {  
120.             keys(): string[];  
121.         }  
122.           
123.         interface ErrorStackTraceLimit {  
124.           stackTraceLimit: number;  
125.         }  
126.           
127.           
128.         // Extend typings  
129.         interface NodeRequire extends WebpackRequire {}  
130.         interface ErrorConstructor extends ErrorStackTraceLimit {}  
131.         interface NodeRequireFunction extends Es6PromiseLoader  {}  
132.         interface NodeModule extends WebpackModule {}  
133.         interface Global extends GlobalEnvironment  {}  
 All set to run application,If you are getting any error jus remove node_module folder and use "npm install" command on terminal.
Lets run application using "npm start" .output will looks like this see image.
http://www.c-sharpcorner.com/article/getting-started-with-angular2-using-webpack-in-visual-studio-code/Images/3.png 
Click on any one and see output.
Sometime you can get error related port number don't worry about that.jus copy given code and paste inside angular-cli.json
1.  "defaults": {  
2.      "serve": {  
3.        "port": 2500  
4.      },  
5.      "styleExt""css",  
6.      "component": {}  
7.    }  
Conclusion :
In this article I am explaining how to communicate angular app with multiple module, parent to child and child to parent. In this application will find a simple way to load another module with the help route, according route module is loaded. Thereafter module load all components and component render html according selector. 
Bikesh Srivastava Angular

Life Is Complicated, But Now programmer Can Keep It Simple.