Angular 4 从 url 中删除 hash(#)

Question

我的 app.module.ts

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

当我删除这部分时，它可以在我的本地主机中工作，但是在进行 ng build 或 ng build --prod 之后，当我刷新页面或 h5 时它不会不行。它给出了 404 错误。 我想从我的网址中删除 hash(#)。有什么解决办法吗？

Answer 1

你应该重写 URL 规则。因为每个服务器规则都会不同，你可以在 IIS 上试试这个。

=> 在 src 文件夹中创建 web.config 并复制以下代码。

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

Answer 2

您可以查看the angular guide about deployment

我们来谈谈HashLocationStrategy和PathLocationStrategy的区别。欲了解更多信息，check the docs

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 上运行的某个服务器上

此外，您将这个构建的、捆绑的 Angular 应用程序放在某个 url 上，这样人们就可以从 yourdomain.com/ng-app 访问您的应用程序，这里一切都很好。甚至，当您路由到HomeComponent 时，它会起作用，并且您的地址栏看起来像yourdomain.com/ng-app/home。但是，当您此时点击F5 时，您的浏览器将向您的服务器上不存在的yourdomain.com/ng-app/home 发出请求，因为您从/ng-app 提供您的应用程序。您必须在服务器端进行一些配置，以便可以提供以/ng-app/** 开头的所有内容。

比如我的spring应用就有这个方法返回angular应用，

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

因此，当我的服务器收到以 /ng-app 开头的请求时，它只是将其传递给将处理正确路由的 Angular 应用程序。

希望，这可以为您澄清。