Angular2 server url navigation

Question

I have scoured the web for a basic understanding of how to navigate to a specific component in Angular2 when manually typing in the url (or page refresh). I was unable to find anything except beta angular2 implementation almost 2 years old (Such as here). I have a simple angular web application that is using node/express. Getting the client side navigation works fine but getting the client to handle a server request I am not sure how this works or even how to implement. Can anyone help.

I am just simply doing: http://localhost:3000/login - This works fine when navigating in the app but when I refresh it does not work. I would think there would be a ton of resources on how to simply implement this but I had no luck on finding something basic. Thanks!

main.ts:

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule }   from '@angular/router';

import { AppComponent }  from './components/app.component';

import { LoginComponent } from './components/auth/login';
import { IndexComponent } from './components/home/index';

import { PageNotFoundComponent }   from './components/not-found.component';


@NgModule({
  imports:      [ BrowserModule,
  RouterModule.forRoot([
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: IndexComponent
  },
  { path: '**', component: PageNotFoundComponent }
])],
  declarations: [ AppComponent,IndexComponent,LoginComponent,PageNotFoundComponent ],
  providers: [  ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

Answer 1

Would be great to see the router definition of your server.

This works fine when navigating in the app but when I refresh it does not work

What do you mean? Does your server reply with a 404 status code?

If so, here's what's happening:

• Nagivate on localhost:3000 : Your browser do a GET request on / and the index.html is returned to the client.
• Then angular starts and instanciate your default component, IndexComponent
• Then, you click on a link which points to localhost:3000/login
• Here, no request are made to your server, angular just instanciate the right component: LoginComponent
• If you refresh, your browser makes a GET request on localhost:3000/login, which give you a 404 because this route doesn't exist.

To fix your problem, use a wildcard to serve your file:

app.get('*', (req, res) => {
  res.status(200).sendFile(indexFile);
});

Answer 2

You have to make all requests return View that contains root Angular2 app tag. Then no matter what is your URL it'll load the same view and it will let Angular2 handle routing.

How to handle angular2 route path in Nodejs

Answer 3

Have you tried to put in your index.html in the <header> section something like:

 <base href="/">

or sometimes it also need:

 <base href="/index.html">