asp.net MVC with Angular 2：路由仅考虑 URL 的最后一部分

Question

我的 asp.net MVC 项目中有一个 Angular 2 应用程序。我正在使用 Webpack 作为模块打包器。

我有这个 index.cshtml:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>xxx</title>
    <base href="./">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="./favicon.ico">
</head>
<body>
    <app>Loading app...</app>
    <script type="text/javascript" src="./dist/inline.bundle.js"></script>
    <script type="text/javascript" src="./dist/polyfills.bundle.js"></script>
    <script type="text/javascript" src="./dist/styles.bundle.js"></script>
    <script type="text/javascript" src="./dist/vendor.bundle.js"></script>
    <script type="text/javascript" src="./dist/main.bundle.js"></script>
</body>
</html>

我有以下路线：

const appRoutes: Routes = [
{
    path: "apps",
    children: [
        {
            path: "",
            component: AppOverviewComponent,
        },
        {
            path: "**",
            component: PageNotFoundComponent
        }
    ]
},
{
    path: "admin",
    component: AdminComponent,
    children: [
        {
            path: "apps",
            children: [
                {
                    path: "details/:id",
                    component: AdminAppDetailsComponent
                }
            ]
        },
        {
            path: "",
            redirectTo: "apps",
            pathMatch: "full"
        },
        {
            path: "**",
            component: PageNotFoundComponent
        }
    ]
},
{
    path: "",
    redirectTo: "apps",
    pathMatch: "full"
},
{
    path: "**",
    component: PageNotFoundComponent
}
];

我用它们：

    RouterModule.forRoot(
        appRoutes, 
        { enableTracing: true }
    )

当我在应用程序中导航时，一切正常。

当我使用浏览器导航到例如“http://localhost/xxx/admin/apps/details/2”时，它会转到 PageNotFoundComponent。通过跟踪，您可以看到它是导航到“/2”而不是 "admin/apps/details/2"。

我在配置文件中添加了这些重写规则：

    <rule name="favicon" stopProcessing="true">
      <match url="(.*\/+)?(favicon\.ico)$" />
      <action type="Rewrite" url="./dist/{R:2}"/>
    </rule>
    <rule name="fonts" stopProcessing="true">
      <match url="(.*\/+)?(.*\.[tff|woff2|woff]+)$" />
      <action type="Rewrite" url="./dist/{R:2}" />
    </rule>
    <rule name="chunks" stopProcessing="true">
      <match url="(.*\/+)?(.*\.chunk\.js)$" />
      <action type="Rewrite" url="./dist/{R:2}" />
    </rule>
    <rule name="bundles" stopProcessing="true">
      <match url="(.*\/+)?(.*\.bundle\.js)(\.map)?$" />
      <action type="Rewrite" url="./dist/{R:2}{R:3}"/>
    </rule>
    <rule name="assets" stopProcessing="true">
      <match url="(.*\/+)?\/assets\/(.*)$" />
      <action type="Rewrite" url="./assets/{R:2}"/>
    </rule>
    <rule name="api" stopProcessing="true">
      <match url="(.*\/+)?\/api\/(.*)$" />
      <action type="Rewrite" url="./api/{R:2}"/>
    </rule>
    <rule name="angularjs routes" stopProcessing="true">
      <match url="^(.*)$" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/$" negate="true"/>
        <add input="{REQUEST_URI}" pattern="^.*/api/.*$" negate="true"/>
      </conditions>
      <action type="Rewrite" url="./" />
    </rule>

所以看起来 URL 会去 Angular 2 路由器，但它只占用 URL 的最后一块？有人知道我做错了什么吗？

谢谢！

Answer 1

我做的有点不同。我现在使用从配置文件中获得的真实 URL 而不是相对 URL (./)。这可以针对不同的环境进行配置。

在我的本地机器上，URL 类似于：http://localhost/xxx/admin/apps/details/2

<add key="baseHref" value="http://localhost/xxx/"/>

在服务器上是这样的：http://server/yyy/xxx/zzz/admin/apps/details/2

<add key="baseHref" value="http://server/yyy/xxx/zzz/"/>

现在这是我的 index.cshtml:

<!doctype html>
<html lang="en">
<head>
   <script>
       var apiUrl = "@System.Configuration.ConfigurationManager.AppSettings["baseHref"]";
       document.write("<base href='" + apiUrl + "' />");
   </script>

   <meta charset="utf-8">
   <title>xxx</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
   <app>Loading app...</app>
   <script type="text/javascript" src="dist/inline.bundle.js"></script>
   <script type="text/javascript" src="dist/polyfills.bundle.js"></script>
   <script type="text/javascript" src="dist/styles.bundle.js"></script>
   <script type="text/javascript" src="dist/vendor.bundle.js"></script>
   <script type="text/javascript" src="dist/main.bundle.js"></script>
</body>
</html>

我还需要更新配置文件中的重写规则（网址从“./dist”更改为'dist'）：

<staticContent>
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>
<rewrite>
  <rules>
    <rule name="favicon" stopProcessing="true">
      <match url="(.*\/+)?(favicon\.ico)$" />
      <action type="Rewrite" url="dist/{R:2}"/>
    </rule>
    <rule name="fonts" stopProcessing="true">
      <match url="(.*\/+)?(.*\.[tff|woff2|woff]+)$" />
      <action type="Rewrite" url="dist/{R:2}" />
    </rule>
    <rule name="chunks" stopProcessing="true">
      <match url="(.*\/+)?(.*\.chunk\.js)$" />
      <action type="Rewrite" url="dist/{R:2}" />
    </rule>
    <rule name="bundles" stopProcessing="true">
      <match url="(.*\/+)?(.*\.bundle\.js)(\.map)?$" />
      <action type="Rewrite" url="dist/{R:2}{R:3}"/>
    </rule>
    <rule name="assets" stopProcessing="true">
      <match url="(.*\/+)?\/assets\/(.*)$" />
      <action type="Rewrite" url="assets/{R:2}"/>
    </rule>
    <rule name="api" stopProcessing="true">
      <match url="(.*\/+)?\/api\/(.*)$" />
      <action type="Rewrite" url="api/{R:2}"/>
    </rule>
    <rule name="angularjs routes" stopProcessing="true">
      <match url="^(.*)$" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/$" negate="true"/>
        <add input="{REQUEST_URI}" pattern="^.*/api/.*$" negate="true"/>
      </conditions>
      <action type="Rewrite" url="./" />
    </rule>
  </rules>
</rewrite>

这样就可以了，我很满意。

asp.net MVC with Angular 2：路由仅考虑 URL 的最后一部分

asp.net MVC with Angular 2: routing only takes last part of URL into account

asp.net-mvc

angular2-routing