Новые параметры загрузчика файлов для прощения импорта в 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 для неизвестных типов файлов.

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

Больше материалов с хорошей подсветкой синтаксиса в моем блоге на teletype