CODEWITHSUNDEEP
javascriptangularasp.net-core
meyousikmann
meyousikmann

Reputation: 861

Importing bower component library into Angular 2 application

I am working on an Angular 2 application in ASP.NET Core and I am trying to import oidc-client (https://github.com/IdentityModel/oidc-client-js) into one of my Typescript files. The oidc-client files were installed via bower which placed them in the expected bower_components folder. The oidc-client.js file is copied to the lib folder under wwwroot via a gulp task on build.

My directory structure looks like this (only relevent portions represented):

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

I need to use the oidc-client library in my token.service.ts file so I am doing this:

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

But this results in an error 'Cannot find module './lib/oidc-client/oidc-client'.

I've tried different variations on the path, relative and non-relative, and I can't seem to figure out how to import the oid-client library.

Maybe its the typings not working? Do I need to do anything special with the d.ts file to make it work?

Thanks for any guidance.

Upvotes: 0

Views: 1026

Answers (1)

cartant
cartant

Reputation: 58400

As mentioned in a comment made above, using the NPM distribution of oidc-client would be the preferred option.

However, the typings that are included in the oidc-client are a little strange. Usually, the typings .d.ts file sits side-by-side with the .js file. With oidc-client, they are in different directories and that's what's causing problems with your import statement.

If you install the NPM module and add node_modules/oidc-client/oidc-client.d.ts to the files configuration of your tsconfig.json:

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

You should be able to create an index.ts file that imports oidc-client:

import { OidcClient } from "oidc-client";

If the .d.ts file and the .js file had been side-by-side, your import would have worked, but they are not, so it doesn't.

If you do not want to use the NPM distribution, it is likely that the separation of the .d.ts and .js files is what's causing the problem with the Bower distribution, too.

Upvotes: 1

Related Questions