Question

我已经使用ngx-rocket yeoman生成器在我的Angular 4应用程序中成功设置了某些页面的路径。例如，我创建了一个名为＆＃39; eat＆＃39;当你到我的主页www.haakon.io然后点击进入该页面的eat链接。如果您尝试在浏览器中键入该链接，例如http://www.haakon.io/eat并尝试在那里导航，则会显示404错误页面。我知道这与深层连接问题有关，但我尝试了一些有角度的1.5解决方案而且它们不起作用。具体来说，我在index.html页面中设置了基本href：

  <base href="/"/>

这是我的app-routing.module.ts文件：

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

const routes: Routes = [
  // Fallback when no prior route is matched
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

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

这是我的route.service.ts：

import { Routes } from '@angular/router';

import { ShellComponent } from './shell/shell.component';

/**
 * Provides helper methods to create routes.
 */
export class Route {

  /**
   * Creates routes using the shell component and authentication.
   * @param routes The routes to add.
   * @return {Routes} The new routes using shell as the base.
   */
  static withShell(routes: Routes): Routes {
    return [{
      path: '',
      component: ShellComponent,
      children: routes
    }];
  }

}

最后我的eat-routing.module.ts：

import { Route } from '../core/route.service';
import { extract } from '../core/i18n.service';
import { EatComponent } from './eat.component';

const routes: Routes = Route.withShell([
  { path: 'eat', component: EatComponent, data: { title: extract('Eat') } }
]);

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class EatRoutingModule { }

Answer 1

经过更多调查后发现文件已从服务器上删除，并影响了服务器级别的默认路由。

最初我想过删除这个问题，但决定发布答案，以防有人帮忙。

解决方案是创建一个包含以下内容的.htaccess文件，并将其放在主机上的根文件夹中：

# If the request is a file, folder or symlink that exists, serve it up
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.+)$ - [S=1]

# otherwise, serve your index.html app
RewriteRule ^(.+)$ /index.html

现在可以通过直接在浏览器中输入或从其他网站链接来访问www.haakon.io/art。

Answer 2

我知道这有点旧，但是如果您无法修改.htaccess，还有一种方法可以让角度应用使用哈希样式路由而不是网址路由。它使用的网址并不像传统的......

www.haakon.io /＃/技术

但它们绕过了大多数可能导致问题的服务器配置。

要使用它，只需将它添加到您的路由器模块导入......

RouterModule.forRoot（routes，{useHash：true}）

我最近必须在一个项目上使用它，因为它是一个运行简单http服务器的服务的UI，可以解释/作为物理文件/文件夹之后的所有内容，并且没有.htaccess。如果用户手动重新加载浏览器并且URL不是默认URL，则使用哈希格式是不混淆服务器的唯一方法。

Angular 4 ngx-rocket深度链路路由问题

2 个答案: