Question

我在我的组件中使用System。

export class LoginComponent {
    constructor() {
        System.import('app/login/login.js');
    }
}

文件加载正常，但TypeScript编译器说

Error:(10, 9) TS2304: Cannot find name 'System'.

我的浏览器控制台说

EXCEPTION: Error: Uncaught (in promise): Error: Error: http://localhost:3000/app/login/login.js detected as register but didn't execute.
        at ZoneDelegate.invoke (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:332:29)
        at Object.NgZoneImpl.inner.inner.fork.onInvoke (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:2111:31)
        at ZoneDelegate.invoke (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:331:35)
        at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:227:44)
    Error loading http://localhost:3000/app/login/login.js

Error: Uncaught (in promise): Error: Error: http://localhost:3000/app/login/login.js detected as register but didn't execute.(…)

我该如何解决？

Answer 1

您有一个错误，因为您没有SystemJS库的打字。

大部分时间我们都没有在TypeScript文件中明确使用System.import，因为我们可以让它在幕后操作。我的意思是当您使用以下内容时，TypeScript编译器会将导入转换为SystemJS支持的内容：

import {...} from 'app/login/login';

export class LoginComponent {
  constructor() {
  }
}

您可以注意到我删除了js扩展名，因为SystemJS允许配置在解析模块时添加的默认扩展名：

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });

Answer 2

如何使用ES6语法
导入我的.js文件

两步：

在this.axis.defaultLabelFormatter.call(this);
中声明JS文件
声明模块'app / login / login'{ var foo：any; export = foo; }
在TypeScript中使用它

从'app / login / login'登录导入*;

现在只需使用'--module system'

编译代码

System.import用法导致我的控制台出现多个错误

2 个答案: