将 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 安装了一些角度类型。类型在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; }，如果我理解正确，它是从变量的模块角度的默认导出（在上面的类型文件中定义）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 = 声明，以允许基于模块和全局命名空间的使用。 SystemJS 为了获得最大的兼容性，会在运行时将其插入到默认导出中。
4. TypeScript 编译器需要意识到这一点。这可以通过设置"module": "system" 和/或指定"allowSyntheticDefaultImports": true 来完成。为了阐述和明确，我已经这样做了。

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

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

Answer 2

[...] 如果我理解正确，是模块的默认导出 变量的角度

不，这不是正在发生的事情。如果有意义的话，Angular 会将整个命名空间导出为导出。

import angular from 'angular' 正在尝试从模块中导入 default。

您想要的是import * as angular from 'angular';，它将整个导出作为变量导入。