javascript - 将 Bower 组件库导入 Angular 2 应用程序

Question

我正在 ASP.NET Core 中开发 Angular 2 应用程序，并尝试将 oidc-client ( https://github.com/IdentityModel/oidc-client-js ) 导入到我的 Typescript 文件之一中。 oidc-client 文件是通过 Bower 安装的，将它们放置在预期的 Bower_components 文件夹中。 oidc-client.js 文件通过构建时的 gulp 任务复制到 wwwroot 下的 lib 文件夹。

我的目录结构如下所示(仅表示相关部分):

wwwroot
|
 --app
|  |
|   --shared
|     |
|      --auth
|        |
|         --token.service.ts
 --lib
|  |
|   --oidc-client
|     |
|      --oidc-client.js
|
 --bower_components
|  |
|   --oidc-client
|     |
|      --dist
|     |  |
|     |   --oidc-client.js
|      --oidc-client.d.ts
|
 --typings
   |
    --index.d.ts

我需要在 token.service.ts 文件中使用 oidc-client 库，所以我这样做:

import { Oidc } from './lib/oidc-client/oidc-client';

但这会导致错误“找不到模块”./lib/oidc-client/oidc-client”。

我尝试了路径的不同变体，相对路径和非相对路径，但我似乎不知道如何导入 oid-client 库。

也许打字不起作用？我需要对 d.ts 文件执行任何特殊操作才能使其正常工作吗？

感谢您的指导。

Answer 1

正如上面评论中提到的，使用 oidc-client 的 NPM 发行版将是首选。

但是，oidc-client 中包含的类型有点奇怪。通常，typings .d.ts 文件与 .js 文件并排放置。对于 oidc-client，它们位于不同的目录中，这就是导致 import 语句出现问题的原因。

如果您安装 NPM 模块并将 node_modules/oidc-client/oidc-client.d.ts 添加到 tsconfig.json 的 files 配置中:

{
    "files": [
        "index.ts",
        "node_modules/oidc-client/oidc-client.d.ts"
    ]
}

您应该能够创建一个导入 oidc-client 的 index.ts 文件:

import { OidcClient } from "oidc-client";

如果 .d.ts 文件和 .js 文件并排放置，那么您的导入就会起作用，但他们不是，所以它不是。

如果您不想使用 NPM 发行版，则可能是 .d.ts 和 .js 文件的分离导致了问题Bower 分布也是如此。