将 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 中包含的类型有点奇怪。通常，类型 .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 文件并排放置，您的 import 会起作用，但它们不是，所以它不起作用。

如果您不想使用 NPM 发行版，那么 .d.ts 和 .js 文件的分离很可能也是导致 Bower 发行版出现问题的原因。