Ошибка 404 при попытке доступа к прямому URL в разных модулях с сервером angular-cli

Question

Итак, я пытаюсь получить прямой доступ к URL, используя angular2, с angular-cli. Итак, когда я захожу на URL http://192.168.56.103:3000/app приложение и все модули и их пути работают нормально.

Но когда я попытался получить доступ к пути модулей напрямую (например, http://192.168.56.103:3000/employee/upload), я получил эту ошибку:

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)

Это что-то вроде базы Href не является корнем http://192.168.56.103:3000/, но это http://192.168.56.103:3000/employee. По этой причине мое приложение получило несколько ошибок, чтобы не найти эти файлы. Итак, как я могу решить эту проблему в angular2 с сервером angular-cli?

Кроме того, я попытался добавить базовый Href в мой модуль, но ничего не происходит, и ошибка все еще та же:

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

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

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

Мой маршрут показан ниже:

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);

Нужна помощь, пожалуйста. Спасибо!

Answer 1

Задача решена!

Я просто удалил APP_BASE_HREF и добавил стратегию размещения в главном модуле:

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

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

export class AppModule {
}

Теперь я могу получить доступ к вложенным URL-адресам напрямую.

Answer 2

В вашем файле app-routing.module.ts

замените свой код:

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

с:

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

только если вы можете пойти на компромисс с красивым URL-адресом (http://192.168.56.103:3000/app) для URL- адреса на основе хэша, например ( http://192.168.56.103:3000/ & http://192.168.56.103:3000/)

если вы не хотите изменять свои URL-адреса, обратитесь к: https://github.com/angular/angular-cli/issues/5113