IIS에서 상대 경로를 사용하도록 systemjs.config.js를 구성하는 방법은 무엇입니까?

Question

방금 ​​UI 구성 요소에 Angular를 사용하는 ASP.NET MVC 웹 응용 프로그램을 시작했습니다. 내 프로젝트에 필요한 구성 파일을 연결하십시오 (예 : package.json 및 systemjs.config.js). app.component.ts 템플릿을 테스트하려면 Index.cshtml 테스트 페이지를 만듭니다. 내 로컬 호스트에서 실행할 때 응용 프로그램이 작동합니다. 템플릿에서 사용자 정의 태그 <user-app>을 렌더링하는 페이지를 볼 수 있습니다.

그러나 IIS (dev server)에 웹 응용 프로그램을 배포 할 때 다음과 같은 문제가 발생했습니다. HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).

이

앱 package.json 파일

{ 
    "name": "angular-quickstart", 
    "version": "1.0.0", 
    "description": "QuickStart package.json from the documentation, supplemented with testing support", 
    "scripts": { 
    "build": "tsc -p src/", 
    "build:watch": "tsc -p src/ -w", 
    "build:e2e": "tsc -p e2e/", 
    "serve": "lite-server -c=bs-config.json", 
    "serve:e2e": "lite-server -c=bs-config.e2e.json", 
    "prestart": "npm run build", 
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"", 
    "pree2e": "npm run build:e2e", 
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", 
    "preprotractor": "webdriver-manager update", 
    "protractor": "protractor protractor.config.js", 
    "pretest": "npm run build", 
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 
    "pretest:once": "npm run build", 
    "test:once": "karma start karma.conf.js --single-run", 
    "lint": "tslint ./src/**/*.ts -t verbose" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "MIT", 
    "dependencies": { 
    "@angular/common": "~4.3.4", 
    "@angular/compiler": "~4.3.4", 
    "@angular/core": "~4.3.4", 
    "@angular/forms": "~4.3.4", 
    "@angular/http": "~4.3.4", 
    "@angular/platform-browser": "~4.3.4", 
    "@angular/platform-browser-dynamic": "~4.3.4", 
    "@angular/router": "~4.3.4", 

    "angular-in-memory-web-api": "~0.3.0", 
    "systemjs": "0.19.40", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.1", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "concurrently": "^3.2.0", 
    "lite-server": "^2.2.2", 
    "typescript": "~2.1.0", 

    "canonical-path": "0.0.2", 
    "tslint": "^3.15.1", 
    "lodash": "^4.16.4", 
    "jasmine-core": "~2.4.1", 
    "karma": "^1.3.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "~4.0.14", 
    "rimraf": "^2.5.4", 

    "@types/node": "^6.0.46", 
    "@types/jasmine": "2.5.36" 
    }, 
    "repository": {} 
} 

응용 systemjs.config.js 파일

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      'app': 'app', 

      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 

      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
       //meta: { 
       // './*.js': { 
       //  loader: 'systemjs-angular-loader.js' 
       // } 
       //}, 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

app.component.ts 파일

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'user-app', 
    template: ` 
     <div> 
      <nav class='navbar navbar-inverse'> 
       <div class='container-fluid'> 
        <ul class='nav navbar-nav'> 
         <li> 
          <a [routerLink]="['home']">Home</a> 
         </li> 
        </ul> 
       </div> 
      </nav> 
      <div class='container'> 
       <router-outlet></router-outlet> 
      </div> 
     </div> 
    ` 
}) 
export class AppComponent {} 

,451,515,

main.ts 파일

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule); 

app.module.ts 파일

import { NgModule } from '@angular/core'; 
import { APP_BASE_HREF } from '@angular/common'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 
import { routing } from './app.routing'; 
import { HomeComponent } from './Components/home.component'; 

@NgModule({ 
    imports: [BrowserModule, ReactiveFormsModule, HttpModule, routing], 
    declarations: [AppComponent, HomeComponent], 
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

및 앱 페이지 _Layout.cshtml 파일 또한

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/" /> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - Control Systems Management</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    <script src="~/node_modules/core-js/client/shim.min.js"></script> 
    <script src="~/node_modules/zone.js/dist/zone.js"></script> 
    <script src="~/node_modules/systemjs/dist/system.src.js"></script> 
    <script src="~/systemjs.config.js"></script> 
    <script> 
     //SystemJS.config({ 
     // baseURL: '.' 
     //}); 

     System.import('app').catch(function (err) { 
      console.error(err); 
     }); 
    </script> 
</head> 
<body> 
    <div class="container body-content"> 
     @RenderBody() 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html> 

IIS에서, 나는 응용 프로그램을 구성하고 Default Web Site에서 그것을 ControlSystem 명명했다. http error을 보면 상대 경로 (예 : http://myDomain/controlsystem/app/main.js)라고 가정하기 때문에 서버가 main.js을 찾지 못했습니다. systemjs.config.js을 구성하는 몇 가지 방법을 시도했지만 효과가 없습니다.

이

내 비주얼 스튜디오 프로젝트 나 온라인 등의 문제를 해결하는 방법에 대한 몇 가지 연구를

내부 .ts 파일의 폴더 구조이지만, 나는 비슷한 일을 찾을 수 없습니다. 있다면, 저 같은 지시를 보내주십시오.

저는이 모든 관련 구성 설정을 배우기 위해 Angular and wading online을 처음 사용했습니다.

도움을 주시면 대단히 감사하겠습니다.

Answer 1

이 문제가 발생할 수있는 다른 개발자를 위해. 다행히도, 나는 해결책을 찾아 냈다.

꽤 간단한 해결책입니다. _Layout.cshtml의 경우 <head> 섹션 안에 첫 번째 요소로 <base href="~/" />을 입력합니다.

이 설명서에 따르면 <base href="/">은 각도 라우터에게 URL의 정적 부분을 알려줍니다. 그런 다음 라우터는 URL의 나머지 부분 만 수정합니다.제 경우에는 ~을 "물결표"로 넣어 상대적으로 만드십시오.

희망이 도움이됩니다.