Ajout de aspnetboilerplate.com à un projet angulaire existant

Question

J'ai créé un projet en utilisant l'excellent aspnetboilerplate.com mais j'essaie de l'utiliser avec mon projet Angular existant. J'essaie de configurer les fonctions d'authentification (connexion de l'utilisateur, etc.).

J'ai ajouté les paquets suivants à mon paquetage.json "abp-ng2-module" "abp-web-resources".

J'ai également ajouté les fichiers de typecript pertinents à mon application angulaire.

Quand je regarde le projet de autogenerated aspnetboilerplate.com ils importent les modules comme ceci:

import { PermissionCheckerService } from '@abp/auth/permission-checker.service'; 

Cependant, cela ne fonctionne pas pour moi et VSCode signale qu'il ne peut pas trouver le module, je peux l'importer comme ceci:

import { PermissionCheckerService } from "abp-ng2-module/dist/src/auth/permission-checker.service"; 

Lorsque je tente de construire et exécuter mon application je reçois les erreurs suivantes

TS2304: Cannot find name 'abp'. 

la chose étrange est cette erreur montrent 5 ou 6 fois et se rapporte non seulement à mes fichiers dactylographiés locaux mais également aux fichiers dactylographiés dans mes paquets.

ERROR in [at-loader] ./node_modules/abp-ng2-module/dist/src/features/feature-checker.service.d.ts:2:31 
TS2503: Cannot find namespace 'abp'. 

Cela semble être quelque chose autour des espaces de noms, mais je ne sais pas pourquoi le paquet installé ne fonctionne même pas?

Answer 1

J'ai dû créer un fichier de frappe personnalisé, c'est-à-dire typings.d.ts et ajouter les lignes suivantes.

///<reference path="../node_modules/abp-webresources/Abp/Framework/scripts/abp.d.ts"/> 
///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.d.ts"/> 
///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.signalr.d.ts"/> 

J'ai également ajouté ce qui suit dans mon fichier tsconfig.json

"baseUrl": ".", 
"paths": { 
    "@abp/*": [ "../node_modules/abp-ng2-module/src/*" ], 
    "@app/*": [ "./app/*" ], 
    "@shared/*": [ "./shared/*" ], 
    "@node_modules/*": [ "../node_modules/*" ] 
}