Configure Your First Angular Route

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 5 years ago

Using the Angular router requires defining routes, passing them in to the RouterModule.forRoot and then importing the configured RouterModule into your main App Module.

[00:00] Taking a basic Hello World! App from Angular 2 with a main module and app component, just with a Hello World! Template, configuring routes looks something like const routes, which is just an array of these route configurations.

[00:15] We'll say the path of nothing, we'll load a component of, and we just need to create a component we want to load. I'll say component, and this other template of I'm a home component, and that's just a decorator for a class which we'll call home component.

[00:35] Drop home component in here, and then we put these routes inside of our imports, so we have a router module which can configure the routes for our root, so you drop them in here, and this will configure and set up everything you need to use the router.

[00:54] Now, if I hit save, this isn't going to work or do anything yet, for two reasons. One being, the app component, which used to be what we bootstrapped, now this needs to use the router outlet.

[01:07] This router outlet is where the main component, or that home component we're loading is going to be dropped. That template is going to be loaded and dropped in here, and then that component also needs to be declared so that it knows to include it and make sure and use that.

[01:22] Basically, if the compiler doesn't find a component in the declarations, it's going to try and optimize and drop those things out, so you need to define them somehow. We'll go ahead and save now.

[01:32] You'll see we now have I'm a home component, which is coming from this home component component, declared in this route object inside of our routes, which was passed into the router module for root, and then dropped into our app component into the router outlet.

[01:48] Let's go ahead and extract this stuff. We'll create a new typescript file inside of a home directory called home.component.ts and we'll just grab this home component which we declared, cut and paste.

[02:06] Make sure and import anything that's missing its imports back in our app module. Make sure and import home component. We'll grab these routes, cut them, and we'll drop them into a file called app.routes.ts.

[02:20] We'll go ahead and paste that in here. Make sure to import that home component. Then, back in the module, we can even grab this router module configuration for root. Drop that in our app routes, and I'm actually going to export that as the default of our app routes.

[02:39] Make sure to import the router module. Now in my app module, I can get rid of this import, and instead, now I'll import app routes from app routes. This app routes is just going to point to that default export, which is a configured router module, and I can just drop that inside of my imports.

[03:02] I'll say app routes, and I still need to declare my home components, so I'll go ahead and import that. When I hit save, now, everything should work just the same, showing I'm a home component.

[03:14] Which is the app routes with these routes configured, pointing to the home component, and the home component is in this home directory with the template of I'm a home component. Again, load it into the router outlet of my app.component file.

Brendan Whiting
Brendan Whiting
~ 7 years ago

I downloaded the project, ran 'npm install' and got these errors:

npm WARN angular2-in-memory-web-api@0.0.21 requires a peer of @angular/core@^2.0.0 but none was installed.
npm WARN angular2-in-memory-web-api@0.0.21 requires a peer of @angular/http@^2.0.0 but none was installed.
npm WARN angular2-in-memory-web-api@0.0.21 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN angular2-in-memory-web-api@0.0.21 requires a peer of zone.js@^0.6.25 but none was installed.

The package.json file has newer versions specified. Do I need to force it to use older versions?

~ 5 years ago

The plunker preview doesn't work. [console-feed] Failed to parse message! was not an array! TypeScript transpiling to CommonJS, consider setting module: "system" in typescriptOptions to transpile directly to System.register format Error {originalErr: Error, constructor: Object} Assertion failed: loading or loaded