Проброс настроек в сборку Angular

В обновлении сборщика приложений в версии 17.1.0 были введены новые параметры загрузчика, что делает обработку файлов более простой и удобной. Эти параметры позволяют указать, как обрабатывать различные типы файлов.

Вот краткий обзор доступных загрузчиков:

• Загрузчик текстовых файлов (text): Преобразует содержимое файла в строку, идеально подходит для текстовых файлов.
• Бинарный загрузчик (binary): Преобразует бинарные файлы в Uint8Array, полезно для обработки бинарных данных.
• Загрузчик файлов (file): Отделяет файлы и предоставляет их расположение во время выполнения, отлично подходит для ресурсов.
• Пустой загрузчик (empty): Исключает файлы из вашего пакета.

Настройка этих загрузчиков проста. Например, чтобы встроить содержимое SVG в приложение, нужно изменить angular.json:

{
 "architect": {
 "build": {
 "options": {
 "loader": {
 ".svg": "text"
     }
    }
   }
  }
 }

Эта настройка встраивает файлы SVG как строки, устраняя необходимость во внешних запросах файлов для ваших графических элементов:

import foo from './some-big-img.svg';

@Component({
  selector: 'app-user-profile',
  standalone: true,
})
export class UserProfileComponent {
  constructor() {
    import('./user.svg').then((res) => res.default).then(console.log);
  }
}

Для обеспечения совместимости с TypeScript, особенно с пользовательскими загрузчиками, такими как для файлов SVG, добавьте файл определения типа в проект. Это можно сделать, добавив файл (например, src/types.d.ts) со следующим содержимым:

declare module "*.svg" {
  const content: string;
  export default content;
}

Этот шаг предотвратит появление ошибок TypeScript для неизвестных типов файлов.

Это перевод оригинального материала