将 aspnetboilerplate.com 添加到现有的 angular 项目

Question

我已经使用优秀的 aspnetboilerplate.com 创建了一个项目，但我正在尝试将它与我现有的 Angular 项目一起使用。

我正在尝试设置身份验证功能（用户登录等）。

我已将以下包添加到我的 package.json“abp-ng2-module”“abp-web-resources”中。

我还将相关的打字稿文件添加到我的 angular 应用程序中。

当我从 aspnetboilerplate.com 查看自动生成的项目时，他们正在导入这样的模块：

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

但是，这对我不起作用，并且 VSCode 报告它找不到模块，我可以像这样导入它：

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

当我尝试构建和运行我的应用程序时，我收到以下错误

TS2304: Cannot find name 'abp'.

奇怪的是这个错误显示了 5 到 6 次，不仅与我的本地打字稿文件有关，还与我的包内的打字稿文件有关。

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

它似乎与命名空间有关，但我不确定为什么安装的软件包甚至不起作用？

Answer 1

我必须创建一个自定义打字文件，即 Typings.d.ts 并添加以下几行。

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

我还将以下内容添加到我的 tsconfig.json 文件中

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