无法从远程程序包加载Angular2 CLI生产版本

Question

我正在尝试从远程CDN URL加载角度包。 使用-prod标志使用角CLI编译角资产。

ng build -prod

以下是来自主机应用程序（ http://localhost:4200 ）中的system-config文件。

{
  map: {'sharedcomponent':'http://mycdn.com/shared-component'}
  packages: {
    "http://mycdn.com/shared-component": {
      "main": "main.js",
      "meta": {
        "*": {
          "format": "system",
          "scriptLoad": true
      }
    }
  }
}

主机应用程序稍后导入该组件时将返回一个空对象。

System.import('sharedcomponent')
  .then(function(comp){
    console.log(comp); //outputs {}
  });

在控制台中检查SystemJS.defined时，我可以看到所有捆绑模块都在“ localhost：4200”域而不是CDN域下加载。

但是，如果我部署非捆绑版本，则所有内容均正确加载。

谁能提供任何见解？ 这是systemjs还是angular CLI的问题？

Answer 1

通过SystemJS代码进行调试后，我能够确定问题所在。

调用System.register时，将使用System.decanonicalize方法将模块名称解析为绝对URL。 该方法使用基本url对象，而不是捆绑包加载到的包的URL。

解决方法是将名称解析推迟到可以访问loader.address属性的reduce步骤。

幸运的是，您可以利用钩子进行必要的更改。

加载systemjs后，我将覆盖System.register函数，以使其不会将名称反规范化。

System.register = function(name, deps, declare) {
  if (typeof name != 'string') {
    declare = deps; deps = name; name = null;
  }

  if (typeof declare == 'boolean')
    return this.registerDynamic.apply(this, arguments);

  this.pushRegister_({
    amd: false,
    entry: {
      name: name,
      deps: deps,
      declare: declare,
      declarative: true,
      executingRequire: false,
      esmExports: false,
      evaluated: false,
      originalIndices: null,
      execute: null,
      normalizedDeps: null,
      groupIndex: null,
      module: null,
      esModule: null
    }
  });
};

然后，我重写了reduceRegister_函数，以查找元数据标志，以确定是否应使用decanonicalize方法来解析模块名称。

如果将其设置为false，我只需使用load.address和基本URL对象来解析名称。

System.reduceRegister_ = function(load, register){
  if (register) {
    let entry = register && register.entry;
    entry.name = (load.metadata && load.metadata.decanonicalize === false) ?
      new URL(entry.name, load.address).href.replace(/%05/g, '#') :
      this.decanonicalize(entry.name, load.address);
  }
  this.__proto__.reduceRegister_.call(this, load, register);
}

软件包配置在这里：

{
  map: {'sharedcomponent':'http://mycdn.com/shared-component'}
  packages: {
    "http://mycdn.com/shared-component": {
      "main": "main.js",
      "meta": {
        "*": {
          "format": "system",
          "scriptLoad": true,
          "decanonicalize":false
      }
    }
  }