无法导航到Angular中的特定页面

Question

I cant navigate o specific page in my angular app, in this case i want to navigate to (tabs/market-palce/fornecedores) from app.component.ts here my routing Modules.

 Error: Cannot match any routes. URL Segment: 'tabs/market-palce/fornecedores'

and if go from other page thats not app.component.hmtl and print the url it show this

/tabs/default/(marketTab:market-place/fornecedores//cartoesTab:cartoes/default//profileTab:profile/default//experienciaTab:experiencia/default)

How could i go to fornedores page from app.component.ts ???

How could i make this work?? i have no ideia.

im trying this in app.comoponent.ts

 this.routerExtensions.navigate(['tabs/market-place/fornecedores', { relativeTo: this.activeRoute });

app.routing

    const routes: Routes = [

        {   path: "",
            redirectTo: "/login",
            pathMatch: "full"
        },

        {   path: "login",
            component: LoginComponent
        },

        {
            path: "tabs",
            loadChildren: "~/app/tabs/tabs.module#TabsModule"
        }
]

tabs routing

const routes: Routes = [

    {
        path: "default", component: TabsComponent, children: [


            {
                path: "market-place",
                component: NSEmptyOutletComponent,
                loadChildren: "~/app/market-place/market-place.module#MarketPlaceModule",
                outlet: "marketTab"
            },
            {
                path: "cartoes",
                component: NSEmptyOutletComponent,
                loadChildren: "~/app/cartoes/cartoes.module#CartoesModule",
                outlet: "cartoesTab"
            },
            {
                path: "profile",
                component: NSEmptyOutletComponent,
                loadChildren: "~/app/profile/profile.module#ProfileModule",
                outlet: "profileTab"
            },
            {
                path: "experiencia",
                component: NSEmptyOutletComponent,
                loadChildren: "~/app/experiencia/experiencia.module#ExperienciaModule",
                outlet: "experienciaTab"
            }
        ]
     }
];

market-place Routing

const routes: Routes = [
    {path: "", redirectTo: "default" },
    {path: "default", component: MarketPlaceComponent},
    {path: "fornecedores", component: FornecedoresComponent }

];

Answer 1

As you can see in the documentation

{   path: "",
    redirectTo: "/login",
    pathMatch: "full"
},

to the end of the array.

Technically, pathMatch = 'full' results in a route hit when the remaining, unmatched segments of the URL match ''. In this example, the redirect is in a top level route so the remaining URL and the entire URL are the same thing.

The other possible pathMatch value is 'prefix' which tells the router to match the redirect route when the remaining URL begins with the redirect route's prefix path.

Don't do that here. If the pathMatch value were 'prefix', every URL would match ''.

Try setting it to 'prefix' then click the Go to sidekicks button. Remember that's a bad URL and you should see the "Page not found" page. Instead, you're still on the "Heroes" page. Enter a bad URL in the browser address bar. You're instantly re-routed to /heroes. Every URL, good or bad, that falls through to this route definition will be a match.

The default route should redirect to the HeroListComponent only when the entire url is ''. Remember to restore the redirect to pathMatch = 'full'.

Learn more in Victor Savkin's post on redirects.

Answer 2

Configuration

First I suppose you are being redirected to the login route or page. It's quite normal.

When angular matches paths, the "" comes first, which redirects on the "/login" , after what the "login" and then the "tabs" .

Your problem is that the route "" matches with every route, even "tabs" so you're always redirected to the /login path.

You may then need to place the empty path at the end, such as:

const routes: Routes = [
  {   
      path: "login",
      component: LoginComponent
  },
  {
      path: "tabs",
      loadChildren: "~/app/tabs/tabs.module#TabsModule"
  }
  {   
      path: "",
      redirectTo: "/login",
      pathMatch: "full"
  },
]

(Personally I usually use "**" instead of "" because I want to be aware that It's the end of my roads, and to be redirected on unknowns paths)

You can read more about all these tricks on the official documentation's page .

Navigation

Now if you want to navigate, you should use the Router -service and give the path.

You may use the absolute path to be faster, like using

/tabs/market-palce/fornecedores

instead of

tabs/market-palce/fornecedores .

(Notice the / at the beginning)

constructor(
   ...
   private router: Router,
   ...
) {...}

navigateToTabs() {
   const path = '/tabs/market-palce/fornecedores'
   this.router.navigate([path]); // <-- Here the is your path
}

You may also want to learn more ways of navigating using angular here , again on the official documentation's page