Typeular 2.x,@ type和SystemJS的Angular 1.x - 使用全局类型

Question

我试图使用Angular 1.x与新的TS2和@types注册表,但遇到问题.看起来@types没有使用打字注册表所称的"全局"类型.我遇到以下错误:

error TS2686: 'angular' refers to a UMD global, but the current file is a module. Consider adding an import instead.

角度代码如下:

import "angular";
import "angular-route";

const app = angular.module("charter-app", ["ui.bootstrap", "ui.router", "templates", "charter-app.controllers"]);

tsconfig.json:

{
    "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "inlineSources": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [ "node_modules/@types/" ],
    "types": [ "angular", "angular-ui-bootstrap", "angular-ui-router" ],
    "outFile": "app.js"
    }
 }

试着使用以下内容

"devDependencies": {
    "@types/angular": "^1.5.20",
    "@types/angular-ui-bootstrap": "^0.13.35",
    "@types/angular-ui-router": "^1.1.34",

我正在使用gulp-typescript进行编译.我错过了什么？我可以不为此目的使用@types库吗？

Answer 1

我可以在这里想到两种方法.

1)将角度标记为全局.(更容易迁移选项)

创建一个d.ts文件说overrides.d.ts和做:

declare global {
  const angular: ng.IAngularStatic;
}
export {};

要么

import * as _angular_ from 'angular';

declare global {
  const angular: typeof _angular_;
}

就是这样,不需要import或为此单独管理脚本加载.

2)在每个受影响的文件中导入它. (对于现有的大型项目,可能是更乏味的迁移选项)

如果您可以继续更新所有受影响的文件(通常有点难以在一个已经有很多与此相关的错误的大项目中采用此方法),无论您参考哪个angular,导入它:

import * as angular from "angular";

如果您采用这种方法,typescript将angular作为文件的依赖项进行转换,并且您的模块加载器(例如:) SystemJS需要处理导入.这可以通过让systemJS通过maps /路径管理导入来完成,或者如果脚本是通过script标签加载的,那么你可以angular通过使用SystemJS.registerDynamic或SystemJS.set apis 创建一个假模块.

Answer 2

我正在为 Webstorm IDE 构建文件观察器并遇到了这个问题。为了解决这个问题，我必须删除@types/angular，并通过添加选项： 将typings angular其添加到我的编译中。同样，您可以将其添加到您的typings angular--types {your file dir}/typings/index.d.tstsconfig.json

我知道这不是您所希望的解决方案，但它让我克服了困难。