如何让 systemjs 从 CDN 加载全局格式的模块？答案

【问题标题】：How to get systemjs to load module from CDN that is in global format?如何让 systemjs 从 CDN 加载全局格式的模块？
【发布时间】：2016-08-28 19:07:11
【问题描述】：

我得到的错误是：例外：ReferenceError：cast 未在 [null] 中定义

编写自定义 Chromecast 接收器应用程序需要使用以下 js 文件，该文件通过全局“cast”变量公开功能：

//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js

我想使用 systemjs 将这个脚本作为模块加载，而不是在 index.html 中使用脚本标签。

这是一个 Angular2 和 TypeScript 应用程序，因此在某些服务 MyService 中，我希望能够导入“cast”并使用它。

index.html

    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        },
        paths: {
          'cast': '//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js'
        },
        meta: {
          '//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js': {format: 'global'}
        },      
});

      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

myService.ts

import {Injectable} from 'angular2/core';
import cast from 'cast';

@Injectable()
export class MyService {
  public init = () => {
    cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.NONE);
  }
  ...
}

一个示例 Angular2 + TypeScript + Chromecast Receiver 应用程序可以从以下位置克隆：

https://github.com/rmtuckerphx/angular2-chromecast-receiver-starterkit

此代码目前没有任何代码可以使用 systemjs 加载“cast”，但可以通过更新 index.html 和 cast-receiver-manager.service.ts 快速修改

【问题讨论】：

标签： javascript typescript angular chromecast systemjs

【解决方案1】：

尝试添加

   map: {
     cast-receiver: '//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js'
}

到你的系统配置，然后声明你想从你的服务脚本中导入的东西，

declare var cast;

这将使您的编译器能够识别您正在导入的东西的名称。

【讨论】：

您的回答让我走上了正轨。谢谢你。我删除了 meta 部分，将 cast-receiver 放在路径部分，并将“declare var cast”添加到 myService.ts。另外，还在myService.ts中添加了一行：“import cast from 'cast-receiver';”