CODEWITHSUNDEEP
visual-studiotypescriptmoduletypescript-typings
danwellman
danwellman

Reputation: 9253

Visual Studio TypeScript - Cannot find module

I am using Visual Studio Professional 2015 and have a Angular 4, TypeScript, and Webpack application.

We wanted to be able to import from directories as well as files, so e.g, we have a folder called core with a number of different components inside this folder, and also at the root of the folder, we have an index.ts file which exports everything from each of the files in the folder. So, for example, in the core folder there is a components called core.services.utils.ts:

export class Utils {
    static isFunction(test: any): boolean {
        return typeof test === 'function';
    }
}

Then in the index.ts file we have:

export { Utils } from './core.services.utils';

In our Webpack configuration we have an alias for this in the resolve config:

alias: {
    '@product/core': path.join(__dirname, './Features/core')
}

So now, in other modules we can import directly from the alias, e.g.

import { Utils } from '@product/core';

When we build via Webpack, everything is good and the app works as expected. Unfortunately, visual Studio cannot see the alias in the Webpack configuration, so when we build via Visual Studio it gives errors like:

Build:Cannot find modules '@product/core'

How can I tell Visual Studio about this alias? Do I need to add an index.d.ts file alongside the index.ts file? What should be in this file if so?

Upvotes: 2

Views: 1888

Answers (1)

danwellman
danwellman

Reputation: 9253

I was able to fix this by using the paths config in the tsconfig.json file, e.g:

"paths": {
    "@product/core": [ "Shared/Features/core/index" ]
}

It's not ideal having to have a separate path for each folder I want to import from, but I am glad it has removed the build errors.

Upvotes: 3

Related Questions