title: Angular 7 - Navigate to dynamic route via url
body: <p>I want to add new routes in that come back from my API.
  But the routes are not getting registered on time. I am quite new with angular when I navigate to e.g./ <a href="http://localhost:4200/iphone-7" rel="nofollow noreferrer">http://localhost:4200/iphone-7</a> this will bring me to the 404 page but when i navigate to that route using <code>&lt;a [routerLink]="['iphone-7']"&gt;this&lt;/a&gt;</code>then it works. How can I make sure my angular app registers the routes on time?</p>
  
  <p>app-routing.module.ts
  </p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule, Router } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  import { ReparationMainComponent } from './reparation-main/reparation-main.component';
  import { BrandSelectionComponent } from './reparations/brand-selection/brand-selection.component';
  import { ModelSelectionComponent } from './reparations/model-selection/model-selection.component';
  import { RepairSelectionComponent } from './reparations/repair-selection/repair-selection.component';
  import { PriceSelectionComponent } from './reparations/price-selection/price-selection.component';
  import { ConfirmSelectionComponent } from './reparations/confirm-selection/confirm-selection.component';
  import { NotFoundComponent } from './not-found/not-found.component';
  import { RestfulService } from './helpers/restful/restful.service'
  
  
  
  var routesMain: Routes = [
    { path: "", component: HomeComponent },
    { path: "reparatie", component: ReparationMainComponent },
    { path: "reparatie/:device/merk", component: BrandSelectionComponent },
    { path: "reparatie/:device/:brand/model", component: ModelSelectionComponent },
    { path: "reparatie/:device/:brand/:model/soort", component: RepairSelectionComponent },
    { path: "reparatie/:device/:brand/:model/:repair/pakket", component: PriceSelectionComponent },
    { path: "reparatie/:device/:brand/:model/:repair/:package/bevestig", component: ConfirmSelectionComponent },
    { path: '404', component: NotFoundComponent },
    { path: '**', redirectTo: '/404' }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routesMain)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {
    constructor(
      private restfullService: RestfulService,
      private router: Router
    ) {
      var routes: Routes = [];
      restfullService.GetWithoutToken("pagina/all").subscribe((observer: Object[]) =&gt; {
        observer.forEach(element =&gt; {
          let title: string = element["titel"];
          title = title.trim().replace(/ /g, "-").toLowerCase();
          let newRoute = { path: title, component: HomeComponent };
          routes.unshift(newRoute);
        });
        this.router.resetConfig([...routes, ...this.router.config]);
      })
  
    }
  }
  </code></pre>
  
  <p>Restfull.service.ts => makes calls to my api
  </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  export class RestfulService {
  
    constructor(private httpClient: HttpClient) { }
  
    private API_URL: string = "http://localhost:5353/api/";
  
    GetWithoutToken(endpoint) {
      return this.httpClient.get(`${this.API_URL}${endpoint}`);
    }
  }
  </code></pre>
  
  <p>I don't have any further modification in my app, it has been standard generated with ng new</p>
  
  <p>p.s.
  This is inside the routes variable 
  <a href="https://i.stack.imgur.com/PnVp6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PnVp6.png" alt="Routes"></a></p>