Angular 4路由器 - 重定向时找不到页面错误

时间:2017-09-12 15:19:18

标签: angular angular4-router

我有一个运行良好的Angular 4应用程序。

我一直在使用HashLocationStrategy,但我决定不再在我的网址中使用哈希值。

我的路由器设置现在看起来像这样......

const index = [
    // UUID v1:
    /^[0-9A-F]{8}-[0-9A-F]{4}-[1][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i

    // UUID v2:
    /^[0-9A-F]{8}-[0-9A-F]{4}-[2][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i

    // UUID v3:
    /^[0-9A-F]{8}-[0-9A-F]{4}-[3][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i

    // UUID v4:
    /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i

   //UUID v5:
   /^[0-9A-F]{8}-[0-9A-F]{4}-[5][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i
].findIndex(x => x.test(stringToTest));

console.log(index === -1 ? 'Unknown UUID' : `UUID version ${index + 1}`);

我的初始页面中有一个链接,就像这样生成......

export const routes: Routes = [
  {
    path: '',
    component: TilesComponent
  },
  {
    path: 'profile/:urlUserName',
    component: ProfileComponent
  },
  {
    path: 'forBusiness',
    component: ForBusinessComponent
  },
  {
    path: 'login',
    component: LoginPageComponent
  },
  {
    path: 'editTile/:urlUserName',
    component: EditTileComponent,
    canActivate: [AuthenticationService]
  }

];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(routes, { });

重定向到此页面...

https://www.tilecase.com/forBusiness

现在,如果我只是将此网址放入浏览器并尝试单独加载forBusiness页面,我就会找不到' Page?错误。

我需要对路线或页面设置做些什么才能使其正常工作?

1 个答案:

答案 0 :(得分:0)

PathLocationStrategy有两种类型 1. HashLocationStrategy 2. PathLocationStrategy

您需要root-module

import {LocationStrategy, PathLocationStrategy} from '@angular/common' // add this in provider { provide: LocationStrategy, useClass: PathLocationStrategy }

中添加此内容
.htaccess

如果您的服务器是apache,只需创建一个名为 <IfModule mod_rewrite.c> Options Indexes FollowSymLinks RewriteEngine On RewriteBase /myappdirectory/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] <--- get the index.html file path starting from public html folder </IfModule> 的文件粘贴此数据

sha256

根据命令

更新最后一行

保存然后刷新您的页面。幸运的是,你的页面正常工作

对于IIS服务器,请点击此链接

http://jasonwatmore.com/post/2017/02/24/angular-2-refresh-without-404-in-node-iis