Angular 1.x с TypeScript 2.x, @types и SystemJS - с использованием глобальных типов

Я пытаюсь использовать 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.

Код Angular выглядит следующим образом:

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 для этой цели?

Ответы

Ответ 1

Я могу думать о двух подходах здесь.

1) Отметьте angular как global. (Более простой вариант миграции)

Создайте файл d.ts, скажем overrides.d.ts, и выполните:

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

или

import * as _angular_ from 'angular';

declare global {
  const angular: typeof _angular_;
}

и что ему не нужно import или управлять script загрузкой отдельно для этого.

2) Импортируйте его в каждый удаленный файл. (Может быть, более утомительный вариант миграции для большого существующего проекта)

Если вы можете продолжить обновление всех файлов, подверженных влиянию (обычно это трудно сделать в очень большом проекте, который уже имеет много ошибок, связанных с этим), когда вы ссылаетесь на angular, импортируйте его:

import * as angular from "angular";

Если вы примете этот подход, typescript перейдет с angular в качестве зависимости для файла, и загрузчик вашего модуля (например: SystemJS) должен обработать импорт. Это может быть сделано либо путем управления системой import Import через карты/пути, либо если script загружается тегами script, то вы можете создать поддельный модуль для angular с помощью SystemJS.registerDynamic или SystemJS.set apis.

Ответ 2

Добавьте этот импорт в свой код

import * as angular from "angularjs";

Подробнее см. Typescript Angular Импорт

Ответ 3

Я создавал наблюдателя файлов для Webstorm IDE и столкнулся с этой проблемой. Чтобы решить эту проблему, мне пришлось удалить @types/angular, добавить typings angular также включить typings angular в мою компиляцию, добавив параметр: --types {your file dir}/typings/index.d.ts. Аналогично, вы можете добавить это в свой tsconfig.json

Я знаю, что это не то решение, на которое вы надеялись, но это привело меня к этому горбу.