angular2 在生产模式下也从 url 中删除 #答案

【问题标题】：angular2 remove # from url also in production modeangular2 在生产模式下也从 url 中删除 #
【发布时间】：2017-10-30 12:36:24
【问题描述】：

为了从 url 中删除 # 我把它放在 app.module.ts 中

providers: [
                ...,
                {provide: LocationStrategy, useClass: PathLocationStrategy},
                ...

本地主机：4200/类别

localhost:4200/#/类别

在 localhost 中一切正常，但是当我为生产构建时，使用此命令

ng build --environment=prod --bh=/site/ --aot --no-sourcemap

在文件 enviroment.prod.ts 我有：

export const environment = {
    production: true,
    baseUrlBuilderMask: 'http://site_url/',
    baseUrlApi: 'http://site_url/site/api/',
    baseUrlAssets: 'http://site_url/site/assets/'
 }

我在网上尝试了该网站，但它不起作用。

http://site_url/category

给我一个 404 错误。

我正在使用国际空间站

在我的 web.config 我有

<rewrite>
<rules>
<rule name="AngularJS" 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="/" />
</rule>

我必须改变什么？

【问题讨论】：

你能发一下你的web.config吗？
@Dhyey 我发布了在服务器上进行 url 重写的 Web 配置部分
@Dhyey 也许我必须拆分我的 webConfig 但现在我有另一个问题stackoverflow.com/questions/47019087/…

标签： angular iis angular2-routing

【解决方案1】：

PathLocationStrategy 是 Angular2 中的默认定位策略，如果 # 出现在 url 中，它一定是在某个地方被覆盖了。

除了模块提供者，检查你的模块导入，也可以通过提供 { useHash: true } 作为 RouterModule.forRoot 的第二个参数来覆盖它：

进口：[ ... RouterModule.forRoot(routes, { useHash: true }) // 移除第二个参数 ]

【讨论】：

也许我必须拆分我的 webConfig 但现在我有另一个问题stackoverflow.com/questions/47019087/…

【解决方案2】：

使用ng build --environment=prod --aot --no-sourcemap 而不是ng build --environment=prod --bh=/site/ --aot --no-sourcemap

--bh 指定要在 index.html 中设置的基本 href。省略它会使其在生产模式下工作。

【讨论】：

【解决方案3】：

您需要将所有网址放入 index.html。启用 html5Mode 后，您的网址中将不再使用 # 字符。 # 符号很有用，因为它不需要服务器端配置。没有#，url看起来更好，但它也需要服务器端重写 follow this Link angular Ui router ，这也是angular issue

【讨论】：

也许我必须拆分我的 webConfig 但现在我有另一个问题stackoverflow.com/questions/47019087/…