typescript - importing custom class using "@" sign

Question

I've seen occurrences when we import a package in the following way

import { SharedModule } from '@shared/shared.module';

@shared in this case refers to the folder located in our project

/src/shared

I am looking to avoid importing my class in a classic way using dots and slashes at the beginning (relative path approach), e.g.

import { SharedModule } from './shared/shared.module';

Does anyone know how to achieve this?

Answer 1

基本上，您正在寻找一种叫做的东西alias。

为了能够使用别名，我们必须像这样将baseUrl和path属性添加到tsconfig.json文件中-

{
  "compilerOptions": {
    "...": "reduced for brevity",

    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"],
      "@env/*": ["environments/*"]
    }
  }
}

因此，现在您可以使用@app或导入文件@env。

有关更多详细信息，请参阅这篇很棒的文章。

• https://medium.com/@tomastrajan/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81#3144