Routing Issue in Angular 4

Question

I am new to Angular and struggling with setting up the links between my pages. I have read a lot of q & a's from around the web and nothing is resolving my issue. I am getting an error in chrome developer tools that says " Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'app/app.component.html' Error: Cannot match any routes. URL Segment: 'app/app.component.html'"

app.routing-module.ts

import { NgModule, Component }  from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

import { BrickvibeDesignsComponent } from './brickvibe-designs/brickvibe-designs.component';
import { AboutusComponent } from './admin/aboutus.component';
import { ContactusComponent } from './admin/contactus.component';
import { PartnersComponent } from './partners/partners.component';
import { SetsComponent } from './sets/sets.component';
import { PartsComponent } from './parts/parts.component';
import { BlogComponent } from './blog/blog.component';
import { ThemesComponent } from './themes/themes.component';
// import { PageNotFoundComponent } from './not-found.component';

const appRoutes: Routes = [

  { path: 'brickvibe-designs', component: BrickvibeDesignsComponent },
  { path: 'partners', component: PartnersComponent },
  { path: 'parts', component: PartsComponent },
  { path: 'sets', component: SetsComponent },
  { path: 'themes', component: ThemesComponent },
  { path: 'blog', component: BlogComponent },
  { path: 'aboutus', component: AboutusComponent },
  { path: 'contactus', component: ContactusComponent },
  { path: '', redirectTo: './app.component', pathMatch: 'full' },
  // { path: '**', component: PageNotFoundComponent }

];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
    { enableTracing: true } // <-- debugging purposes only
  ),
],

  exports: [ RouterModule ],
})



export class AppRoutingModule {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { BrickvibeDesignsComponent } from './brickvibe-designs/brickvibe-designs.component';
import { AboutusComponent } from './admin/aboutus.component';
import { ContactusComponent } from './admin/contactus.component';
import { PartnersComponent } from './partners/partners.component';
import { SetsComponent } from './sets/sets.component';
import { PartsComponent } from './parts/parts.component';
import { BlogComponent } from './blog/blog.component';
import { ThemesComponent } from './themes/themes.component';

// import { PageNotFoundComponent } from './not-found.component';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],

  declarations: [
    AppComponent,
    AboutusComponent,
    ContactusComponent,
    BrickvibeDesignsComponent,
    PartnersComponent,
    SetsComponent,
    PartsComponent,
    BlogComponent,
    ThemesComponent,
    // PageNotFoundComponent,
  ],



  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="utf-8">
  <title>BrickVibe</title>

  <meta name="description" content="Verbiage">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous");

  <!-- favicon -->
   <link rel="icon" href="/assets/images/favicon_symbol.png" type="image/png">
   <style type="text/css">
          @font-face {
              font-family: "Homeworld Font";
              src: url('font/microgbe.ttf') format("truetype");
          }
          h3.homeworldfont { 
              font-family: "Homeworld Font", Ubuntu, Tahoma;
          }
    </style>

  </head>
<body class="top">
    <div class="wrap"><!--for the sticky footer-->
      <div class="fixedheader"><!--for a sticky header-->
            <nav class="navbar navbar-default navbar-expand-lg navbar-dark bg-primary">
              <div class="logoword"><a class="navbar brand" href='/app/app.component.html'>BrickVibe</a></div>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <div class="navbar-toggler-icon"></div>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item start">
                    <a class="nav-link" href='/app/brickvibe-designs/brickvibe-designs.component.html'>BrickVibe Designs <div class="sr-only">(current)</div></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href='/app/partners/partners.html'>Partners</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href='/app/sets/legosets.html'>Sets</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href='/app/parts/parts.html'>Parts</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href='/app/custom.html'>Custom Designs</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href='/app/blog/blog.html'>Blog</a>
                  </li>
                </ul>
                <form class="form-inline my-2 my-lg-0 ml-4 main-nav-end">
                  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                </form>
                <div class="main-nav-end">
                          <img class="price" src="/assets/images/cart.png" style="height: 40px;">
                          <button type="button" class="btn btn-outline-dark btn-lg">0     ($0.00)</button>
                </div>
              </div>
            </nav> 
        </div>          
<div class="background">

