如何引用已经在Aurelia ViewModel中的应用程序级别定义的库 [英] How to reference library already defined at app level in Aurelia ViewModel

问题描述

Sytemjs是在index.html中定义的，因此从技术上讲，您可以从应用程序中的任何位置执行System.import，它将起作用.但是，在构建过程中，使用该组件时会动态导入该库的组件出现错误:

Sytemjs is defined in index.html so technically you can do System.import from anywhere in your application and it will work. However during the build, my component which dynamically imports a library when it is used, gives an error:

error TS2304: Cannot find name 'System'

这是组件代码:

import { bindable, bindingMode, customElement, noView } from 'aurelia-framework';

@noView()
@customElement('scriptinjector')
export class ScriptInjector {
  @bindable public url;
  @bindable public isLocal;
  @bindable public isAsync;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) protected scripttag;
  private tagId = 'bootTOCscript';

  public attached() {
    if (this.url) {
      if (this.isLocal) {
        System.import(this.url);
        return;
      }

      this.scripttag = document.createElement('script');
      if (this.isAsync) {
        this.scripttag.async = true;
      }

      this.scripttag.setAttribute('src', this.url);
      document.body.appendChild(this.scripttag);
    }
  }

  public detached() {
    if (this.scripttag) {
      this.scripttag.remove();
    }
  }
}

尽管有错误，该项目的构建和运行也很好，我尝试通过添加以下内容来解决此问题:

The project builds and runs just fine despite the error and I tried resolving this by adding:

import System from 'systemjs';

对于确实解决了错误但在运行时出现问题的组件，此导入导致Systemjs在app-build捆绑包中寻找不正确的自身. System.js代码是单独导出的.有没有一种方法可以解决此问题，并且没有错误消息，并且可以在运行时正常工作?

To the component which does resolve the error but at runtime, this import causes Systemjs to look for itself in the app-build bundle which is incorrect. The System.js code is exported seperately. Is there a way to resolve this and have no error message and have it work at runtime?

推荐答案

实际上，当访问全局范围中隐式存在的内容时，这实际上是TypeScript的一般问题.您可以做的是声明变量，而无需实际导入它，就像这样:

This is actually more of a general TypeScript issue when accessing things that implicitly exist in the global scope. What you can do is to declare the variable without actually importing it, like so:

declare var System: System;

(系统的实际类型取决于您的.d.ts的外观)

(The actual type of System will depend on what your .d.ts looks like)

这篇关于如何引用已经在Aurelia ViewModel中的应用程序级别定义的库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！