Search code examples
angularangular-ui-router

redirection doesn't change view in angular 4


I'm new with angular and I don't know how redirect correctly. I was doing this simple page in stackblitz to test it, but my redirection doesn't works well, because the info of html doesn't change. What is my fault?

https://stackblitz.com/edit/angular-2bxumx?file=app%2Fpage1%2Fpage1.component.html


Solution

  • You are missing router outlet tag on your html... and also need to add a default route:

    Notice if you add following line in app.compontne.ts your page1 will load when clicked:

    <router-outlet></router-outlet>
    

    Asso, remember to set a default route so that when your app loads the router will have something to show:

    const appRoutes: Routes = [  
      { path: '', redirectTo: 'hello', pathMatch: 'full' },
      { path: 'hello', component: HelloComponent },
      ...
    ];
    

    I recommend you at least glance at the docs on navigation.