Question

我的app.module.ts

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

当我删除此部分时，它可以在我的localhost中运行但是在执行 ng build 或 ng build --prod 后，当我刷新页面或h5时它没有不行。它给出了404错误。 我想从我的网址中删除哈希（＃）。有解决方案吗

Answer 1

您可以查看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

上运行的某个服务器

此外，您将此构建的捆绑角度应用程序放在某个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开头的请求时，它会将此传递给角度应用程序，该应用程序将处理正确的路由。

希望，这可以为你澄清。

Answer 2

        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

Angular 4从url中删除哈希（＃）

2 个答案: