Question

我正在浏览Angular 2的教程，并且能够启动并运行一个简单的应用程序。现在，我正在转到此处https://angular.io/docs/ts/latest/guide/router.html找到的路由和导航部分，但有些东西对我不起作用。

我去了Plunker的实例，并从那里下载了代码。然后，我在Visual Studio 2015中设置了一个解决方案，并插入了Plunker下载的所有代码。该应用程序完美地工作，除了一件事，导航似乎没有工作，因为文档似乎表明。

我开始使用IIS Express和Chrome浏览器在Visual Studio中调试应用程序。主页面加载正确，我可以点击危机中心和英雄的链接。当我单击链接时，组件视图正确加载，一切看起来都很完美。

现在，如果我只是输入URL尝试导航，则组件视图不会加载，我所拥有的只是一个空白页。

例如，我开始在Visual Studio中调试应用程序，并使用URL http://localhost:56074/打开Chrome浏览器。主页面正确加载“组件路由器”标题和“危机中心”和“英雄”的两个链接。现在，如果我只是转到地址栏并将“/ crisis-center”添加到URL的末尾，使其看起来像http://localhost:56074/crisis-center，我会得到一个空白页面。 Chrome控制台显示以下错误：

获取http://localhost:56074/crisis-center 404（未找到）导航到http://localhost:56074/crisis-center

和网络追踪清楚地显示了404危机中心。事实上，如果我使用危机中心主页上的导航链接并点击它来显示危机中心组件视图，然后只需点击刷新按钮刷新页面，而在危机中心视图中，会发生同样的结果

这是Visual Studio问题吗？ IIS Express？其他想法？

我们是.Net开发商店，我们的主要开发环境是Visual Studio。如果这是使用IIS Express在Visual Studio中开发Angular 2应用程序的问题，这可能是一个显示阻止。

如果有人想尝试同样的事情，我可以压缩我的VS解决方案并分享。

任何人都尝试使用IIS Express在Visual Studio中使用Angular 2应用程序，它可以告诉我我做错了什么？

Answer 1

Angular 2默认使用HTML5路由，您必须通过将以下内容添加到web.config来将所有服务器请求映射到index.html

<rewrite>
    <rules>
        <rule name="redirect all" stopProcessing="true">
            <match url="^(.*)$" ignoreCase="false" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
            </conditions>
            <action type="Rewrite" url="PATH TO INDEX.HTML" appendQueryString="true" />
        </rule>
    </rules>
</rewrite>

或实现HashLocationStrategy，如angular docs here

中所述

provide(LocationStrategy, {useClass: HashLocationStrategy})

Answer 2

除了@stasivash回答：如果您无法向项目中的某个路径发出ajax请求，例如YOUR-DOMAIN/api/...，我建议添加以下条件：

<add input="{REQUEST_URI}" negate="true" pattern="^\/api\/.*$" ignoreCase="true" />

导致：

<rewrite>
  <rules>
      <rule name="redirect all" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
              <add input="{REQUEST_URI}" negate="true" pattern="^\/api\/.*$" ignoreCase="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" appendQueryString="true" />
      </rule>
  </rules>
</rewrite>

Answer 3

对于此问题，您需要为您的应用程序使用PathLocationStrategy或HashLocationStrategy。它可以在'angular2 / router'中找到。

使用HashLocationStrategy的示例：

<强> boot.ts

bootstrap(AppCmp, [
       ROUTER_PROVIDERS,
       provide(LocationStrategy, {useClass: HashLocationStrategy})
   ]);

并在您的主要组件中

class AppCmp {
          constructor(location: Location) {
          location.go(location.path());
       }

location.path（）动态地给出了要加载的页面的路径。

Answer 4

老问题，但我想提供这个建议作为未来读者的替代方案，因为我更喜欢重写方法：

基于stas.ivash和Adrian Moisa的答案：我使用了他们的网址重写建议，但我没有列出路线，而是修改了正则表达式以路由所有，不包括我们的Angular 2 CLI生成应用程序所需的文件，以及给定的扩展名（.bundle.js，.bundle.map等等）：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

我无法真正谈及在 Production 环境中使用此RegEx解决方案的性能影响，但它对我们的 Dev 和< em> Stage 环境。

Answer 5

这是我的解决方案：https://csjdpw.atlassian.net/wiki/display/~Genhan.Chen/404+issue+for+Angular+2+routing

指另一个帖子：AngularJS 2 routing

Answer 6

您可以通过实施哈希位置策略来修复错误：

要启用HashLocationStrategy，请执行以下操作：

RouterModule.forRoot(routes, {useHash: true})

网址可以包含一些前缀为#字符的数据。

URL的#部分称为哈希片段。它永远不会发送到服务器，

示例：http://example.com/#/clients

Angular中的路由和导航2

6 个答案: