Как использовать ссылки @app / .... в Angular 7 вместо литеральных путей?

Question

Попытка настроить наш продукт так, чтобы он не требовал значительных / каких-либо изменений в ссылках при перемещении элемента управления.

Когда я использую предварительно созданное приложение из aspnetboilerplate.com, все их ссылки на службы / компоненты / каналы / директивы импортируются на основе пути «@ app / etc» вместо буквального пути из файла, экспортированного в файл, и я хотел бы иметь возможность использовать это, но, похоже, он не работает изначально.

шаблонная структура такая же, как у приложения, созданного с помощью ng new, но они могут использовать

import { SomeService } from '@app/services/some-service.service';

вместо

import { SomeService } from '../../../services/some-service.service';

но это не работает в нашем приложении, и я не могу понять, как они настроили его

Не могу найти модуль '@ app / services / some-service.service', это все, что я получаю: /

Answer 1

Эта функция относится к компилятору Typescript, поэтому вам необходимо обновить файл tsconfig.json следующим образом:

Добавьте в свойство "paths" это значение

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

Answer 2

Это файл tsconfig.json, в котором происходит волшебство.Он позволяет определять сопоставления между спецификатором и путем к файлу.

Официальную документацию можно найти здесь: https://www.typescriptlang.org/docs/handbook/module-resolution.html

Netanel Basal также написал статью об этом: https://netbasal.com/sexier-imports-in-typescript-e3c645bdd3c6