Angular 2 - 如何使路径相对于项目的根目录？

Question

我在 Scripts 文件夹的 Visual Studio MVC 项目中有以下 systemjs.config.js 文件。路径将是 root/Scripts/systemjs.config.js

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'libs/'
      },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: '/Scripts/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: {
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      '.': {
          defaultJSExtensions: 'js'
      }
    }
  });
})(this);

我所有的 Angular javascript 文件都在 Scripts/app 中，所有模块都位于 libs 中。

在我的生产环境中，我的网站 URL 是 www.mywebsite.com/user/firstpage，而在本地开发网站时是 www.mywebsite.com/firstpage。

我在页面的主布局中加载 Angular 应用程序

<!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->

    <script src="~/libs/core-js/client/shim.min.js"></script>
    <script src="~/libs/zone.js/dist/zone.js"></script>
    <script src="~/libs/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="~/Scripts/systemjs.config.js"></script>
    <script>
        System.import('@Url.Content("~/Scripts/app/main")').catch(function (err)
        {
            console.error(err);
        });
    </script>

在本地主页上，我很好并且有角度负载。在生产的主页上，我收到一个错误，它找不到 main。

www.mywebsite.com/user/Scripts/app/main 404 (Not Found)

如果我稍微使用一下 url，我可以加载 main.js 文件，但是当 libs 文件无法正常工作时，因为它们在生产中从 mywebsite.com 而不是 mywebsite.com/user 查找。所以在生产中，他们将 404 显示为 mywebsite.com/libs/component 而不是 mywebsite.com/user/libs/component。

如何在生产环境和本地环境中从我的网站根目录获取路径？

Answer 1

使用<base href="..." > 标签。为页面上的所有相关链接指定默认 URL 和默认目标。

https://www.w3schools.com/TAGs/tag_base.asp