Question

获取我自己的一个合理的常见问题变体，即main.js为404。这是一个简化的目录结构：

 scripts
  chat
   system.config.json
   main.js

这是应该加载应用程序的基本HTML：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
        <base href="/o02iJXqoaG/chat/">

    <script type="systemjs-packagemap" src="/scripts/chat/system.config.json">
    </script>

    <script>
        System.import('app').catch(function(err) { console.error(err); });
    </script>
</head>
<body>
    <chat-app></chat-app>
</body>
</html>

无论html在文件系统中的位置如何，似乎SystemJS都假定基本URL来自配置文件所在的位置/脚本标记从其加载的位置。因此，我将配置文件与应用程序的js文件放在一起。这段代码来自SystemJS.js：

  let baseUrl;
  if (typeof location !== 'undefined') {
    baseUrl = location.href.split('#')[0].split('?')[0];
    const lastSepIndex = baseUrl.lastIndexOf('/');
    if (lastSepIndex !== -1)
      baseUrl = baseUrl.slice(0, lastSepIndex + 1);
  }

将配置放入/scripts/chat/中意味着这会在切断http://host.com/scripts/chat/后正确建立system.config.json的基本URL

我的system.config.json文件看起来像这样（似乎调用System.config()并像这样传递json不再是完成配置的方式-现在，它只是一个json块，其中加载了特定格式的脚本标签；我正在使用SystemJS 2.1.1）

{
    "paths": {
        "npm": "/node_modules/"
    },
    "map": {
        "app": "/Scripts/Chat",
        "shared": "/Scripts/shared",
        "@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",
        "rxjs": "npm:rxjs",
        "angular-in-memory-web-api": "npm:angular-in-memory-web-api"
    },
    "packages": {
        "app": {
            "main": "./main.js",
            "defaultExtension": "js"
        },
        "shared": {
            "defaultExtension": "js"
        },
        "rxjs": {
            "defaultExtension": "js"
        },
        "angular-in-memory-web-api": {
            "main": "./index.js",
            "defaultExtension": "js"
        }
    }
}

我可以将map.app的值更改为我喜欢的任何值，并且似乎没有什么不同； systemJS似乎在使用基本URL作为配置文件所在的位置，并将程序包路径附加到基本URL。

我没有提到packages.app.main中的文件夹（好吧，不是当前目录），但是当浏览器尝试加载main.js时，它是通过URL http://host.com/scripts/chat/app/main.js加载的，在哪里加载？无关的“应用程序”来自哪里？是包名吗？

如果我指定：

"packages": {
    "app": {
        "main": "../main.js"

然后将其从正确的位置加载（没有应用程序文件夹），但这是正确的做法吗？

为什么在声明./main.js时SystemJS假定我的应用程序位于/.../app/main.js中？

0 个答案: