0Pricing
Angular Academy · Aula

Inicializando um aplicativo independente

Inicie um aplicativo com bootstrapApplication.

Inicializando um aplicativo independente é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Inicializando um aplicativo independente

Um aplicativo totalmente independente começa com bootstrapApplication, em vez de inicializar um NgModule raiz. Você fornece a ele seu componente raiz.

O ponto de entrada: main.ts

O arquivo de entrada do aplicativo é main.ts. Ele chama bootstrapApplication com o componente raiz, geralmente AppComponent.

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

bootstrapApplication(AppComponent);

De onde vem bootstrapApplication

bootstrapApplication é importado de @angular/platform-browser. Ele substitui o padrão mais antigo platformBrowserDynamic().bootstrapModule.

O componente raiz

O componente raiz é um componente independente comum. Geralmente, ele contém o ponto de saída do roteador ou o layout de nível superior.

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

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

Fornecendo serviços do aplicativo

Os provedores para todo o aplicativo ficam no segundo argumento: um objeto com uma matriz providers. É nesse local que o roteador, o cliente HTTP e os serviços globais são configurados.

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

Fornecendo o roteador

Use provideRouter(routes) para configurar o roteamento de um aplicativo independente.

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

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

Fornecendo HttpClient

Ative o HTTP com provideHttpClient() na matriz de provedores.

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

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

Combinando provedores

Liste juntas quantas funções provide* forem necessárias.

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

O padrão app.config.ts

A CLI normalmente extrai os provedores para app.config.ts como um ApplicationConfig, mantendo main.ts organizado.

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

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

Usando app.config em main.ts

Então, main.ts simplesmente encaminha appConfig.

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

bootstrapApplication(AppComponent, appConfig);

Tratamento de erros

bootstrapApplication retorna uma Promise. Você pode capturar erros de inicialização para registrá-los.

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

Verificação rápida: inicialização

Como um aplicativo independente é iniciado?

Recapitulação: inicialização

Você inicializa um aplicativo independente com bootstrapApplication(AppComponent), passando provedores para todo o aplicativo, como provideRouter e provideHttpClient. A CLI organiza esses provedores em app.config.ts. Nenhum NgModule raiz é necessário. Você concluiu o aprofundamento em componentes independentes.

Perguntas Frequentes

A aula “Inicializando um aplicativo independente” é grátis?

Sim — o texto completo de “Inicializando um aplicativo independente” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Inicializando um aplicativo independente”?

Inicie um aplicativo com bootstrapApplication. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Inicializando um aplicativo independente”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Por que usar componentes independentes
  2. Criando componentes independentes
  3. Importando dependências diretamente
  4. Inicializando um aplicativo independente
← Voltar para Angular Academy