Skip to main content

Angular 4 - Modules, components and routing

In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing.

You could check out the code from here.
git checkout -b part2.0 origin/part2.0

We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components.

npm install bootstrap@3

We need to add the bootstrap stylesheet in tha .angular-cli.json.

"styles": [

Our first Module

Lets add a new module employee. Inside "src/app" run

ng generate module employee
ng g m employee

Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also.
ng g m employee --routing

Time for component

It will create new employee module with its own routing. lets add a component for listing the employee. So inside employee folder run

ng g c employee-list

If you check the employee.module.ts you will find the component in imported and declared in the module, so it will be available for the particular module.
Now we need a service to communicate with API. Lets create that also. So inside employee folder run

ng g s employee

We need a modal to save employee. So we create a class employee . So in the same folder run
ng g class employee

Routing- lets got the page

So we created all the necessary files . But wait how we are going to load it?

First we will add the routing in the app routing for lazy load the module.
    path: 'employee',
    loadChildren: './employee/employee.module#EmployeeModule',

    path: '**',
    redirectTo: 'employee',
    pathMatch: 'full'

Add these routes inside the const routes .

So now it will redirect to the employee route. But wait where is our list component. We need to add the sub routes and modules in the employee routing file. So in the employee-routing.module.ts change the routes like
const routes: Routes = [{
  path: "",
  children: [{
    path: "list",
    component: EmployeeListComponent
  }, {
    path: "",
    redirectTo: 'list',
    pathMatch: 'full'

Don't forget to import EmployeeListComponent. Now you can see the employee works .

API / Service

Now we need to load data from the API to list the employees. Before that we need to create the data modal for employee. So in employee.ts file add
export class Employee {
    department: string;
    gender: string;
    name: string;
    _id: string;

What we are going to do is, we will have our own services inside each feature module for API calss. Where we will set the API urls and its logic. So in our employee.service.ts we will first inject the angular http service.

constructor(private http: Http) { }

lets create a function to get employees from the API.
getEmployees() {
    return this.http.get(base_url + "employee").map((data: Response) => {
      return data.json()

The http service returns a Observable so we will subscribe to this in the list component.  So we are going to inject this EmployeeService inside the list component.

constructor(private empService:EmployeeService) { }

At this time the cli will throw an error that there is provider for this service.

ERROR Error: Uncaught (in promise): Error: No provider for EmployeeService!

We need to provide this service in employee module. Please read more about service in here.
So add the service to the employee module provider. So in NgModule decorator after declarations add

providers: [EmployeeService]

At this time you migh get another error like

ERROR TypeError: this.http.get(...).map is not a function

This is because we need to import the map from rxjs .

import 'rxjs/add/operator/map';

So that's it now we can call the API and render the result. So in employee-list.component.ts we will call the function.

      this.employeelist = data;
  ngOnInit() {

For knowing more about the ngOnInit read the lifecycle hooks in Angular documentation.

Couple of points need to rememember:

  • In employee.service.ts the base_url needs to be your API end point. Later we will set in a single point. For current requirement we just keep as its is.
  • Also we have config.ts in the src folder which will have the base_url that you need update the API end point.
  • In the map we will convert the response, which in string format, will be converted to JSON.
  • Finally you have to import HttpModule from @angular/http in the employee.module.ts for http service to work
  • We will have a SharedModule which will not be lazy loaded, and includes the header component. We will add in app.component.html
And finally here is our employee module

Just like this add a new module and test it. I created  a project module that you could try.


afiah b said…
Excellant post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.
Java interview questions and answers

Core Java interview questions and answers

Java training in Chennai | Java training in Tambaram

Java training in Chennai | Java training in Velachery
Mounika said…
Really you have done great job,There are may person searching about that now they will find enough resources by your post
python course in pune
python course in chennai
python course in Bangalore
Unknown said…
Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
Best Devops training in sholinganallur
Devops training in velachery
Devops training in annanagar
Devops training in tambaram
kevin antony said…
I appreciate your efforts because it conveys the message of what you are trying to say. It's a great skill to make even the person who doesn't know about the subject could able to understand the subject . Your blogs are understandable and also elaborately described. I hope to read more and more interesting articles from your blog. All the best.

rpa training in Chennai | rpa training in bangalore | best rpa training in bangalore | rpa course in bangalore | rpa training institute in bangalore | rpa training in bangalore | rpa online training
tamilsasi said…
Inspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you.
Keep update more information..

Selenium training in bangalore
Selenium training in Chennai
Selenium training in Bangalore
Selenium training in Pune
Selenium Online training
Selenium interview questions and answers
SRI said…
Read all the information that i've given in above article. It'll give u the whole idea about it.
microsoft azure training in bangalore
rpa training in bangalore
best rpa training in bangalore
rpa online training
Aditi Ray said…
Home Mart is a site about Home Improvement, Furniture, Home Appliances and many more.
Check out the best
home office desks nz
coffee table nz
Tony Chew said…
Kriteria kartu jackpot Capsa Susun Dragon >> Mendapatkan bonus jackpot sebesar 65% dari total jackpot di meja. Royal Flush >> Mendapatkan bonus jackpot sebesar 35% dari total jackpot di meja. Straight Flush >> Mendapatkan bonus jackpot sebesar 5% dari total jackpot di meja.
bandar ceme terbaik
paito warna terlengkap
syair sgp
Programming is always have a huge knowledge for create a creativity website, how can we except.
web design training programs
php training center in chennai
magento developer training
divi said…
That blog was amazing, I am impressed with your thoughts. I got the best information from this site, It’s very useful to all and us. Thanks for sharing this post.web design company in velachery
nice information on data science has given thank you very much.
Data Science Training in Hyderabad
Tech Guy said…
Nice Blog
For Data Science training in Bangalore, Visit:
Data Science training in Bangalore
zuan said…
Thanks for sharing an informative blog keep rocking bring more details.I like the helpful info you provide in your articles. I’ll bookmark your weblog and check again here regularly. I am quite sure I will learn much new stuff right here! Good luck for the next!
Web Design Training in Chennai | Web Designing Training and Placement
Web Designing Classes in Chennai | Web Designing Institute in Chennai
mobile application development training course in chennai
data science course in chennai
Tanika Co Valda said…
Great Article. As I read the blog I felt a tug on the heartstrings. it exhibits how much effort has been put into this.
IEEE Projects for CSE in Big Data

Spring Framework Corporate TRaining

Final Year Project Centers in Chennai

JavaScript Training in Chennai

norhan said…

اعالى الخليج تقدم افضل خدمات نقل العفش الدولى المتميزه باسعار متميزة ومنها :

شركة شحن عفش من الرياض الى الامارات
نقل عفش من الرياض الى الاردن شركة شحن عفش من الرياض الى الاردن

watson said…
Thanks for one marvelous posting! I enjoyed reading it; you are a great author. I will make sure to bookmark your blog and may come back someday. I want to encourage that you continue your great posts.

sap hybris training in bangalore

sap scm training in bangalore

sap pm training in bangalore

sap crm training in bangalore

sap ewm training in bangalore

Really awesome blog!!! I finally found great post here.I really enjoyed reading this article. Thanks for sharing valuable information.
Data Science Course
Data Science Course in Marathahalli
Data Science Course Training in Bangalore
priyanka said…
wonderful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. This article resolved my all queries.
Data science Interview Questions
Data Science Course

Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

As i told earlier am trying to switch to Flex , i am trying to learn connection between PHP and Flex. When searched i got a excellent tutorial . But the problem is that it uses PostgreSQL. As i don't have any prior experience in PostgreSQL i try to install it in my Windows 7 and configure it in WAMP . I got different errors and spend almost two days in searching and using different methods . Atlast i got it right. I will try to figure out the steps i have done.
Am using
PostgreSQL 9.1WAMP Server 2.0e phpPgAdmin 5.0.2 WAMP consists
1. Apache Version :2.2.17  2. PHP Version :5.3.5  3. MySQL Version :5.5.8 First install PostgreSQL , no need to install additional plugins like phpPgAdmin.
Install WAMP server where ever you need.
Download PhpPgAdmin  and unzip it to WWW folder in WAMP installation.

At this point if you try to access the http://localhost/phpPgAdmin/ you may get this error.

Your PHP installation does not support PostgreSQL. You need to recompile PHP using the --with-pgs…

Angular - 4 year road map

AngularJS is one of the most popular JavaScript frameworks in the web. The Google developed framework is considered as one of the easiest framework to kick start a project. Two way binding and the dependency injection is the highlight of this framework.
My journey with AngularJS started about 4 years ago. Then popular ver1.4 amazed me in its capabilities. Developer like me, coming from Actionscript and plain old JQuery , AngularJS is a good option to kick start a project. It give me the confidence in JavaScript world, and from then I have tried lot of framework and tools from JavaScript itself like requireJS, webpack, etc. I did projects in Angular from 1.4 to the current 2.0, and trying to upgrade to the latest 4. Angular has now become one of the fastest growing framework. The journey starts with 1.4
One of the stable and mostly uses version. Started working on this for small projects and it seems easy for development. Dependency injection and two way binding seems quite interesting. …