Угловой 4 удалить хэш (#) из URL

Мой app.module.ts

@NgModule({
.......
  providers: [
....
    { provide: LocationStrategy, useClass: HashLocationStrategy},
....
]
});

Когда я удаляю эту часть, она работает на моем локальном хосте, но после выполнения ng build или ng build --prod, когда я обновляю страницу или h5, она не работает. Это дает ошибку 404. Я хочу удалить хеш (#) из моего URL. Любое решение?

Источник

1 ответ

Решение

Давайте поговорим о разнице между HashLocationStrategy а также PathLocationStrategy, Для получения дополнительной информации, проверьте документы

Angular по умолчанию использует PathLocationStrategy,

Допустим, у вас есть следующие маршруты в вашем приложении.

const routes: Route[] = [{
   path: '',
   redirectTo: 'home',
   pathMatch: 'full'
},
{
   path: 'home',
   component: HomeComponent
}];

Когда вы направляетесь к этому компоненту, ваша адресная строка будет выглядеть localhost:4200/home, Если вы использовали HashLocationStrategyэто будет выглядеть localhost:4200/#home, Итак, какая здесь разница?

  • PathLocationStrategy

    Когда вы находитесь на странице Home и ударил F5 кнопку или обновить страницу, браузер сделает запрос localhost:4200/home который будет обрабатываться angular-cli, и вы получите HomeComponent вернулся.

  • HashLocationStrategy

    Точно так же, когда вы нажмете F5, браузер сделает запрос localhost:4200 на этот раз, потому что он игнорирует все, что приходит после #

Если вы не хотите иметь #, затем удалите ту часть, которую вы указали. Это будет PathLocationStrategy по умолчанию. Однако это заставляет нас расстаться, когда вы запускаете приложение за пределами angular-cli что означает построить и обслуживать его с какого-то сервера. Допустим, вы создали приложение с ng build и у вас есть ваши минимизированные, скомпилированные файлы javascript. Вы развернули на некотором сервере, который работает yourdomain.com

Кроме того, вы помещаете это встроенное связанное угловое приложение в некоторый URL, чтобы люди могли получить доступ к вашему приложению из yourdomain.com/ng-appЗдесь все хорошо. Даже когда вы направляетесь в HomeComponent, это будет работать, и ваша адресная строка будет выглядеть yourdomain.com/ng-app/home, Тем не менее, когда вы нажмете F5 в этот момент ваш браузер отправит запрос yourdomain.com/ng-app/home который не существует на вашем сервере, потому что вы обслуживаете свое приложение из /ng-app, Вы должны сделать некоторые настройки на стороне сервера, чтобы вы могли обслуживать все, что начинается с /ng-app/**,

Например, мое весеннее приложение имеет этот метод, который возвращает угловое приложение,

@GetMapping("/ng-app/**")

Поэтому, когда мой сервер получает запрос, который начинается с /ng-app, он просто передает это в угловое приложение, которое будет обрабатывать правильный маршрут.

Надеюсь, это проясняет это для вас.

Источник 
        You should rewrite the URL rules.For every server rules will be diifferent 
        and you can try this for IIS.

        => Create web.config in src folder and copy below code.

        <?xml version="1.0" encoding="utf-8"?>
        <configuration>

        <system.webServer>
          <rewrite>
            <rules>
              <rule name="Angular Routes" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="./index.html" />
              </rule>
            </rules>
          </rewrite>
        </system.webServer>

        </configuration>

       => angular-cli.json file like this:
    "assets": [
        "assets",
        "favicon.ico",
        "web.config"
    ],

       => Let’s build: ng build --prod
Источник
Другие вопросы по тегам