TypeScript modules under node_modules but deployed under wwwroot

Question

For an ASP.NET Core 2.x web application, I'd have expected this to be super easy as its a standard pattern. I'm clearly doing this very wrong.

I have this folder structure.

projectRoot
├── node_modules
│   ├── jquery
│   └── // others you'd see in node_modules
├── wwwroot
│   ├── lib
│   │   ├── jquery
│   |   │   └── dist
|   │   |   │   └── jquery.js
│   │   └── // others copied by specific Gulp tasks from node_modules
│   ├── js
│   │   └── site.js // generated from site.ts
│   ├── css
│   └── page.html // script tag to /js/site.js
├── ts
│   └── site.ts
├── gulpfile.js
└── tsconfig.json

Now my problem is that in my site.ts I need to import from jquery

// site.ts
import $ from "???"

But I cannot figure out the path, considering:

1. It's eventually written into site.js

2. It must be reachable from the browser.

3. It must be resolvable by the TypeScript compiler.

4. The TypeScript compiler appears to use node_modules\@types\jquery

Here's my tsconfig.json. Note that I use a Gulp task to compile my .ts files though I do not add any extra configuration, so it seems to use the json below.

{
    "compilerOptions": {

        "module": "es2015",
        "baseUrl": "./wwwroot/js/", // This must be specified if "paths" is.
        "paths": {
            "*": [ "./node_modules/@types/*" ],
            "../lib/jquery/dist/jquery.js": [ "./node_modules/jquery/dist/jquery" ] // This mapping is relative to "baseUrl"
        },
        "esModuleInterop": true,
        "moduleResolution": "node"
    }
}

I've been playing with baseUrl and paths to get it working.

Either TypeScript resolves it but its a bad path once in the browser - I assume this is because Chrome can't find the path:

import $ from "lib/jquery/dist/jquery";

Uncaught SyntaxError: Unexpected identifier

Or TypeScript doesn't resolve it and it doesn't compile.

Again, I'd have assumed this wasn't an unusual setup.

Answer 1

To use jquery with angular I need to install 2 package

npm install jquery --save
npm install @types/jquery --save

Then in scripts section in architect => build of angular.json file I will add path for jquery lib

"scripts": [
  "node_modules/jquery/dist/jquery.min.js"
]

Then in tsconfig.app.json. Add jquery to types section and you should be good so no need to import $ everywhere

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery"]
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

Update

Is depend on your library using like moment or lodash they have export API for user to use so you can use common import like normal.

But some third party library like jquery, mathjax they only provide us the js file so we can only import to angular.json to use it global.

So it's depend on the library that they export API to us or not

Answer 2

So it seems I am not supposed to import jquery at all but some magic makes it just work.

How to import JQuery into a Typescript file?

I removed my import statement and it just worked.

However, I'm still not sure how if I wanted to use some other JS module in this way I'd need to configure TypeScript for this folder arrangement, so I'm leaving the question open.