Comment configurer systemjs.config.js pour utiliser le chemin relatif dans IIS?

Question

Je viens de démarrer une application Web ASP.NET MVC qui utilise Angular pour ses composants d'interface utilisateur. Plumbed les fichiers de configuration nécessaires dans mon projet (par exemple package.json et systemjs.config.js). Créez une page de test Index.cshtml pour tester le modèle app.component.ts. L'application fonctionne lorsqu'elle est exécutée sous mon hôte local. Je peux voir la page rendant la balise personnalisée <user-app> à partir du modèle.

Cependant, le problème est que lorsque je déploie l'application Web dans IIS (serveur de dev), j'ai rencontré le HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier) suivant.

C'est l'application package.json fichier

{ 
    "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": {} 
} 

L'application systemjs.config.js fichier

/** 
* 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); 

Le fichier 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 {} 

Le fichier main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule); 

Le fichier 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 {} 

et page fichier app _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> 

également dans IIS, j'ai configuré une application et l'a nommé ControlSystem sous Default Web Site. En regardant le http error, le serveur n'a pas trouvé main.js car il est supposé être un chemin relatif (par exemple http://myDomain/controlsystem/app/main.js). J'ai essayé plusieurs approche pour configurer systemjs.config.js mais cela n'a pas fonctionné.

C'est la structure du dossier de .ts fichiers dans mon projet studio visuel

Je l'ai fait quelques recherches en ligne sur la façon de résoudre ce problème, mais je ne pouvais pas trouver un semblable. S'il y en a, veuillez me diriger vers une telle référence.

Je suis assez nouveau à Angular et à patauger en ligne pour apprendre tous ces paramètres de configuration connexes.

Toute aide est grandement appréciée.

Answer 1

Pour le bénéfice d'autres développeurs qui peuvent rencontrer ce problème. Heureusement, j'ai compris la solution.

C'est pourtant une solution assez simple. Dans _Layout.cshtml, à l'intérieur de la section <head>, mettez <base href="~/" /> comme premier élément.

Selon cette documentation https://angular.io/guide/router, le <base href="/"> indique au routeur angulaire quelle est la partie statique de l'URL. Le routeur modifie ensuite uniquement la partie restante de l'URL.Dans mon cas, j'ai dû mettre ~ "tilde" pour le rendre relatif.

Espérons que cela aide.