Skip to main content

Command Palette

Search for a command to run...

Angular Basic Routing

Updated
2 min read

This is a step-by-step tutorial on creating a simple Angular routing.

Step 1: Name your new repository AngularBasicRouting.

Step 2: Inside Angular Files, create a Components Folder.

Step #3: Create four components by going to your angular folder files and using the command "ng generate component foldername/filename."

Step #4: In your Angular Files, now create an app.module.ts file.

Step #5: Apply this code

Step #6: Remove the standalone and imports code from your app.component.ts file, then import RouterOutlet.

Step #7: Create a route or path.

Step #8: Proceed to the components folder, select each component folder, and remove all standalone and imports from each typescript component.

Step #9: Include the statements on each component.

Step #10: Put this code in place of the main TypeScript

Step #12: Using Command Prompt, navigate to the Angular folder files and execute the ng serve command to launch the application. The output will look like this.

Step #13: Finally, publish the project to your Github repository.