  <app-root></app-root>

  <footer class="footer">
      <ul class="footer-nav">
        <li><a routerLink="['aboutus']">About Us</a></li>
          <li><a routerLink="/contactus" routerLinkActive="active" href="/contactus.html">Contact Us</a></li>
             <li class="footer-li">&copy 2017 BrickVibe. All Rights Reserved</li>
        </ul>
    </footer>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>


</body>
</html>

Answer 1 · 2017-11-15T21:10:23Z

November 15, 2017 9:10pm

You need to remove all the href attributes from all the links. They are not needed in angular as those will attempt to find the html pages you outlined in the href attribute. Which in turn will trigger a page reload. Angular is a single page framework so all other html files are not requested like that. Instead make use of the routerLink directive.

A common pattern is to leave the index.html file alone, and then in our app.component.html file do all the initial work. So I would move most of the things out of the index.html file. Here is what I would do:

1. Remove everything inside the 'wrap' class and add it to the app.component.html
2. For now also put the footer tag content inside app.html....but only for now. 
3. As a result your index.html will be: (notice how only app-root is left?) Well that is the entry point to your site

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="utf-8">
  <title>BrickVibe</title>

  <meta name="description" content="Verbiage">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous");

  <!-- favicon -->
   <link rel="icon" href="/assets/images/favicon_symbol.png" type="image/png">
   <style type="text/css">
          @font-face {
              font-family: "Homeworld Font";
              src: url('font/microgbe.ttf') format("truetype");
          }
          h3.homeworldfont { 
              font-family: "Homeworld Font", Ubuntu, Tahoma;
          }
    </style>

  </head>
<body class="top">

  <app-root></app-root>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>


</body>
</html>

Now insdie app.component.html you will need to specify your routeroutlet like so: Bottomline you need to remove all of the href attributes and replace them with the routerLink and give it the path you specified in the router module. When you then click on the link it should be rendered somewhere of course. And that is why I added the <router-outlet></router-outlet> directive for you. That directive specifies where your routed components should render. (I added the routerLink for a few to show you what changes need to be done)

    <div class="wrap"><!--for the sticky footer-->
      <div class="fixedheader"><!--for a sticky header-->
            <nav class="navbar navbar-default navbar-expand-lg navbar-dark bg-primary">
              <div class="logoword"><a class="navbar brand" routerLink="/">BrickVibe</a></div>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <div class="navbar-toggler-icon"></div>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item start">
                    <a class="nav-link" routerLink="/brickvibe-designs">BrickVibe Designs <div class="sr-only">(current)</div></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" routerLink="partners">Partners</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" >Sets</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" >Parts</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" >Custom Designs</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" >Blog</a>
                  </li>
                </ul>
                <form class="form-inline my-2 my-lg-0 ml-4 main-nav-end">
                  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                </form>
                <div class="main-nav-end">
                          <img class="price" src="/assets/images/cart.png" style="height: 40px;">
                          <button type="button" class="btn btn-outline-dark btn-lg">0     ($0.00)</button>
                </div>
              </div>
            </nav> 
        </div>
         <router-outlet></router-outlet> <!--This is where your routed components will load-->
       </div>

Answer 2 · 2017-11-16T00:58:29Z

November 16, 2017 12:58am

Thank you so much for your help!!

Answer 3 · 2017-11-20T10:15:29Z

November 20, 2017 10:15am

hey everyone !! I am new to the community . I just want to know if this course is updated for angularJS2.0

Welcome to the Treehouse Community

Looking to learn something new?

Tracy Nickel

Tracy Nickel

Routing Issue in Angular 4

3 Answers

Alexander La Bianca

Alexander La Bianca

Tracy Nickel

Tracy Nickel

aashish pasricha

aashish pasricha