2017-09-07 2 views
0

asp.net MVC 프로젝트에서 Angular 2 응용 프로그램을 사용했습니다. Webpack을 모듈 번들로 사용하고 있습니다.asp.net MVC with Angular 2 : 라우팅은 URL의 마지막 부분 만 계정으로 가져옵니다.

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

I했습니다 다음과 같은 경로 :

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로 이동합니다. 추적하면 "admin/apps/details/2"가 아니라 "/ 2"로 이동하는 것을 볼 수 있습니다. URL이 각 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> 

그래서 보이는 :

Angular 2 Router tracing

나는 config 파일에서 이러한 재 작성 규칙을 추가 한 URL? 아무도 내가 뭘 잘못하고 있는지 아니?

Thx!

답변

0

나는 조금 다릅니다. 상대 URL (./) 대신 config-file에서 얻은 실제 URL을 사용합니다. 다른 환경에 맞게 구성 할 수 있습니다.

<!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> 
: 이것은 지금 내 index.cshtml입니다 http://server/yyy/xxx/zzz/admin/apps/details/2

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

: 뭔가처럼이 http://localhost/xxx/admin/apps/details/2

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

서버에 내 로컬 컴퓨터의 URL에

은 같은 것입니다

또한 구성 파일 (URL)의 다시 쓰기 규칙을 업데이트해야했습니다. './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> 

이렇게하면 모든 것이 작동하므로이 기능에 만족합니다.