Angular 8 - URL 使用 routerLink 加载，但在 LOCALHOST 中的浏览器中直接访问时不显示

Posted 2023-03-13

【中文标题】Angular 8 - URL 使用 routerLink 加载，但在 LOCALHOST 中的浏览器中直接访问时不显示

【英文标题】：Angular 8 - URL loads with routerLink but doesn't show when directly access in the browser in LOCALHOST

【发布时间】：2019-12-21 23:36:56

【问题描述】：

我已经开发了 Angular 8 应用程序，我正在使用 routerLink 导航组件，这些组件工作正常，没有任何问题，但是当我直接在浏览器中输入相同的 URL 时，它没有显示任何内容，在控制台中，我是看到如下错误

例如，我打开主页http://localhost:4200/home，我在这里添加了routerLink去http://localhost:4200/about，我将能够成功查看，但是如果我直接在ULR中输入URLhttp://localhost:4200/about没有任何显示

我已经处理了 app-routing.model.ts

const routes: Routes =
    [
         path: 'home', component: HomeComponent ,
         path: 'about', component: AboutComponent ,
         path: '**', redirectTo: '/home', pathMatch: 'full' 
    ];
    @NgModule(
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
)

我有 header.component.ts 来处理导航栏，所以我添加了 <router-outlet></router-outlet> 在 header.component.html 然后我在 app.component.ts 中包含了 header.component.ts 的选择器 <app-header></app-header> 然后最后在 index.html 中包含了 app.component.ts 的选择器，即 <app-root></app-root>

如果有问题请告诉我。

在问这个问题之前，我已经浏览了下面的内容，没有任何帮助

RouterLink does not work Angular 2 Routing Does Not Work When Deployed to Http Server Angular2 routing - url doesn't change and page doesn't load

【问题讨论】：

可以分享一下你的AppComponent的模板吗？

你好，@WillAlexander 我已经更新了这个问题的细节，因为它有点解释性，谢谢！！

当我直接访问 URL 时，我在控制台中看到错误为 Failed to load resource: the server responded with a status of 404 (Not Found)

你试过重启开发服务器吗？你有没有修改过base href？您是否尝试过将您的 router-outlet 放入 AppComponent 模板中，这样会更有意义？

是的，我已经尝试将路由器插座放入 app.component 并且我在 index.html 文件中有``，但仍然是同样的问题

【参考方案1】：

在服务器上我们可以使用 hashStrategy 进行路由。

在路由文件中只需将RouterModule.forRoot(routes) 替换为RouterModule.forRoot(routes,useHash : true)。

【讨论】：

简单有效的解决方案

谢谢小伙子，在谷歌上大量搜索后，它解决了我的问题。

【参考方案2】：

对于 apache 服务器，您可以添加 .htaccess 文件

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -f [OR]
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

我们必须确保 index.html 中的 base href 是

【参考方案3】：

这可能有点奇怪，但我在 cssclass="class class2"

中有一个尾随空格