ค้นหาเว็บไซต์

javascript - วิธีทำให้ systemjs โหลดโมดูลจาก CDN ที่อยู่ในรูปแบบ global?


ข้อผิดพลาดที่ฉันได้รับคือ: EXCEPTION: ReferenceError: cast ไม่ได้ถูกกำหนดใน [null]

การเขียนแอปพลิเคชันตัวรับ Chromecast แบบกำหนดเองจำเป็นต้องใช้ไฟล์ js ต่อไปนี้ซึ่งเปิดเผยฟังก์ชันผ่านตัวแปร global '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

โค้ดนี้ในปัจจุบันยังไม่มีโค้ดสำหรับโหลด 'cast' โดยใช้ systemjs แต่สามารถแก้ไขได้อย่างรวดเร็วโดยการอัปเดต index.html และ cast-receiver-manager.service.ts

คำตอบ #1

ลองเพิ่ม

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

ไปยังการตั้งค่าระบบของคุณจากนั้นประกาศสิ่งที่คุณต้องการนำเข้าจากสคริปต์ในบริการของคุณผ่าน

declare var cast;

นี่จะทำให้คอมไพเลอร์ของคุณสามารถรู้จักชื่อของสิ่งที่คุณกำลังนำเข้าได้

บทความที่เกี่ยวข้อง