Getting systemjs to load a module from a CDN in global format: The ultimate guide

I keep encountering the following error: EXCEPTION: ReferenceError: cast is not defined in [null]

To create a custom Chromecast receiver application, you need to utilize a specific js file that exposes the necessary functionality through a global 'cast' variable:

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

Instead of including a script tag in index.html, I am looking to load this script as a module using systemjs.

Since this is an Angular2 and TypeScript application, I aim to import 'cast' in a service called MyService and utilize it.

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);
  }
  ...
}

You can clone a sample Angular2 + TypeScript + Chromecast Receiver application from the following link:

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

Although the provided code does not currently include any implementation to load 'cast' using systemjs, it can easily be modified by updating index.html and cast-receiver-manager.service.ts

Answer №1

You can enhance your code by including the following:

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

In order to import specific functionalities from the script into your service, add the line below to your system config:

declare var cast;

By doing this, you will enable your compiler to identify the elements you are importing correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on sending emails with AngularJS and the Ionic framework

I have been attempting to send an email by using various links, but without success. I am looking for guidance on how to successfully send an email. Below is the code I have been using for sending emails. Any suggestions for changes would be greatly apprec ...

What is the ideal way for data to interact with components?

I'm currently working on projects involving Angular and Vue technology. I am curious about the best approach to handling data within components. For instance, imagine a page component with two child components responsible for displaying specific sets ...

Vanishing Submenus

I'm experiencing an issue with my navbar and its drop-down menus. When I hover over the submenu, it doesn't stay visible as expected. I've tried different approaches such as using jQuery, the + operator in CSS, and even creating a separate h ...

Having trouble retrieving JSON data from the open weather API

I'm working on a small website to display the weather of a specific city using an API. However, I am facing an issue where I can't seem to display the temperature from the response. Below are snippets of my JavaScript and HTML files: var ap ...

Utilize the $setValidity function within ng-repeat to validate input fields

I am facing an issue with my form that is being repeated in an ng-repeat. Below is a snippet of the form. I need to implement custom validation using $setValidity in the controller. However, I am struggling to access input names by index in the controlle ...

Retrieving the output of a parent computed method in VueJS, using a child component

I am facing difficulties in passing the dynamically changing value of a computed method to my child component. I am creating a button component with different save states, but the button always remains stuck on one state and does not update according to th ...

Fill in input field based on choice from the drop-down menu - JavaScript

I am facing an issue where I cannot add text inside the text box based on the dropdown selection. For example, if I select option2 from the dropdown, the textbox should be populated with option2. (function() { 'use strict'; setInterva ...

Developing with Angular 1.4.8 and JavaScript involves the process of building a constructor function to inherit properties into a third object

DEVELOPER TOOLS Using Angular 1.4.8 and lodash QUERY: REVISIT To clarify my query: Create an object (articles) Apply a constructor Import the properties of a third object, but place it in proto folder to prevent cluttering the root with a large colle ...

Let the Vuejs transition occur exclusively during the opening of a slide

Trying to implement a smooth transition when the toggle button is clicked. Successfully applied the transition effect on the slider, but struggling to animate the text inside the div.hello class upon sliding open. <transition name="slide"> <a ...

How can I check if the VPN is turned off in a React application?

import React from "react"; import { Offline, Online } from "react-detect-offline"; export default function DropDown() { return ( <> <Online>Only displayed when connected to the internet</Online> <Offline ...

Vue warning: An issue occurred in the nextTick function: "NotFoundError: The operation insertBefore failed to execute on Node"

I've encountered a puzzling issue in my Vue web app where sporadic error messages are causing my app to come to a standstill. Error message 1: [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Nod ...

Determine the elapsed time in seconds between two specified moments

I am trying to implement two input fields in my HTML, one for a starting point and another for an end point. The user will enter two times like this: For example: [8:15] - [14:30] alert("XXXXX seconds") I want to calculate the number of seconds between 8 ...

The overlappingmarkerspidifier is throwing an error because it is unable to access the property '__e3_' of an undefined variable

I am attempting to implement the overlapping marker spidifier feature in my code. I followed the instructions provided in this link: functioning code of oms However, upon creating the OverlappingMarkerSpiderfier object, I encounter the error: Uncaught Typ ...

"Exploring the capabilities of Node WebKit in conjunction with Serial

Currently, I am in the process of building an application using Node WebKit and require access to the SerialPort on my Windows 8 PC. To install third-party modules with C/C++ addons, I followed the instructions outlined in this guide: https://github.com/n ...

Changing the font family for a single element in Next.js

One unique aspect of my project is its global font, however there is one element that randomly pulls font families from a hosted URL. For example: https://*****.com/file/fonts/Parnian.ttf My page operates as a client-side rendered application (CSR). So, ...

Having trouble getting the onclick function to work in order to switch out the images

This is the HTML code that I used Here is the JavaScript code, but the onclick function seems to not be working ...

Establishing Redux States within the Provider (error: Provider encountering useMemo issue)

Exploring redux for state management has been a new journey for me. I am hoping it will help reduce API calls and increase speed, but I've hit a roadblock with an error that I can't seem to figure out. To troubleshoot, I created a simplified vers ...

Despite having installed v18.3, the Angular CLI specifically demands a minimum Node.js version of either v14.20, v16.14, or v18.10

Today I decided to upgrade my Angular CLI from v14.1 to v16. After upgrading, I encountered an issue every time I tried to run ng, which indicated that the CLI required a minimum version of node.js: The Angular CLI requires a minimum Node.js version of ei ...

The unitPngFix plugin ensures that the display of hidden div elements cannot be altered

I have been trying to resolve an issue with PNG files and transparency in IE browsers on my website. I have made progress, but there seems to be a problem specifically with IE6. To display transparent PNG images correctly on my site in IE browsers, I am u ...

issue encountered when trying to deploy a React application on GitHub

I successfully created a todolist on localhost. Now, I am facing issues while deploying it on GitHub. When I run '$ npm run deploy' in the command prompt, I encounter errors. To troubleshoot, I have added 'homepage', 'predeploy&ap ...