Angular load url when using a router

Question

Im using Angular 7 + router. For example, my home page is localhost:4200, one of my router's url is localhost:4200/route and I have an API end point at localhost:4200/api/foo.

I'm trying to let the browser load the api end point from both locations. If I put an anchor with href pointing to the API end point, both anchor link works perfectly. However, I need to do it programmatically and I have tried all of the following methods

window.open("localhost:4200/api/foo","_self")
window.location.replace('localhost:4200/api/foo');
window.location.href = 'localhost:4200/api/foo';

They all works on the home page but if I'm in the router page, doing so will get me to the home page.

Any help is greatly appreciated!

To be specific, I have a spring boot server with url patterns like /api/*. All other urls are handled by angular. I want the browser to load localhost:4200/api/foo, which is directly handled by a get request defined in the server

Demo:

My nav bar is a component and it stays the same regardless of the router. The code behind that button click is below. Note that the first time I click it under some Angular routed url, it loads the home page, not google.com

onLogIn() {
    window.open('https://www.google.com',"_self");
}

Routing.ts file

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { IndexComponent } from "./index/index.component";
import { MicroserviceComponent } from "./microservice/microservice.component";

const routes: Routes = [
    { path: '', component: IndexComponent},
    { path: 'microservice/:id', component: MicroserviceComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Can you please expand your question, I don't fully understand. You want to use the angular router to navigate to /api/foo? — Jamie Rees
– Jamie Rees, Commented Apr 25, 2019 at 21:27
This is a server-side issue. If you want to mix HTML and API routes on the same domain, then you'll need to look at Angular Universal and how you would add custom Express routes for APIs. — Reactgular
– Reactgular, Commented Apr 25, 2019 at 21:29
@cgTag This does not look like a server side issue. I put a break point in the server and it's not hit since it loads the main page — Fangming
– Fangming, Commented Apr 25, 2019 at 21:39

Fateh Mohamed · Accepted Answer · 2019-04-26 00:17:54Z

1

add pathMatch to your empty route, it's missing tht's why you're redirected to the home component

const routes: Routes = [
 { path: '', component: IndexComponent, pathMatch:'full'},
 { path: 'microservice/:id', component: MicroserviceComponent}
];

answered Apr 26, 2019 at 0:17

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular load url when using a router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related