Question

所以，我试图使用angular2直接访问url，使用angular-cli。因此，当我访问网址 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 Base不是http://192.168.56.103:3000/根，但它是http://192.168.56.103:3000/employee。因此，我的应用程序遇到了一些错误，找不到这些文件。那么如何使用angular-cli服务器解决angular2中的问题？

另外，我尝试在我的模块中添加一个基本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 {
}

现在我可以直接访问嵌套的网址。

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/#/app和http://192.168.56.103:3000/#/employee/upload）

如果您不想更改您的网址，请参考： https://github.com/angular/angular-cli/issues/5113

尝试使用angular-cli服务器访问不同模块中的直接URL时出现404错误

2 个答案: