Частые ошибки и их решения

Типичные проблемы при разработке и способы их решения.

Запуск проекта

environment.ts не найден

Ошибка:

Error: Cannot find module './environments/environment'

Причина: Файл окружения не сгенерирован.

Решение:

npm run generate:env -- local

---

Порт 4200 занят

Ошибка:

Port 4200 is already in use

Решение:

# Найти и завершить процесс
lsof -i :4200
kill -9 <PID>

# Или запустить на другом порту
npm start -- --port 4201

---

doppler: command not found

Причина: Doppler CLI не установлен.

Решение:

# macOS
brew install dopplerhq/cli/doppler

# Linux
curl -Ls https://cli.doppler.com/install.sh | sh

---

Линтеры и форматирование

ESLint: prefer-inject

Ошибка:

Use the inject function instead of constructor injection

Неправильно:

constructor(private userService: UserService) {}

Правильно:

private readonly userService = inject(UserService);

---

ESLint: explicit-function-return-type

Ошибка:

Missing return type on function

Причина: Явный return type не нужен — TypeScript выведет сам.

Неправильно:

function getValue(): string {
	return "hello";
}

Правильно:

function getValue() {
	return "hello";
}

---

ESLint: no-any

Ошибка:

Unexpected any. Specify a different type

Решение: Создайте интерфейс:

// Неправильно
const data: any = response;

// Правильно
interface IMyData {
	id: string;
	name: string;
}
const data: IMyData = response;

---

Stylelint: color-hex-length

Ошибка:

Expected "#ffffff" instead of "#fff"

Решение: Используйте полную HEX-запись:

// Неправильно
color: #fff;

// Правильно
color: #ffffff;

// Лучше — используйте переменную
color: var(--mat-sys-on-surface);

---

Pre-commit hook падает

Причина: Код не прошёл проверки.

Решение:

# 1. Исправить ошибки линтеров
npm run lint:fix
npm run slint:fix

# 2. Переформатировать код
npm run format:fix

# 3. Повторить коммит
git add .
git commit -m "message"

---

TypeScript

Property does not exist on type

Ошибка:

Property 'name' does not exist on type 'unknown'

Причина: Отсутствует типизация.

Решение:

// Добавьте тип
const user = response as IUser;
console.log(user.name);

// Или используйте generic
this.api.get<IUser>("/users/1").subscribe((user) => {
	console.log(user.name);
});

---

Object is possibly 'undefined'

Ошибка:

Object is possibly 'undefined'

Решения:

// 1. Optional chaining
console.log(user?.name);

// 2. Early return
if (!user) return;
console.log(user.name);

// 3. Non-null assertion (осторожно!)
console.log(user!.name);

---

Type 'null' is not assignable

Ошибка:

Type 'null' is not assignable to type 'string'

Решение:

// Добавьте null в тип
let name: string | null = null;

// Или используйте default value
const name = response.name ?? "Unknown";

---

HTTP и API

401 Unauthorized

Причина: Токен истёк или недействителен.

Решение:

1. Выйдите из системы
2. Войдите заново
3. Если не помогло — очистите localStorage:

localStorage.clear();

---

CORS ошибка

Ошибка:

Access to XMLHttpRequest has been blocked by CORS policy

Причина: Бэкенд не разрешает запросы с вашего домена.

Решение:

1. Проверьте API_URL в environment
2. Убедитесь, что бэкенд запущен
3. Проверьте CORS настройки бэкенда

---

Network Error

Ошибка:

net::ERR_CONNECTION_REFUSED

Причина: Бэкенд недоступен.

Решение:

1. Проверьте, что бэкенд запущен
2. Проверьте API_URL в environment
3. Проверьте сетевое подключение

---

Сборка

Build падает с memory error

Ошибка:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed

Решение:

# Увеличить память для Node.js
export NODE_OPTIONS="--max-old-space-size=4096"
npm run build:prod

---

Module not found

Ошибка:

Module not found: Error: Can't resolve './component'

Причины и решения:

1. Неправильный путь — проверьте путь импорта
2. Файл не существует — создайте файл
3. Кэш — очистите:

rm -rf node_modules/.cache
npm run build

---

NG0100: Expression has changed

Ошибка:

ExpressionChangedAfterItHasBeenCheckedError

Причина: Значение изменилось после проверки change detection.

Решения:

// 1. Используйте ChangeDetectorRef
private readonly cdr = inject(ChangeDetectorRef);

ngAfterViewInit() {
	this.value = newValue;
	this.cdr.detectChanges();
}

// 2. Используйте setTimeout
setTimeout(() => {
	this.value = newValue;
});

// 3. Лучше — используйте Signals
readonly value = signal(initialValue);

---

Git

Pre-push hook падает

Причина: Код не прошёл проверки перед пушем.

Решение:

# Проверить вручную
npm run typecheck
npm run lint:check
npm run build:prod

# Исправить ошибки и повторить push

---

Конфликт в package-lock.json

Решение:

# Удалить lock файл и переустановить
rm package-lock.json
npm install
git add package-lock.json
git commit -m "fix: regenerate lock file"

---

SSR

localStorage is not defined

Причина: Код выполняется на сервере, где нет localStorage.

Решение:

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, inject } from '@angular/core';

private readonly platformId = inject(PLATFORM_ID);

getValue() {
	if (isPlatformBrowser(this.platformId)) {
		return localStorage.getItem('key');
	}
	return null;
}

---

document is not defined

Причина: document недоступен на сервере.

Решение:

import { DOCUMENT } from '@angular/common';

private readonly document = inject(DOCUMENT);

// Использовать this.document вместо глобального document

---

Нужна помощь?

Если вы не нашли решение:

1. Проверьте FAQ
2. Изучите документацию по теме
3. Создайте issue в репозитории

---

Навигация

• FAQ — часто задаваемые вопросы
• Качество кода — настройка линтеров
• Workflow разработки — git hooks