Angular 2.0 deep-linking does not work. Same from the address bar

Question

Everything works OK when I build and navigate links in the app but typing in the address bar does not! Eventually I want to be able to send a link to a specific app page/path via email and I am not sure how to accomplish that.

I have followed the angular router guide documentation. Correctly I think...

I'm using NodeJS (with express) and in the server I have redirected all traffic to the app root.

app.get("*", function(req, res) {
    console.error("in get *")
    res.redirect("/");
});

In my index.html I have set base

<base href="/">

I have my client routs/paths set as follows

const appRoutes: Routes = [
  { path: 'vendor/registration', component: VendorRegistrationComponent },
  { path: 'vendors', component: VendorListComponent },
  { path: '',  redirectTo: 'vendor/registration', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }    
];

If I type http://localhost:8080/vendors in the browser address bar I get to http://localhost:8080/vendor/registration which kind of makes sense because that's where the server tells the browser to redirect to.

How then should I deep link to my app?

Edit. The Angular tutorial - "TOUR OF HEROES" - also exhibits the same behavior. i.e. entering urls in the browser's address bar directly does not work. The app shows a "loading..." text and does not route to the controller.

Answer 1

The response at your question is explicitly describe in the angular2 documentation