时间戳

首页 > 解决方案 > 使用 Ubuntu 时如何从 angular4 中删除哈希 (#)

html - 使用 Ubuntu 时如何从 angular4 中删除哈希 (#)

问题描述

我意识到我可以从我的网址中删除哈希 -

http://localhost:4200/#/pages/login

通过设置这个 -

{
提供：LocationStrategy，useClass：HashLocationStrategy }

有了这个 -

{ 提供：LocationStrategy，useClass：PathLocationStrategy }

但是后来我发现我们还需要更改我们的 Web 服务器配置，因为当通过应用程序中的 url 路由时，它没有显示任何页面，甚至没有 --> 404 Not Found。

我什至在 -

app.routing.ts

export class AppRoutingModule {
 constructor(private router: Router) {
  this.router.errorHandler = (error: any) => {
     let routerError = error.toString();
          if (routerError.indexOf('Cannot match any routes') >= 0 ) {
              this.router.navigate(['/pages/login']);
          } else {
              throw error;
          }
     }
     }

但无济于事。我正在使用 Ubuntu，所以我猜 IIS 上的任何设置都被丢弃了，我什至在 ubuntu 中找不到任何 IIS 的替代品，请帮忙。

更新

角-cli.json

   {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
    "version": "1.0.0-alpha.6",
    "name": "coreui-angular"
     },
    "apps": [
       {
        "root": "src",
        "outDir": "dist",
        "assets": [
            "assets"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
            "scss/style.scss"
        ],
        "scripts": [
            "../node_modules/chart.js/dist/Chart.bundle.min.js",
            "../node_modules/chart.js/dist/Chart.min.js"
        ],
        "environmentSource": "environments/environment.ts",
        "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
        }
       }
     ],
     "e2e": {
       "protractor": {
           "config": "./protractor.conf.js"
       }
      },
     "lint": [
    {
        "project": "src/tsconfig.app.json"
    },
    {
        "project": "src/tsconfig.spec.json"
    },
    {
        "project": "e2e/tsconfig.e2e.json"
    }
    ],
   "test": {
      "karma": {
        "config": "./karma.conf.js"
       }
      },
   "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "serve": {
        "port": 4200,
        "host": "localhost"
    }
    }
  }

索引.html

   <head>

   <base href="./">

   //code for links like bootstrap ,etc.
   </head>

app.routing.ts

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

 // Layouts
 import { FullLayoutComponent } from './layouts/full-layout.component';
 import { SimpleLayoutComponent } from './layouts/simple- 
  layout.component';

  import { AuthGuard } from './authguard/authguard';


   export const routes: Routes = [
  {
  path: '',
  redirectTo: 'pages/login',

   pathMatch: 'full',
    },
    {
     path: '',
    component: FullLayoutComponent,

     children: [
     {
      path: 'dashboard',
      loadChildren: './dashboard/dashboard.module#DashboardModule',
      canActivate: [AuthGuard],
      data: [{
      title: 'Master Systems'
    },
    {
      expectedRole: '18'
    },
    {
      expectedRole: '0'
    },
     ]
    },
    {
      path: 'components',
      loadChildren: './components/components.module#ComponentsModule',
      canActivate: [AuthGuard],
      data: [{
        title: 'Master Systems'
      }
      ]

      },

     //code


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

 export class AppRoutingModule {
   constructor(private router: Router) {
    this.router.errorHandler = (error: any) => {
       let routerError = error.toString();
          if (routerError.indexOf('Cannot match any routes') >= 0 ) {
              this.router.navigate(['/pages/login']);
          } else {
              throw error;
          }
     }
     }


     }

标签： htmlangularwebserver

解决方案

好吧，当在本地运行时，应用程序由配置好的开发服务器提供服务，并且一切正常（无论您使用什么路径策略）。

当您运行构建并获得捆绑文件并在其他服务器上提供它时 - 比如说 NGINX，您必须配置服务器以将所有请求重定向到您的 index.html（根）文件。如果你这样做，一切都会好起来的

这是一个关于如何配置 NGINX 的示例

server {
  listen 80;
  server_name localhost ;
  index index.html;
  root /var/www/exchange-frontend;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

您必须配置服务器以将所有请求重定向到 index.html。我的猜测是您的服务器拦截了请求http://localhost:4200/pages/login（假设您的服务器在端口 4200 上运行）并且不知道如何处理 path /pages/login。

当我提供封装在 /static 文件夹下的 Spring Boot 应用程序中的应用程序时，我遇到了这个问题。我必须配置 Spring Controller 以将所有请求重定向到 /index.html。这样做，它将加载应用程序，然后来自 Angular 的路由模块将正常工作。

还有一件事。当应用程序启动时，它会尝试加载所有包（js & css）。如果 index.html 没有在 / 上的服务器上提供，那么当您在浏览器控制台中查看时，您会看到一个错误，指出无法加载 bundle.js - 这可以通过配置 angular cli 构建过程并指定 -- deploy-url 所以当应用程序尝试加载它的包时，它会知道来自服务器的相对路径。

推荐阅读