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？有谁知道我做错了什么？

THX！

Answer 1

我做得有点不同。我现在使用的是从配置文件中获取的真实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>

我还需要更新配置文件中的重写规则（网址从＆＃39; ./ dist＆＃39;更改为＆＃39; dist＆＃39;）：

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

这种方式一切正常，所以我很满意。

使用Angular 2的asp.net MVC：路由仅将URL的最后部分考虑在内

1 个答案: