404 error when try to access a direct url in different modules with angular-cli server

Question

So, I'm trying to access directly the url using angular2, with angular-cli. So, when I access the url http://192.168.56.103:3000/app the application and all modules and their paths works fine.

But when I tried to access the modules path directly (such as http://192.168.56.103:3000/employee/upload) I got this error:

upload:10 GET http://192.168.56.103:3000/employee/styles.e7a71cdafac175e58c1d2b9d347ab895.bundle.css 
upload:18 GET http://192.168.56.103:3000/employee/inline.d41d8cd98f00b204e980.bundle.js 
upload:18 GET http://192.168.56.103:3000/employee/styles.d6983b9a92d269fc6b29.bundle.js 
upload:18 GET http://192.168.56.103:3000/employee/scripts.916e0bd9d793165463ce.bundle.js 
upload:18 GET http://192.168.56.103:3000/employee/main.aa7bb73e6fe0d8821716.bundle.js 404 (Not Found)

It is something like, the Href Base is not the http://192.168.56.103:3000/ root, but it is http://192.168.56.103:3000/employee. So for that reason, my application got some errors to not found those files. So How can I solve that problem in angular2 with angular-cli server?

Also, I tried to add an base Href in my module, but nothing happens and the error still the same:

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

@NgModule({
  imports: [
  ],
  declarations: [

  ],
  providers: [
     ....
    {provide: APP_BASE_HREF, useValue : '/' }
  ]
})
...

My routing is showed below:

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
...

const entity : string = 'employee';

const employeeRoutes: Routes = [
    { path: entity,
        children: [
        { path: '', redirectTo: 'list', canActivate: [AuthGuard] },
        { path: 'list', component: ListComponent, canActivate: [AuthGuard] },
        { path: 'upload', component: UploadComponent, canActivate: [AuthGuard] },
        { path: 'edit/:id', component: EditComponent, canActivate: [AuthGuard] }
        ]
    }
];

export const employeeRouting: ModuleWithProviders = RouterModule.forChild(employeeRoutes);

Need some help please. Thanks!

I saw some useful links [here](http://stackoverflow.com/a/35285068/2130322) and [here](http://stackoverflow.com/a/39103122/2130322). So, I'll try these. — Celso Agra, Dec 16 '16 at 02:50

score 7 · Accepted Answer · answered Dec 16 '16 at 13:15

7

Problem solved!

I just remove APP_BASE_HREF and added location strategy in the main module:

// ...
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
  imports: [
    // ...
  ],
  declarations: [
    // ...
  ],
  providers: [
    // ...
    {provide: LocationStrategy, useClass: HashLocationStrategy}
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule {
}

Now I can access nested urls directly.

answered Dec 16 '16 at 13:15

Celso Agra

1,389
2
15
37

Thank you so much. I wasted a lot of time to fix this issue. My problem that if i refresh page which has id parameter in router, it gives 404 error in runtime.js. Without id parameter in router, there was no error. – Halil İbrahim Oymacı Feb 25 '19 at 12:38
What if we dont want to use hashes? Any solution to keep using the default `PathLocationStrategy`? – SDekov Jul 23 '21 at 15:21
@SDekov did you manage to find any solution to pathlocationstrategy way of doing? – Bozhinovski Oct 20 '21 at 08:31
I wouldn't say this is a solution since it causes other issues like assets referencing problems. – Lucas Eduardo Feb 18 '23 at 16:36

score -1 · Answer 2 · answered Apr 17 '20 at 09:12

In your app-routing.module.ts file

replace your code:

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

with:

@NgModule({
  imports: [RouterModule.forRoot(routes,{ useHash: true })],
  exports: [RouterModule]
})

only if you can compromise with the pretty url(http://192.168.56.103:3000/app) to hash based url something like (http://192.168.56.103:3000/#/app & http://192.168.56.103:3000/#/employee/upload)

if you don't want to change your urls then refer to: https://github.com/angular/angular-cli/issues/5113

404 error when try to access a direct url in different modules with angular-cli server

2 Answers2