I am currently utilizing Visual Studio Professional 2015 to work on an application that incorporates Angular 4, TypeScript, and Webpack.
Our team's goal was to enable the ability to import from both directories and files. For instance, within our project we have a folder named core containing various components. In addition to these individual component files, there is also an index.ts file at the root of the core folder which exports all contents from each of the component files. As an illustration, within the core folder, there exists a component called core.services.utils.ts:
export class Utils {
static isFunction(test: any): boolean {
return typeof test === 'function';
}
}
The corresponding content in the index.ts file would be:
export { Utils } from './core.services.utils';
In our Webpack configuration, we have created an alias for this setup within the resolve config:
alias: {
'@product/core': path.join(__dirname, './Features/core')
}
As a result, we can directly import from the alias in other modules, such as:
import { Utils } from '@product/core';
While everything functions correctly when building via Webpack, Visual Studio seems unable to recognize the alias specified in the Webpack configuration. This leads to errors like:
Build:Cannot find modules '@product/core'
To address this issue, how can I inform Visual Studio about this alias? Should I create an index.d.ts file alongside the existing index.ts file? And if so, what should be included in this new file?