How to use module name aliasing in angular cli?

Question

Using standalone webpack, you could use aliasing for module resolving. something like this inside your webpack.config file, config.resolve block:

config.resolve = {
    extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'],
    alias: {
      'app': 'src/app',
      'common': 'src/common',
       'a_module_name': 'file_path_to_module_name'
    }
  };

How do you use webpack like alias resolution inside angular cli?

Answer 1

Try using the typescript compilerOptions paths array inside your tsconfig.json file:

The paths array values are relative to the baseUrl. Here is an example usage:

"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@app/*": ["app/*"]
  }
}