Избегание относительных путей в Angular CLI

Я использую последний Angular CLI, и я создал папку пользовательских компонентов, которая представляет собой коллекцию всех компонентов.

Например, TextInputComponent имеет класс TextInputConfiguration, который помещается внутри src/components/configurations.ts, а в src/app/home/addnewuser/add.user.component.ts, где я его использую, есть:

import {TextInputConfiguration} from "../../../components/configurations";

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

Ранее для SystemJS я бы установил путь через system.config.js, как показано ниже:

System.config({
..
 map : {'ng_custom_widgets':'components' },
 packages : {'ng_custom_widgets':{main:'configurations.ts', defaultExtension: 'ts'},
)};

Как сделать то же самое для webpack с помощью Angular CLI?

ОТВЕТЫ

Ответ 1

Per этот комментарий, вы можете добавить свой источник приложения через paths в tsconfig.json:

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

Затем вы можете импортировать абсолютно из app/ или components/ вместо относительного к текущему файлу:

import {TextInputConfiguration} from "@components/configurations";

Примечание. baseUrl должен быть указан, если paths.

См. также

Ответ 2

Благодаря jonrsharpe answer, чтобы указать мне в правильном направлении. Хотя после добавления paths, как определено в ответе, я все еще не смог заставить его работать. Для всех, кто сталкивается с такой же проблемой, как и я в будущем, вот что я сделал, чтобы исправить проблемы.

У меня есть общий модуль, и его службы используются в нескольких компонентах, поэтому...

tsconfig.json:

{
    "compilerOptions": {
        ...
        "baseUrl": ".", //had to add this too
        "paths": {
            "@shared/*": ["src/app/modules/shared/*"]
        }
    }
}

После этого VS Code смог разрешить import, но я все еще получил следующую ошибку от webpack во время компиляции.

Модуль не найден: Ошибка: не удается разрешить

Чтобы исправить это, мне пришлось добавить

  • baseUrl of tsconfig в webpack resolve.modules
  • paths of tsconfig в webpack resolve.alias

webpack.config.js:

resolve: {
  extensions: ['*', '.js', '.ts'],
  modules: [
    rootDir,
    path.join(rootDir, 'node_modules')
  ],
  alias: {
    '@shared': 'src/app/modules/shared'
  }
},

component.ts:

import { FooService } from '@shared/services/foo.service'
import { BarService } from '@shared/services/bar.service'
import { BazService } from '@shared/services/baz.service'

Чтобы сделать его еще более чистым, я добавил папку с внутренними службами index.d.ts и экспортировал все мои сервисы оттуда, например:

index.d.ts:

export * from './foo.service';
export * from './bar.service';
export * from './baz.service';

и теперь внутри любого компонента :

import { FooService, BarService, BazService } from '@shared/services';

Ответ 3

Прежде всего, ответ правильный, но после того, как вы пытаетесь найти через интернет n, пытаясь понять, что конкретно проблема и попробовать другой вариант устранения неполадок, я познакомился с baseUrl и Path. работает более

Если вы используете baseUrl: "." , как показано ниже, он работает в VScode, но не при компиляции

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["src/app/*"]
    }    
}

В соответствии с моим пониманием и моим рабочим приложением и проверенным кодом angular aio, я предлагаю использовать baseUrl: "src" , как показано ниже

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "@myproject/*": ["app/*"],
      "testing/*": ["testing/*"]
    }    
}

Имея базовый url в качестве источника (каталог src), компилятор правильно решает модули.

Надеюсь, это поможет людям решить эту проблему.