Как удалить хеш (#) из angular4 при использовании Ubuntu - PullRequest
Новая
       2

Как удалить хеш (#) из angular4 при использовании Ubuntu

0 голосов
/ 07 июня 2018

Я понимаю, что могу удалить хеш из моего URL -

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

, установив это -

{
Обеспечить: LocationStrategy,useClass: HashLocationStrategy}

с этим -

{предоставить: LocationStrategy, useClass: PathLocationStrategy}

Но затем я обнаружил, что нам также нужно изменить конфигурацию нашего веб-сервера,потому что при маршрутизации через URL в приложении не отображается ни одна страница, даже -> 404. Not Found.

Я даже реализовал в приложении -

.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 отбрасываются, и я даже не смог найти замену IIS в Ubuntu, пожалуйста, помогите.

UPDATE

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 

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


     }

1 Ответ

0 голосов
/ 07 июня 2018

Что ж, при локальном запуске приложение обслуживается сервером разработки, который настроен нормально, и все работает нормально (независимо от используемой стратегии пути).

Когда вы запускаете сборку и получаете файл комплекта и обслуживаете его на каком-то другом сервере - скажем, 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) и не знает, что делать с путем /pages/login.

У меня была эта проблема, когда я обслуживал приложение, инкапсулированное в приложении Spring Boot, которое находилось в папке / static.Мне пришлось настроить Spring Controller для перенаправления всех запросов в /index.html.При этом он загрузит приложение, и тогда модуль Routing из angular будет работать нормально.

Есть еще одна вещь.Когда приложение запускается, оно пытается загрузить все пакеты (js & css).Если index.html не обслуживается на сервере в /, то, когда вы заглянете в консоль браузера, вы увидите ошибку, в которой говорится, что не удалось загрузить bundle.js - это можно исправить, настроив процесс сборки angular cli с указанием -deploy-url, поэтому, когда приложение пытается загрузить свой пакет, оно узнает относительный путь от сервера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...