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.

• How To Create Angular App Using Angular CLI
• Getting Started With Angular 2 Using Visual Studio Code
• How To Post FormData To WebAPI Using Angular 2 
• Angular CLI Official site 

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..

 

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.

 

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. 

You have just read an article that categorized by title Angular by title How To Work With Multiple Modules In Angular v4. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2017/09/part-52how-to-work-with-multiple.html. Thank You!

Author: Bikesh Srivastava - Tuesday, September 5, 2017