Como o Angular cria e executa

Só quero aprender comoAngular constrói e corre nos bastidores?

Abaixo está o que eu entendi até agora. Quer saber se eu perdi alguma coisa.

Como o Angular cria

Depois de codificar nossos aplicativos angulares usandoTypeScript, Nós usamosAngular CLI Comando para criar o aplicativo.

ng build O comando compila o aplicativo em um diretório de saída e os artefatos de construção serão armazenados no diretóriodist/ diretório.

Processo interno

1 Angular CLI correWebpack para construir e agrupar todo o JavaScript eCSS código.

2) Por sua vezWebpack chama oTypeScript Carregadores que buscam todos.ts arquivo no projeto angular e, em seguida, transpila-os paraJavaScript isto é, para um.js que os navegadores podem entender.

este post dizAngular possui dois compiladores:

View Compiler

Compilador de módulo

Perguntas sobre builds

Qual é a sequência de chamar o processo de construção?

CLI angular Primeiro chama o compilador embutido angular escrito em Typescript => depois chama o Transpiler Typescript => depois chama o Webpack para agrupar e armazenar nodist/ diretório.

Como o Angular é executado

Quando a compilação é concluída, todos os componentes, serviços, módulos etc. do nosso aplicativo são transpilados paraJavascript .js arquivos usados para executar o aplicativo angular no navegador.

Declarações emDocumentos angulares

Quando você inicializa com oAppComponent classe (em main.ts), Angular procura um<app-root> noindex.html, localiza, instancia uma instância do AppComponent e a renderiza dentro do<app-root> etiqueta, rótulo, palavra-chave.

Angular cria, atualiza e destrói componentes à medida que o usuário se move pelo aplicativo.

Perguntas sobre execuções

Apesarmain.ts é usado na instrução acima para explicar o processo de inicialização, o aplicativo angular não é inicializado ou iniciado com o usoJavascript .jsarquivos?

Nem todas as instruções acima são executadas em tempo de execução usandoJavascript .jsarquivos?

Alguém sabe como todas as peças se encaixam em profundidade?

questionAnswers(4)

yourAnswerToTheQuestion