Angular 4 удалить хеш (#) из URL-адреса

мой app.module.ts

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

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


angular angular4-router
person Damitha    schedule 28.02.2018    source источник

Ответы (2)


arrow_upward
12
arrow_downward

Вы можете ознакомиться с руководством angular по развертыванию.

Давайте поговорим о разнице между 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/**.

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

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

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

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

person Bunyamin Coskuner    schedule 28.02.2018
comment
Итак, из того, что я понял, использование стратегии «Расположение пути» приведет к удалению хэштега, но вызовет несуществующий путь на сервере, и использование метода @RequestMapping(value = "/ng-app/**", method = {RequestMethod.GET, RequestMethod.POST }) поможет мне добиться этого, верно? - person Damitha; 28.02.2018
comment
В яблочко. Используете ли вы Spring для бэкэнда? - person Bunyamin Coskuner; 28.02.2018
comment
Нет.. я использую node.js и экспресс - person Damitha; 28.02.2018
comment
Я не знаю, как это сделать в экспрессе, но должен быть способ сделать то, что я предложил в ответе. - person Bunyamin Coskuner; 28.02.2018
comment
Правильно, если бы я искал это, было бы достаточно NodeJS RequestMappings? - person Damitha; 28.02.2018
comment
RequestMapping — это пружинная аннотация. Я бы не знал, что это эквивалентно в nodejs. Но, может быть, похоже. - person Bunyamin Coskuner; 28.02.2018
comment
Проверьте этот вопрос: stackoverflow.com/questions/6161567/ - person Bunyamin Coskuner; 28.02.2018
comment
@Бруньямин конечно - person Damitha; 28.02.2018
comment
Да, это сработало в моей среде. Но когда я отображаю index.html на другой странице, которая использует iframe, тогда # снова возвращается. Например, ‹!DOCTYPE html› ‹html lang=en› ‹body› ‹div› ‹h1›Test Header‹/h1› ‹/div› ‹стиль iframe=ширина:100%;высота:870px src=index.html›‹/iframe› ‹/body› ‹/html› - person rogue lad; 09.05.2019

arrow_upward
2
arrow_downward

Вы должны переписать правила URL. Для каждого сервера правила будут разными, и вы можете попробовать это для IIS.

=> Создайте web.config в папке src и скопируйте приведенный ниже код.

        <?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>

=> добавьте путь web.config к файлу angular-cli.json:

    "assets": [
        "assets",
        "favicon.ico",
        "web.config"
    ],

=> Давайте построим: ng build --prod

person Ganesh K    schedule 08.03.2019