1. Обзор структуры проекта после ng new
Angular — это фреймворк с большими амбициями. Он рассчитан на разработку сложных, масштабируемых приложений, где важна поддерживаемость и читаемость кода. Именно поэтому Angular строго регламентирует структуру проекта. Это не просто «папки ради папок», а система, которая помогает:
- быстро находить нужные файлы;
- разделять ответственность между разными частями приложения;
- облегчать командную работу;
- автоматизировать сборку, тестирование и деплой.
Если в React вы можете разложить файлы как душе угодно (и иногда это приводит к хаосу), то в Angular всё чётко: есть src, есть main.ts, есть angular.json — и это не просто так.
После команды ng new my-app (или любого другого имени) Angular CLI создаёт примерно такую структуру:
my-app/
├── node_modules/
├── src/
│ ├── app/
│ │ ├── app.component.ts
│ │ ├── app.component.html
│ │ ├── app.component.css
│ │ └── app.module.ts
│ ├── assets/
│ ├── environments/
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ └── test.ts
├── angular.json
├── package.json
├── tsconfig.json
└── ... (ещё куча файлов)
Давайте разберёмся, что к чему.
2. Папка src/ — сердце приложения
В отличие от многих других фреймворков, Angular хранит исходный код приложения в папке src/ (от слова source — источник). Всё, что вы пишете сами, будет именно здесь.
Внутри src/:
- app/ — здесь живут ваши компоненты, сервисы, модули и вся логика приложения. Это самая важная папка, и с ней вы будете работать чаще всего.
- assets/ — сюда складывают картинки, шрифты и другие статические ресурсы, которые не нужно компилировать.
- environments/ — файлы с переменными окружения для разных сборок (например, environment.ts для разработки и environment.prod.ts для продакшна).
- favicon.ico — иконка сайта (та самая, что появляется на вкладке браузера).
- index.html — главный HTML-файл, с которого стартует приложение.
- main.ts — точка входа в приложение, именно отсюда Angular начинает работу.
- polyfills.ts — «заплатки» для поддержки старых браузеров.
- styles.css — глобальные стили для всего приложения.
- test.ts — конфигурация для запуска тестов.
3. main.ts — точка входа в приложение
main.ts — это стартовый файл, с которого начинается выполнение Angular-приложения. Если бы Angular был театром, то main.ts — это режиссёр, который первым выходит на сцену и даёт команду «Мотор!».
Вот как обычно выглядит этот файл:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Что здесь происходит?
- Импортируется функция platformBrowserDynamic — она отвечает за запуск приложения в браузере.
- Импортируется главный модуль приложения — AppModule (о модулях поговорим чуть позже).
- Вызывается bootstrapModule(AppModule), что означает: «Запусти приложение, начиная с этого модуля».
- Если что-то пошло не так, ошибка попадёт в консоль (Angular заботится о вашем душевном спокойствии).
Важно:
Весь Angular-приложение «загружается» и «оживает» именно с этого файла. Если вы хотите добавить что-то до старта (например, инициализацию аналитики), это делается здесь.
Этот AppModule — ваш главный модуль, который Angular использует для сборки и запуска всего приложения. О модулях мы поговорим подробнее в следующей лекции.
4. index.html — единственный HTML-файл
Многие новички удивляются: «Где остальные HTML-страницы? Почему всего один файл?»
Всё дело в том, что Angular — это SPA (Single Page Application, одностраничное приложение). Весь сайт живёт внутри одного HTML-файла, а всё остальное рисуется и обновляется с помощью JavaScript.
Вот пример index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Что здесь важно:
- <app-root></app-root> — это не опечатка и не ошибка! Это кастомный тег, который создаёт Angular. Именно сюда будет «вмонтировано» всё ваше приложение.
(Если бы вы попробовали открыть этот HTML без сборки Angular, увидели бы только этот тег и ничего больше.) - Остальной HTML — стандартный: мета-теги, favicon, базовый путь.
Аналогия:
Если представить сайт как квартиру, то index.html — это стены и двери, а всё остальное (комнаты, мебель, котики) появляется уже после въезда (когда Angular загрузился).
5. angular.json — мозг сборки и конфигурации
angular.json — это огромный и очень важный файл. Он отвечает за то, как Angular CLI будет собирать, тестировать и деплоить ваше приложение.
Вот как выглядит его начало:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"projects": {
"my-app": {
"projectType": "application",
"root": "",
"sourceRoot": "src",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.css"],
"scripts": []
}
}
}
}
}
}
Зачем нужен angular.json:
- Описывает, где искать исходники (sourceRoot), какой файл считать «главным» (main), где лежит HTML (index), какие стили и скрипты подключать.
- Управляет сборкой: куда складывать результат (outputPath), какие ассеты копировать и т.д.
- Позволяет настраивать разные сборки: для разработки, для продакшна, для тестов.
- Позволяет добавлять новые приложения и библиотеки в рамках одного репозитория (монорепо).
Важный момент:
99% времени вы не трогаете angular.json вручную. Angular CLI всё делает сам. Но если вдруг вам нужно подключить сторонние стили, скрипты или поменять путь до ассетов — это делается здесь.
6. Полезные нюансы
Остальные важные файлы в корне
- package.json — стандартный файл npm. Здесь хранятся зависимости, скрипты, метаданные проекта.
- tsconfig.json — настройки TypeScript: какие файлы компилировать, какие правила проверять.
- node_modules/ — папка с установленными зависимостями (не трогаем руками, только через npm/yarn).
- README.md — файл для описания вашего проекта (чтобы коллеги не плакали, открыв ваш репозиторий).
Внутри src/app/ — место для кода
Вся логика приложения — компоненты, сервисы, модули — живёт в папке src/app/.
Когда вы создаёте новый компонент через CLI (ng generate component my-component), Angular сам положит его в папку app/.
Тут же находится главный компонент (app.component.ts) и главный модуль (app.module.ts).
Например:
src/app/
├── app.component.ts
├── app.component.html
├── app.component.css
├── app.module.ts
Пояснение:
- app.component.ts — код главного компонента (логика, данные).
- app.component.html — разметка главного компонента.
- app.component.css — стили главного компонента.
- app.module.ts — главный модуль приложения, который объединяет все компоненты, сервисы и прочие Angular-штучки.
Модуль app.module.ts
Именно здесь вы будете регистрировать (объявлять) свои новые компоненты, чтобы Angular знал о них и мог использовать. Это ключевая часть организации вашего приложения в "классическом" Angular.
// src/app/app.module.ts (пример)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import { MyFirstComponent } from './my-first/my-first.component'; // Пока закомментировано
@NgModule({
declarations: [
// MyFirstComponent // Здесь будут регистрироваться ваши компоненты
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent] // Главный компонент, который запускается
})
export class AppModule { }
Как всё это работает вместе
Когда вы запускаете ng serve:
- Angular CLI читает angular.json, чтобы понять, что собирать и как.
- Находит точку входа (src/main.ts), которая указывает на главный модуль (AppModule).
- AppModule сообщает, что главный компонент — это AppComponent.
- В index.html есть <app-root>, который связан с AppComponent.
- Angular «встраивает» содержимое AppComponent в <app-root>, и приложение появляется на экране.
- Все ваши компоненты, сервисы и прочая магия живут в src/app/, и Angular их подхватывает автоматически.
flowchart TD
angular_json["angular.json (конфигурация)"]
main_ts["main.ts (точка входа)"]
app_module["app.module.ts (главный модуль)"]
app_component["app.component.ts (главный компонент)"]
index_html["index.html (HTML-шаблон)"]
angular_json --> main_ts
main_ts --> app_module
app_module --> app_component
app_component --> index_html
7. Типичные ошибки при работе со структурой Angular-проекта
Ошибка №1: Путаем, где писать код.
Новички часто пытаются создавать компоненты или писать код вне папки src/app/. В результате Angular CLI не видит ваши файлы, и приложение не собирается. Всегда работайте внутри src/app/!
Ошибка №2: Редактируем или удаляем main.ts или index.html без понимания.
Если случайно удалить или сильно изменить эти файлы, приложение перестанет запускаться. Лучше не трогать их без необходимости (или делайте бэкап).
Ошибка №3: Меняем структуру вручную, а не через CLI.
Если переместить или переименовать файлы вручную, Angular может «запутаться». Для создания компонентов, сервисов, модулей используйте команды CLI (ng generate ...).
Ошибка №4: Прямое редактирование angular.json без понимания.
Этот файл — как нервная система проекта. Ошибка в нём может привести к тому, что сборка вообще не запустится. Всегда делайте копию перед изменениями!
Ошибка №5: Ожидание, что изменения в index.html будут видны на всех страницах.
Помните: всё, что вы видите в браузере после загрузки Angular — это результат работы компонентов. Если вы добавили что-то в index.html, оно появится только один раз, до загрузки Angular.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