从静态页面/ URL进行角度路由

Question

Angular 5 (revised)

I have distilled my question, after an evening of reading and testing and trying different thing.

The question becomes, How can I navigate to a path in my angular app, from OUTSIDE the app.

I get the same result - both typing, and linking via href to any path OTHER than the app root, results in the app including the public html

Here is the simpliest scenario I could come up with.

dist
  |- members
  |- index.html

where 'members' is the root of the angular app - specified in (I have tried it doesn't make a difference)

the /index.html (call it the home page) looks like this

<a href="members/login" >login</a>
<a href="members/register" >register</a>

the app router looks like this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';    
import { RegisterComponent } from './components/register/register.component';
import { LoginComponent } from './components/login/login.component';
const appRoutes: Routes = [
    { path: '', component: LoginComponent, pathMatch: 'full' },
    { path: 'register', component: RegisterComponent, pathMatch: 'full' },
    { path: 'login', component: LoginComponent, pathMatch: 'full' }
    { path: '**', redirectTo: 'members/login' }
];    
@NgModule({
    imports: [
        RouterModule.forRoot( appRoutes )
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {}

My 4 scenarios 1) type "localhost/index.html" - gives me the (home page) links 2) clicking either link - gives me the (home page) 3) typing in the address bar "localhost/members/login" or "localhost/members/register" - gives me the (home page) links 4) typing in the address bar "localhost/members" - gives me the app

I am missing something about routing... and cannot figure it out. I hope me restating the problem, garners an answer -

help please thank you

Answer 1

try pathMatch:'full' for the default component

const appRoutes: Routes = [
    { path: '', component: ProfileComponent, pathMatch:'full' },
    { path: 'register', component: RegisterComponent },
    { path: 'login', component: LoginComponent },
    ...
    { path: '**', redirectTo: '/login' }
];