web-dev-qa-db-fra.com

Angular 1.x avec TypeScript 2.x, @types et SystemJS - Utilisation de typages globaux

J'essaie d'utiliser Angular 1.x avec les nouveaux registres TS2 et @types mais je rencontre des problèmes. Il semble que @types n'utilise pas ce que le registre de typings appelle des typages "globaux". Je rencontre l'erreur suivante:

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

Le code angulaire est le suivant:

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"
    }
 }

Essayer d'utiliser ce qui suit

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

J'utilise gulp-TypeScript pour faire la compilation. Qu'est-ce que je rate? Ne puis-je pas utiliser les bibliothèques @types à cette fin?

angularjstypescripttypescript-typingstypescript2.0
14
Kerry Ritter

Je peux penser à 2 approches ici.

1) Marquez angulaire comme global. (Option de migration beaucoup plus simple)

Créez un fichier d.ts dites overrides.d.ts et faites:

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

ou

import * as _angular_ from 'angular';

declare global {
  const angular: typeof _angular_;
}

et c'est tout, pas besoin de import ou de gérer le chargement de script séparément pour cela. 

2) Importez-le dans chaque fichier impacté.(Option de migration plus fastidieuse sur un grand projet existant)}

Si vous pouvez aller de l'avant, mettez à jour tous les fichiers concernés (généralement un peu difficile d'adopter cette approche dans un projet très volumineux comportant déjà de nombreuses erreurs associées), à chaque fois que vous faites référence à angular, importez-le:

import * as angular from "angular";

Si vous utilisez cette approche, TypeScript effectuera une copie avec angular en tant que dépendance du fichier et votre chargeur de module (par exemple: SystemJS) doit gérer l'importation. Cela peut être fait soit en laissant SystemJS gérer les importations via mappes/chemins, soit si le script est chargé par les balises script, vous pouvez créer un faux module pour angular en utilisant SystemJS.registerDynamic OU SystemJS.set apis.

36
PSL

Ajouter cette importation à votre code

import * as angular from "angularjs";

Voir TypeScript Angular Import pour plus d'informations

3
Daniel Pamich

Je construisais un observateur de fichiers pour le Webstorm IDE et j'ai rencontré ce problème. Pour le résoudre, j'ai dû supprimer @types/angular, ajouter typings angular et inclure également typings angular dans ma compilation en ajoutant l'option: --types {your file dir}/typings/index.d.ts. De même, vous pouvez ajouter cela à votre tsconfig.json

Je sais que ce n'est pas la solution que vous espériez, mais cela m'a permis de surmonter cette bosse.

1
Augie Gardner