javascript - 将 Angular 1.x 与 TypeScript 1.5 和 SystemJS 结合使用

Question

我正在尝试将 Angular 1.x 与 TypeScript 1.5.3 和 SystemJS 结合使用。 index.html 页面设置为 System.import('bootstrapper')，它应该启动。

bootstrapper.ts 被编译为 bootstrapper.js 并且只要它不使用 Angular 就可以正常工作(即只做一个 console.log( ) 正常工作)

现在，我想导入并使用 angular 来引导它。我已经完成了 jspm install angular 并且我还使用 tsd 安装了一些 angular 类型。在 bootstrap.ts 文件的顶部引用了类型。

不幸的是，import angular from 'angular' 无法编译，我得到 Module "angular"has no default export。我的问题是:

1. 为什么 import angular from 'angular' 无法编译？查看 angular.d.ts 文件，我看到 declare module 'angular'{ export = angular; } 如果我理解正确的话，它是从变量模块 angular 的默认导出(在上面的类型文件中定义) declare var angular: angular.IAngularStatic
2. 我注意到执行 import 'angular' 编译然后我实际上可以引用 angular 并执行例如angular.module(...)，但我认为我没有正确理解它的工作原理。 import 'angular' 不应该做一个“裸导入”，即运行一个模块只是为了它的副作用吗？如果是这样，是否意味着此导入实际上在全局范围内注册了 angular？

我很确定我没有正确理解模块/类型定义文件在 Typescript 中的工作方式，在此先感谢您的解释。

Answer 1

首先，以下是我将 AngularJS 1.5 与 TypeScript 和 SystemJS 结合使用的首选方式:

index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>

<script>
  SystemJS.import('app')
    .then(function (app) {
      app.bootstrap(document);
    })
    .catch(function (reason) { 
      console.error(reason);
    });
</script>

app/main.ts

import angular from 'angular';

const app = angular.module('app', []);

export function bootstrap(target: Element | Document) {
  angular.bootstrap(target, [app.name], { strictDi: true });
}

tsconfig.json

{
    "compilerOptions": {
      "module": "system",
      "allowSyntheticDefaultImports": true,
      ....
    }
}

config.js(加载器配置，简化)

SystemJS.config({
  transpiler: "typescript",
  packages: {
    "app": {
      "main": "main.ts",
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "typescript"
        }
      }
    }
  }
});

注意事项:

1. 如果您使用的是 JSPM 0.17，请为加载器和转译器指定 "plugin-typescript"，而不是 "typescript"，或者只运行 $ jspm init 并选择一个转译器。
2. 您可以将 angular 作为默认值导入，但它仍会在全局范围内自行注册。
3. 出现语法错误的原因是 angular 及其 angular.d.ts 声明文件包含 CommonJS 样式 export =允许基于模块和全局 namespace 的使用的声明。 SystemJS，为了获得最大的兼容性，在运行时将其插入到默认导出中。
4. TypeScript 编译器需要知道这一点。这可以通过设置 "module": "system" 和/或指定 "allowSyntheticDefaultImports": true 来完成。为了说明和明确起见，我都做了。

5. 如果你没有使用 jspm，你只需要告诉系统 JS 使用 map 或 package config 在哪里可以找到 typescript

   SystemJS.config({
     map: {
       "typescript": "node_modules/typescript"
     }
   });