How do I link internal files in Angular?

Question

I'm trying to link my login page from the navbar. This is what I have for navbar:

<div class="navbar-container">
  <ul id="slide-out" class="side-nav center-align">
    <li>
      <div class="user-view center-align">
        <a><i class="medium material-icons close-button">close</i></a>
      </div>
    <li><a routerLink="../login">Login</a></li>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="small material-icons {{updateMe()}}">filter_list</i></a>
</div>

And this is my file structure:

However, it just doesn't link to the component. The error I get is:

core.js:1542 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'

Am I using relative paths wrong? How can I fix this? Thank you!

score 5 · Accepted Answer · edited Jun 19 '18 at 19:23

5

At first, you need to set all paths in routes array which is present in app.module.ts. Please check if you've developed it perfectly.

edited Jun 19 '18 at 19:23

baj9032

2,414
3
22
40

answered Jun 19 '18 at 16:13

omkar

216
2
10

ahh I hadn't added it to my app routing module - thank you! I'll accept your answer when 5mins is up :) – may Jun 19 '18 at 16:19

score 1 · Answer 2 · answered Jun 19 '18 at 16:39

1

You need to have the route configured in your app.routing.module.ts as follows,

@Routes([
    {path: '/login', component: LoginComponent,useAsDefault: true}
])

answered Jun 19 '18 at 16:39

Sajeetharan

216,225
63
350
396

why did you remove the answer? – Sajeetharan Jun 19 '18 at 16:58

How do I link internal files in Angular?

2 Answers2