Routing Through AngularJS2 In 10 Simple Steps

What's up guys, today I'm going to show you how to build an #AngularJS Routing application (EASILY) through IntelliJ IDEA!

Before we begin, make sure Angular CLI is installed on your device. Instructions Here

1) First you are going to download the IDE. After you download, you will go through a signup wizard, then you will be presented with this screen:

Screenshot Of IntelliJ IDEA

2) From this page, click on "Create New Project". At the bottom left, you're just going to select "Empty Project".

Screenshot Of IntelliJ IDEA

3) Go to the next page:


4) Click "Ok", then open up project page. From here, open up the terminal on the bottom left side of the user interface:

Screenshot of AngularJS Routes

5) On your terminal window, type "ng new routesProject" and hit enter. Wait for the process to finish, then continue to step #6.

6) Open up the newly created folder titled "routesProject". This should exist inside your original folder created in IntelliJ IDEA.

Terminal in IntelliJ IDEA

7) Once you've opened the project, type "ng g c home && ng g c about" into IntelliJ's built in terminal. Then, expand the "src" folder, and the "app" folder like so:

AngularJS Generate Component

8) Right click the "app" folder, and create a new file. Call the file "app.routes.ts" and paste the following code into the file:

Angular JS Routes

9) Edit the file "app.module.ts" to match the image below. Add "import { appRouting } from './app.routes';" to line 5, add a comma after "HttpModule" on line 19, and add a new line after 19 with "appRouting".

Angular JS Routes

10) Edit the file "app.component.html". Delete everything, then paste the following into the file.

 Angular JS Routes

Congrats! Now simply open up IntelliJ IDEA's built in terminal, type in "ng serve", and go to https://localhost:4200/. Your routing system is setup!

Thanks! You can find more content available at our website: