locked
How to specify custom types in Angular via tsconfig.json to import an external javascript library RRS feed

  • Question

  • User956626884 posted

    In my angular project, I install via npm the types of a module, which install the index.d.ts file inside my node_modules folder. I want to move it to another location and specify the revised index.d.ts in the tsconfig.json file.

    I followed the steps in

    https://www.detroitlabs.com/blog/2018/02/28/adding-custom-type-definitions-to-a-third-party-library/

    but it does not see the type. It works if I have the type back in the node_modules folder but I removed it.

    Here is my tsconfig section

    "typeRoots": [ "types", "node_modules/@types"]

    The website said to create folder in the root which is located in the same folder as node_modules. Inside the types folder, I have the name of the module for the folder, so the path looks like this

    types\moduleName\index.d.ts

    but in my component ts file, the import and declare lines are not working. Only works when the index.d.ts is back in the node_modules.

    I am confused. I thought if I specify the custom type folder in the typeRoots tag, it will search and find it.

    Thanks

    Wednesday, April 17, 2019 11:24 AM

All replies

  • User1724605321 posted

    Hi comicrage .

    Most of the declaration types for npm modules are already written and you can include them using npm install @types/module_name (where module_name is the name of the module whose types you wanna include).

    However, there are modules that don't have their type definitions and in order to make the error go away and import the module using import * as module_name from 'module-name', create a folder typings in the root of your project, inside create a new folder with your module name and in that folder create a module_name.d.ts file and write declare module 'module_name'. After this just go to your tsconfig.json file and add "typeRoots": [ "../../typings", "../../node_modules/@types"]in the compilerOptions (with the proper relative path to your folders) to let TypeScript know where it can find the types definitions of your libraries and modules and add a new property "exclude": ["../../node_modules", "../../typings"] to the file.

    Please confirm the path again base on your project structure .

    Best Regards,

    Nan Yu

    Thursday, April 18, 2019 2:36 AM
  • User956626884 posted

    Hi Nan,

    Thanks you so much for helping. I have been struggling to get the tsconfig.json to see the new .d.ts file location. I following your step but I am still having the same error. Here is my prod build error: "Cannot find module 'chart.js'"

    After  I install the @types/chart.js into the node_modules folder, I removed it from that folder and moved the folder to the project root folder. I don't want to the chart.js file in the node_modules folder. I am making custom changes and don't want it updated and replaced with an updated version.

    In my ts code, it is giving errors about the following line

    import * as _ from 'chart.js';

    Can't reolve 'chart.js'. If I move the index.d.ts back in node_module, then it work but I need to move it to another location.

    I also tried adding a src/typings.d.ts which contains

    declare var chartjs: any;
    In the ts code, I changed the import to
    import * as Chart from 'chartjs';
    but it still does not work.

    Here are the steps

    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "importHelpers": true,
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "allowJs": true,
        "typeRoots": [
          "typings",
          "node_modules/@types"
        
        ],
        "lib": [
          "es2017",
          "dom"
        ],
        "module": "commonjs",
      },
      "exclude": ["node_modules", "typings"]
    }
    

    I added the typings folder in the same folder location as node_modules and tsconfig.json. Inside typings, I have  a folder called 'chart.js' which contains the chart.js.ts file.

    I am not sure what I am doing wrong and what troubleshooting steps to take. With this error, it is breaking on the production build.

    Thanks,

    JC

    Thursday, April 18, 2019 10:49 AM
  • User1724605321 posted

    Hi comicrage ,

    What if change the url to :

    "typeRoots": [ "./types", "./node_modules/@types"]

    if this directory is at the root of your project .

    Best Regards,

    Nan Yu

    Friday, April 19, 2019 7:13 AM