Angular Academy · Урок

Запуск автономного приложения

Запускайте приложение с помощью bootstrapApplication.

Урок 4 из 413 шагов

«Запуск автономного приложения» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Запуск автономного приложения

Полностью автономное приложение запускается с помощью bootstrapApplication, а не через корневой NgModule. Ему передаётся корневой компонент.

Точка входа: main.ts

Файл точки входа приложения — main.ts. Он вызывает bootstrapApplication с корневым компонентом, обычно AppComponent.

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

Откуда берётся bootstrapApplication

bootstrapApplication импортируется из @angular/platform-browser. Он заменяет прежнюю схему platformBrowserDynamic().bootstrapModule.

Корневой компонент

Корневой компонент — это обычный автономный компонент. Обычно в нём размещается область маршрутизации или макет верхнего уровня.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>My App</h1>'
})
export class AppComponent {}

Предоставление сервисов приложения

Провайдеры для всего приложения передаются вторым аргументом — объектом с массивом providers. Здесь настраиваются маршрутизатор, HTTP-клиент и глобальные сервисы.

bootstrapApplication(AppComponent, {
  providers: []
});

Предоставление маршрутизатора

Используйте provideRouter(routes), чтобы настроить маршрутизацию в автономном приложении.

import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

Предоставление HttpClient

Включите HTTP с помощью provideHttpClient() в массиве providers.

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

Объединение провайдеров

Перечисляйте вместе столько функций provide*, сколько требуется.

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

Шаблон app.config.ts

CLI обычно выносит провайдеры в app.config.ts в виде ApplicationConfig, сохраняя main.ts чистым.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

Использование app.config в main.ts

Тогда main.ts просто передаёт appConfig дальше.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig);

Обработка ошибок

bootstrapApplication возвращает Promise. Вы можете перехватить ошибки запуска и записать их в журнал.

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

Быстрая проверка: запуск

Как запускается автономное приложение?

Ответь в интерактивном уроке

Итоги: запуск

Вы запускаете автономное приложение с помощью bootstrapApplication(AppComponent), передавая провайдеры приложения, например provideRouter и provideHttpClient. CLI выносит их в app.config.ts. Корневой NgModule не требуется. Вы завершили углублённое изучение автономных компонентов.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 38
Уроки: 144

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Запуск автономного приложения» бесплатный?

Да — полный текст урока «Запуск автономного приложения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Запуск автономного приложения»?

Запускайте приложение с помощью bootstrapApplication. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Запуск автономного приложения»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy