Angular 2 access child routes from URL

Question

Using the following Angular 2 Routes in my main module (app.module), i am able to navigate successfully through all the referenced component views.

const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent},
    {path: 'other', component: OtherComponent},
    {path: 'extra', component: ExtraComponent},
    {path: 'group', component: GroupComponent,
        children: [
        {path: '', component: FirstPageComponent},
        {path: 'comp1', component: FirstPageComponent},      
        {path: 'comp2', component: SecondPageComponent},
        {path: 'comp3', component: ThirdPageComponent},
        {path: 'comp4', component: FourthPageComponent}
        ]
    },
    {path: '**', component: HomeComponent}
];

Also, using the LocationStrategy, described here : LocationStrategy and browser URL styles

i am able to access

http://localhost:3000/extra

by typing it directly on the address bar, since the path is redirected to the root of the application and handled by Angular's routing.

But i cannot directly access a child route like

http://localhost:3000/group/comp2

This produces 404 errors because all the resources being requested start from the path http://localhost:3000/group/... which is not correct.

In-app navigation through RouterLink directives works just fine.

Any advice would be appreciated.

UPDATE :

It appears that the problem is not caused by the Angular routing mechanism or the web server configuration. The routing is working just fine even when reloading or typing the path in the address bar, since the lite-server is configured to redirect all paths to index.html.

The problem is that index.html is loading some scripts and stylesheets using relative paths, as does one of my components (loads a config file).

So when reloading/typing the path

http://localhost:3000/group/comp2

the server does redirect to index.html which is trying to access for example :

<script type="text/javascript" src="assets/vendor/bootstrap/js/bootstrap.min.js" ></script>

but the full src path has now become :

src = "group/assets/vendor/bootstrap/js/bootstrap.min.js"

Which does not exist.

I could use absolute paths to tackle this problem, but since my production environment is not determined and the root path of the application is unknown, this is not possible.

I have been trying to find a way to determine the root path of the application at runtime and make src=".." links dynamic but couldn't work it out, so i decided to edit my routes so that all of them are siblings and none of them has child routes.

Thanks for the help and sorry for the misunderstanding of the issue.

Answer 1

The same as before you need to configure the fallback to index.html describe in the angular2 documentation