Question

在有角度的应用程序中，在dist / project_name上运行http-server之后，为什么需要重定向http://127.0.0.1:8080/index.html？我可以删除此选项，以便使其表现得像在开发服务器上运行时一样吗？但是，当我按下http://127.0.0.1:8080/index.html时，它会将我重定向到http://127.0.0.1:8080/home之类。另外，通配符（**）路由无效

我的app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'shortcut-life',
    loadChildren: () => import('../shortcuts-life/shortcuts-life.module').then(m => m.ShortcutsLifeModule)
  },
  {
    path: 'api-integrations',
    loadChildren: () => import('../api-integrations/api-integrations.module').then(m => m.ApiIntegrationsModule)
  },
  {
    path: "**",
    component: PageNotFoundComponent
  }
];



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

}

Answer 1

Angular应用程序是单页应用程序。这意味着当用户连接时，他只需要请求index.html文件。在index.html文件中，他收到了更多请求，说明为什么需要设置服务器，例如如果请求不适合任何文件，则用index.html文件响应。用户将要发出https://yourdomain.com/home或/contact之类的请求，并且没有类似的文件，因此他们先下载index.html，然后再下载.js个文件。边界.js文件决定了向用户显示的路线/页面取决于他在链接中获得的后缀。

关于通配符，您需要在app-routing.module.ts或您设置路线的任何地方进行设置。像这样：{ path: '**', component: NotFoundComponent }请记住，它必须像下面的波纹管中的最后一个：

const routes: Routes = [
  { path: '', component: RoutesComponent, children: [
      { path: '', component: HomeComponent },
      { path: 'login', component: LoginComponent },
      { path: 'admin', redirectTo: '/admin/users', pathMatch: 'full' },
      {
        path: 'admin', component: AdminComponent, canActivate: [AdminGuard], children: [
          { path: 'users', component: UsersComponent },
          { path: 'admins', component: AdminsComponent },
          { path: 'editors', component: EditorsComponent }
        ]
      },
      { path: 'user', component: UserComponent }
  ]},
  { path: '**', component: NotFoundComponent }
];

为什么有角度的应用程序生产版本的本地服务器需要/index.html来加载应用程序

1 个答案: