Question

我想在angular 8项目中实现路由。我的情况是：我正在从事angular和webpack项目。我刚刚将angular更新到了版本8。我想向应用程序添加路由功能。

作品：

角形路由与“ RouterLinks”一起使用。因此，当我按下菜单按钮时（对于延迟加载和组件），它都可以工作。
路由可与哈希一起使用（但需要在没有哈希的情况下使用）

不起作用：

当我尝试从浏览器URL输入中加载页面时，路由无法正常工作-例如，当我输入“ http://localhost:8080/help”时，错误是：“无法获取/ help”

可能是什么问题？如果需要，我可以复制并粘贴代码，但是在此之前您可以告诉我从哪里开始？在webpack配置中？或在其他地方？谢谢

路由器模块：

const appRoutes: Routes = [
    { path: '', component: FirstComponent, pathMatch: 'full'},
    {
        path: 'help',
        loadChildren: () => import('./helpPage/helpPage.module').then(mod => mod.HelpPageModule),
    },
    { path: '**', redirectTo: ''}
];

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

主模块：

@NgModule({
    imports: [
        FormsModule,
        BrowserModule,
        HelpPageModule
    ],
    declarations: [
        AppComponent,
    ]
    bootstrap: [
        AppComponent
    ]
})

export class MainModule { }

帮助页面模块：

@NgModule({
  declarations: [
    HelpPageComponent,
  ],
  imports: [
    CommonModule,
    RouterModule.forChild([{path: '', component: HelpPageComponent}]),
  ]
})
export class HelpPageModule { }

此外，我想提一下，Angular正在服务器端（SSR）上渲染

Answer 1

通常，您无需在webpack配置中进行任何更改，如果要使用哈希，只需在RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/中添加AppModule

所有页面都将使用哈希

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
  ],
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  providers: [

  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Routind与Angular 8和Webpack

1 个答案: