1

The closest explanation for what I am trying to do was found here [a link]. Still I am struggling to get my solution to compile.

I have external typings which I would like to use in my project and all of them has .d.ts files with namespace "DS/" which I store in a folder called typings. Below is my folder structure for my simple Angular app.

-MyAppName
--typings
----all my modules d.ts
--src
----app
-tsconfig.json

this is my tsconfig.json file look like below

"compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "DS/*": [
        "typings/*"
      ],
      "*": [
        "src/*"
      ]
    }
  },
  "include": [
    "typings/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }

I get an error for importing my library as below import { MyModuleName } from 'DS/MyModuleName';

ERROR in ./src/app/app.module.ts Module not found: Error: Can't resolve 'DS/MyModuleName' in 'MyAppName\src\app'

I'm using AngularCLI to build the app. I have failed to configure my tsconfig file to support these externally imported libraries. Not sure what I am doing wrong. Please help.

anusha Pathirana
  • 11
  • 1
  • 2

1 Answers1

1

according to your tree, try in your tsconfig.ts

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

"paths": {
  "DS/*": [
    "typings/*"
  ],
}

"include": ["src", "typings"],

then in your app.module.ts

import { MyModuleName} from 'DS/myModuleName.module';
jgritten
  • 915
  • 1
  • 11
  • 20
  • Hi, thank you for the reply but I still get the same error `ERROR in ./src/app/app.module.ts Module not found: Error: Can't resolve '../../typings/MyModuleName' in 'MyAppName\src\app'` – anusha Pathirana Jul 05 '19 at 15:59
  • Also I thought the whole purpose of setting `"paths": { "DS/*": [ "typings/*" ],` is so I can refer to the imports as "DS/..."? – anusha Pathirana Jul 05 '19 at 16:03
  • mocked it up in my application here and discovered a combo that works. see edited answer above and let me know. cheers – jgritten Jul 05 '19 at 17:55
  • I don't get any errors in my Visual Code editor for these libraries. The auto completion correctly recognizes the libraries but when I do a `ng build` it still throws the error `ERROR in ./src/app/app.module.ts Module not found: Error: Can't resolve 'DS/MyModuleName/shared.module' in 'MyAppName\src\app'` – anusha Pathirana Jul 08 '19 at 08:38