Please Like and Share

I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

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

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.

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.