将外部库添加到我的 Angular 6 项目仅在我在 localhost 中运行时才有效答案

【问题标题】：Adding external library to my Angular 6 project only works when I'm running in localhost将外部库添加到我的 Angular 6 项目仅在我在 localhost 中运行时才有效
【发布时间】：2019-11-15 15:35:36
【问题描述】：

我将 Chrome Api 库（来自 https://www.gstatic.com/cv/js/sender/v1/cast_sender.js）动态添加到我的项目中，并在使用 localhost:4200 运行时按预期工作。但是，当我使用我的 IP 运行时它不起作用：192.168.0.144:4200。在这种情况下，应用程序会运行，但 Chrome 库不起作用。

这是我的代码：

  cast: any;

  constructor() {

  }

  ngOnInit(): void {
    console.log('ngOnInit()');

    const script = window['document'].createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1');
    window['document'].body.appendChild(script);

    window['__onGCastApiAvailable'] = (isAvailable) => {
      if (isAvailable) {
        this.cast = window['chrome'].cast;
        const sessionRequest = new this.cast.SessionRequest('<MY_APP_ID>');
        const apiConfig = new this.cast.ApiConfig(sessionRequest,
          s => { },
          status => { if (status === this.cast.ReceiverAvailability.AVAILABLE) { } }
        );
        const x = this.cast.initialize(apiConfig, this.onInitSuccess, this.onInitError);
      } else {
        console.log('CAST API is not available !!');
      }
    };

  }

适用于 localhost。

不使用 IP...

我已经尝试在 index.html 中添加 lib，而不是在组件中动态添加，并且得到了相同的结果。我认为可能是 CORS 问题。然后我尝试配置这个代理，没有成功：

{
  "/v1": {
    "target": "https://www.gstatic.com/cv/js/sender/",
    "secure": false,
    "changeOrigin": true
  }
}

并改变这一行：

script.setAttribute('src', '/v1/cast_sender.js?loadCastFramework=1');

但只有本地主机继续工作...帮助！

【问题讨论】：

仍然卡在这里。如果有人解决了我的问题，我将进行 50 美元的 Paypal 转账。

标签： angular angular6 localhost google-cast dynamic-script-loading

【解决方案1】：

我终于解决了这个问题！ Chrome 发件人应用需要支持 HTTPS。所以，我用 ngrok 制作了一个 Tunel 并开始工作。

【讨论】：