使用Ubuntu时如何从angular4删除哈希（＃）

Question

I realise that i can remove hash from my url - 我意识到我可以从网址中删除哈希-

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

by setting this - 通过设置-

{ {
provide: LocationStrategy, useClass: HashLocationStrategy } 提供：LocationStrategy，useClass：HashLocationStrategy}

with this - 有了这个 -

{ provide: LocationStrategy, useClass: PathLocationStrategy } {提供：LocationStrategy，useClass：PathLocationStrategy}

But then i found out that we need to change our web server configuration also, because then when routing through url's in the application, it doesn't show any page, not even --> 404 Not Found. 但是后来我发现我们也需要更改我们的Web服务器配置，因为当在应用程序中通过url进行路由时，它不显示任何页面，甚至-> 404 Not Found。

I have even implemented in - 我什至在-

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;
          }
     }
     }

But to no avail. 但无济于事。 I am using Ubuntu, so i guess any setting on IIS is discarded and i could not even find any substitute to IIS in ubuntu, please help. 我正在使用Ubuntu，所以我想IIS上的任何设置都将被丢弃，而我甚至在ubuntu中都找不到IIS的替代品，请帮忙。

UPDATE 更新

angular-cli.json angular-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"
    }
    }
  }

index.html index.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;
          }
     }
     }


     }

Answer 1

Well, when running on locally, the application is served by the development server which is configured ok and everything works fine (no matter what path strategy you use). 好吧，当在本地运行时，应用程序由开发服务器提供服务，该服务器配置正确，一切正常（无论您使用哪种路径策略）。

When you run the build and you get the bundle file and you serve it on some other server - lets say NGINX, you must configure the server to redirect all the requests to your index.html (root) file. 当您运行构建并获得捆绑文件并将其提供给其他服务器时（比如说NGINX），您必须配置服务器以将所有请求重定向到您的index.html（根）文件。 If you do that everything will work fine 如果这样做，一切都会很好

Here is an example on how you can configure NGINX 这是有关如何配置NGINX的示例

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

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

You have to configure your server to redirect all requests to index.html. 您必须配置服务器以将所有请求重定向到index.html。 My guess is that your server intercepts the request http://localhost:4200/pages/login (assuming your server runs on port 4200) and doesn't know what to do with the path /pages/login . 我的猜测是您的服务器截获了http：// localhost：4200 / pages / login请求（假设您的服务器在端口4200上运行），并且不知道如何处理/pages/login路径。

I had this issue when I served the application encapsulated in a Spring Boot application served under /static folder. 当我处理封装在/ static文件夹下的Spring Boot应用程序中的应用程序时遇到了这个问题。 I had to configure Spring Controller to redirect all requests to /index.html. 我必须配置Spring Controller来将所有请求重定向到/index.html。 Doing so, it will load the application and then the Routing module from angular will work just fine. 这样做，它将加载应用程序，然后从angular路由模块就可以正常工作。

There is also one more thing. 还有一件事。 When the application is started, it tries to load all bundles (js & css). 当应用程序启动时，它将尝试加载所有包（js和css）。 If the index.html is not served on the server on / , then when you will look in browser console, you will see an error saying could not load bundle.js - this can be fixed by configuring angular cli build process with specifying --deploy-url so when the application tries to load its bundle, it will know the relative path from the server. 如果index.html不在/的服务器上提供，那么当您在浏览器控制台中查看时，会看到一条错误消息，提示无法加载bundle.js-这可以通过使用以下命令配置angular cli构建过程来解决： deploy-url，因此当应用程序尝试加载其捆绑包时，它将知道来自服务器的相对路径。

使用Ubuntu时如何从angular4删除哈希（＃）

问题描述

1 个解决方案

解决方案1
0 2018-06-07 12:53:24

使用Ubuntu时如何从angular4删除哈希（＃）

问题描述

1 个解决方案

解决方案1 0 2018-06-07 12:53:24

解决方案1
0 2018-06-07 12:53:24