path: "**" for not found page

Question

I`am use routing in angular 2 with typescript.

In main index.html i add <base href="">, not <base href="/">, because i need special route for my project, and everything is working, but i have some problem with not found page. Here is a part of my app.route.ts:

const appRoutes: Routes = [
    { component: LaskComponent, path: "table_per" },
    { component: LaskComponent, path: "table_per/:id" },
    { component: DashboardComponent, path: "dashboard" },
    { component: LoginComponent, path: "login" },
    { path: "", pathMatch: "full", redirectTo: "login" },
    { component: HomeComponent, path: "home" },
    { component: NotFoundComponent, path: "not_found" },
    { path: "**", redirectTo: "not_found" },
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

And this is NotFoundComponent:

import { Component } from "@angular/core";
@Component({
    template: ' 
        <div class="container">
            <h1>Not found page</h1>
        </div>',
})
export class NotFoundComponent {};

When i start a project in chrome on localhost, i redirect to localhost/login, and everything is OK, but when i check a not found page like this localhost/sxvknb, i get this page localhost/sxvknb/login and redirect in login form again. What is the problem? Maybe with

{ path: "**", redirectTo: "not_found" }

Launch my project i can start with 3 deploys:

Answer 1

This might fix your issue:

import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [BrowserModule, routing /* or RouterModule */], 
  providers: [{provide: APP_BASE_HREF, useValue : '/' }]
]); 

See also Angular 2 router no base href set