angular2中的路由在实时服务器中不起作用

Question

我已经使用 angular2 建立了一个网站，它在 localhost 上运行良好，但是当我将它部署到我的服务器上时，所有 css 和 js 链接似乎都断开了。

ex:localhost:4200/home 工作正常，但 ip:4200/home 为 css 和 js 文件提供 404。

ip:4200 本身会重定向到 home，但是输入 ip:4200/home 会给出 404，即使在重新加载时也会给出 404

我想我需要修复这些路由。

我的路由器ts文件如下：

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


import { HomeComponent }  from './component/home.component';
import { RegisterComponent } from './component/register.component';
import { ProductComponent } from './component/product.component';

const appRoutes: Routes = [

  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },

  {
    path: 'home',
    component: HomeComponent
  },
  {
   path: 'register',
   component: RegisterComponent
  },
   {
    path: 'product',
    component: ProductComponent
  }


];

导出常量路由：ModuleWithProviders = RouterModule.forRoot(appRoutes);

而 app.module.ts 是这样的：

import { NavBar } from './component/nav-bar.component';
import { RegisterService } from './services/register.service';
import { HomeService } from './services/home.service';
import { ProductService } from './services/product.service';
import { ProductComponent } from './component/product.component';
import { NavBar1 } from './component/nav-bar1.component';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    RegisterComponent,
    NavBar,
    ProductComponent,
    NavBar1

  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
         {
           path: 'register',
           component: RegisterComponent
         }
       ]),

    routing
  ],
  providers: [
RegisterService,
HomeService,
ProductService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

切换到HashLocationStrategy

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, ...

或将您的服务器配置为支持 HTML5 pushState（将对不存在文件的请求重写为 index.html。

Answer 2

您应该包含 .htaccess 并将此代码放在根目录下。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

我希望我能让你开心。