angular 2 cli部署的app无法加载路由

时间:2017-06-26 18:35:14

标签: angular

我有一个角度2 cli应用程序,我使用网络托管部署。我运行build --prod并将/ dist的内容复制到web-root文件夹,结构如下:

enter image description here

我的index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Invison</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- Material css -->
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">


</head>
<body>
    <app-root>Loading...</app-root>
</body>
</html>

应用程序已正确部署,但是当我点击路线时,它会给我404找不到错误。我究竟做错了什么?我是否需要更改索引文件中的基本href以及如何更改?

更新

我的app.module:

const appRoutes: Routes = [
{ 
  path: '', 
  component: HomeComponent, 
},
{
   path: 'agreement', 
  component: AgreementComponent,
}
];


@NgModule({
  declarations: [
  AppComponent,
  HomeComponent,
  ContactComponent,
  HeaderComponent,
  ServicesComponent,
  AboutUsComponent,
  FooterComponent,
  AgreementComponent
  ],
  imports: [
  RouterModule.forRoot(appRoutes),
  BrowserModule,
  FormsModule,
  HttpModule,
  MdlModule,
  ScrollToModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

0 个答案:

没有答案