Структура проекта Angular создаётся с помощью Angular CLI и организована по модульному принципу. Каждый функциональный блок обычно оформляется как отдельный Angular модуль, содержащий компоненты, сервисы и другие элементы, относящиеся к конкретной части приложения. Такая организация позволяет обеспечить масштабируемость, переиспользуемость и удобную поддержку крупных приложений.

Основные директории и файлы, создаваемые CLI (ng new my-app)

my-app/
├── src/
│ ├── app/
│ │ ├── app.component.ts
│ │ ├── app.component.html
│ │ ├── app.component.css
│ │ ├── app.module.ts
│ ├── assets/
│ ├── environments/
│ │ ├── environment.ts
│ │ ├── environment.prod.ts
│ ├── index.html
│ ├── main.ts
│ ├── styles.css
│ ├── polyfills.ts
│ ├── test.ts
├── angular.json
├── tsconfig.json
├── package.json

1. src/main.ts

Точка входа в приложение. Здесь происходит начальный bootstrap модуля AppModule:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

2. src/app/ — корневая логика приложения

В этой папке содержится:

• app.module.ts — корневой модуль приложения.

• app.component.ts — корневой компонент.

• Подмодули, страницы, компоненты, сервисы и guard'ы.

Пример структуры:

app/
├── core/ ← singleton-сервисы, auth, interceptors
├── shared/ ← общие компоненты, директивы, pipes
├── features/
│ ├── dashboard/
│ │ ├── dashboard.module.ts
│ │ ├── dashboard.component.ts
│ ├── auth/
│ ├── login/
│ ├── register/
├── app.module.ts
├── app-routing.module.ts
├── app.component.ts

3. app.module.ts — корневой модуль

Регистрирует все модули и компоненты, необходимые на старте приложения.

@NgModule({
declarations: \[AppComponent\],
imports: \[BrowserModule, AppRoutingModule\],
bootstrap: \[AppComponent\]
})
export class AppModule {}

4. app.component.* — корневой компонент

Оборачивает всё приложение. Часто содержит <router-outlet>.

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {}

5. app-routing.module.ts — маршрутизация

Отдельный файл для конфигурации маршрутов. Позволяет lazy loading, guards, параметры.

const routes: Routes = \[
{ path: '', component: HomeComponent },
{ path: 'dashboard', loadChildren: () => import('./features/dashboard/dashboard.module').then(m => m.DashboardModule) }
\];
@NgModule({
imports: \[RouterModule.forRoot(routes)\],
exports: \[RouterModule\]
})
export class AppRoutingModule {}

6. core/ — глобальные сервисы и singleton-логика

Модуль CoreModule импортируется только в AppModule, содержит:

• AuthService, TokenInterceptor

• Guard'ы (AuthGuard)

• HTTP-интерсепторы

• Logging, ErrorHandler

• forRoot() pattern

core/
├── services/
├── interceptors/
├── guards/
├── core.module.ts

7. shared/ — переиспользуемые компоненты

Здесь находятся:

• Переиспользуемые UI-компоненты (ButtonComponent, CardComponent)

• Pipes, директивы (v-autofocus, ellipsis)

• Шаблонные формы

• Иконки, layout

Модуль SharedModule может импортироваться в любые другие модули.

@NgModule({
declarations: \[ButtonComponent, EllipsisPipe\],
exports: \[ButtonComponent, EllipsisPipe\],
imports: \[CommonModule\]
})
export class SharedModule {}

8. features/ — бизнес-логика

Каждая фича оформляется в виде модуля, содержащего компоненты, сервисы и роутинг.

features/
├── products/
│ ├── products.module.ts
│ ├── products-routing.module.ts
│ ├── product-list.component.ts
│ ├── product-detail.component.ts

Lazy loading достигается за счёт отдельных feature.module.ts.

9. assets/ — статические ресурсы

Содержит изображения, SVG, шрифты и любые файлы, которые должны быть доступны без обработки Webpack.

10. environments/ — конфигурации окружений

Используется Angular CLI для подстановки переменных окружения при сборке:

• environment.ts — для разработки

• environment.prod.ts — для продакшна

export const environment = {
production: false,
apiUrl: 'http://localhost:3000'
};
"fileReplacements": \[
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
\]

11. styles.css, angular.json, tsconfig.json

• styles.css — глобальные стили (можно заменить на SCSS)

• angular.json — конфигурация проекта (путь к стилям, сборка, окружения, ассеты)

• tsconfig.json — TypeScript-конфигурация (strict, paths, aliases)

12. Подход к организации по масштабируемым уровням

13. Условный пример дерева для большого проекта

app/
├── app.module.ts
├── app.component.ts
├── app-routing.module.ts
├── core/
│ ├── services/
│ ├── guards/
│ └── core.module.ts
├── shared/
│ ├── components/
│ ├── pipes/
│ └── shared.module.ts
├── features/
│ ├── auth/
│ │ ├── login.component.ts
│ │ └── auth.module.ts
│ ├── dashboard/
│ │ ├── dashboard.component.ts
│ │ └── dashboard.module.ts
├── state/
│ ├── store.ts
│ └── effects/
├── theme/
│ ├── variables.scss
│ └── base.scss

14. Рекомендации по структуре

• Использовать строгое разделение Core/Shared/Feature

• Все сервисы и interceptors — в Core

• Все UI-компоненты — в Shared

• Использовать lazy loading для Feature-модулей

• Компоненты размещать рядом с шаблонами и стилями (.component.ts, .html, .scss)

• Использовать barrel-файлы (index.ts) для упрощения импорта

• Настроить alias'ы (paths в tsconfig.json) для путей импорта

• Подключать ESLint и Prettier