Ambiente de produção Angular 11 série (XIV) para depuração

Pequeno · Publicado em 11/08/2020 17:59:35

Componentes Carregados Dinamicamente da Série Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Parâmetros de transmissão de componentes dinâmicos da série Angular 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

A série Angular 9 (3) subscreve eventos dinâmicos de componentes
https://www.itsvse.com/thread-9246-1-1.html

Tubulações personalizadas da Série Angular 9 (IV)
https://www.itsvse.com/thread-9248-1-1.html

A Série Angular 9 (V) formata o formato de moeda de quantidade
https://www.itsvse.com/thread-9249-1-1.html

A série angular 9 (VI) chama variáveis e métodos JS nativos
https://www.itsvse.com/thread-9254-1-1.html

Mira CSS estilo Angular série 9 (VII)
https://www.itsvse.com/thread-9264-1-1.html

A série angular 9 (VIII) atualiza o valor de um componente filho ao acionar um evento via conjunto
https://www.itsvse.com/thread-9267-1-1.html

Seletor de #id Angular 9 Series (nove) aplicado na página
https://www.itsvse.com/thread-9278-1-1.html

A série Angular 9 (10) incorpora painéis de depuração do vconsole e do eruda
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Series (XI) 5 Maneiras de Definir Estilos
https://www.itsvse.com/thread-9305-1-1.html

A série Angular 9 (XII) gera tokens dinâmicos baseados em OTPs
https://www.itsvse.com/thread-9325-1-1.html

A série Angular 10 (treze) apresenta os gráficos echarts Baidu
https://www.itsvse.com/thread-9347-1-1.html

Empacotamos o projeto Angular em um ambiente de produção com o comando de compilação, e o efeito esperado pode diferir do que vemos em nosso ambiente de desenvolvimento.

Código TS:

O login está visível.

AppComponent é o componente atual.

As renderizações do ambiente de desenvolvimento e do ambiente de produção são as seguintes:

O ambiente de produção não foi nada do que esperávamos.

Sobre os dados do comando de build:

Otimização de desempenho de construção angular
https://www.itsvse.com/thread-9203-1-1.html

Neste momento, precisamos depurar.
SourceMap é um arquivo de informações que armazena o mapeamento de localização do código-fonte e do código compilado

No trabalho de front-end, é usado principalmente para resolver problemas de depuração nos seguintes três aspectos:

a. Depois que a compressão de código é confusa
b. Após compilar para css ou JS usando outras linguagens como sass e typeScript
c. Após a fusão de múltiplos arquivos usando ferramentas de empacotamento como webpack

Nos três casos acima, não conseguimos depurar o código-fonte tão facilmente quanto fazemos ao depurar, então precisamos do SourceMap para nos ajudar a convertê-lo em código-fonte no console para depuração.

Precisamos modificar o comando build, que é o seguinte:

O login está visível.

(Antes de adicionar parâmetros)

(Após adicionar parâmetros)

Você pode ver que muitos arquivos *.map são gerados.

Como mostrado na imagem acima, use o Google Chrome, pressione F12 para entrar no modo desenvolvedor, selecione a fonte, selecione main.js e então clique com o botão direito e selecione a opção "Adicionar mapa de origem" para adicionar o endereço do arquivo do mapa gerado.

Por exemplo:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map

(Fim)

[Angular] Ambiente de produção Angular 11 série (XIV) para depuração

Posts Relacionados

Seções visualizadas