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

Question

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

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

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

我还在我的 Angular 应用程序中添加了相关的 typescript 文件。

当我从 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 次，不仅与我的本地 typescript 文件有关，还与我的包中的 typescript 文件有关。

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/*" ]
}