Este artículo es un artículo espejo de traducción automática, por favor haga clic aquí para saltar al artículo original.

Architect_Programmer_Code Red Agrícola»Arquitecto › Diseño front-end y web › Bastidor frontal › Depuración del entorno de producción de la serie Angular 11 (XIV) ...
Vista: 11213|Respuesta: 0

[Angular] Entorno de producción de la serie Angular 11 (XIV) para depuración

[Copiar enlace]
Publicado en 11/8/2020 17:59:35 | | | |
Componentes Dinámicos Cargados de la Serie Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Parámetros de transmisión de componentes dinámicos de la serie angular 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

La serie Angular 9 (3) se suscribe a eventos dinámicos de componentes
https://www.itsvse.com/thread-9246-1-1.html

Tuberías personalizadas Angular 9 Series (IV)
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formatea el formato de moneda de cantidad
https://www.itsvse.com/thread-9249-1-1.html

La serie angular 9 (VI) llama variables y métodos JS nativos
https://www.itsvse.com/thread-9254-1-1.html

Mira estilo CSS de la serie Angular 9 (VII)
https://www.itsvse.com/thread-9264-1-1.html

La serie angular 9 (VIII) actualiza el valor de un componente hijo al desencadenar un evento mediante el conjunto
https://www.itsvse.com/thread-9267-1-1.html

Selector de #id Angular 9 Series (nueve) aplicado en la página
https://www.itsvse.com/thread-9278-1-1.html

La serie Angular 9 (10) integra paneles de depuración para desarrolladores de vconsole y eruda
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Series (XI) 5 formas de definir estilos
https://www.itsvse.com/thread-9305-1-1.html

La serie Angular 9 (XII) genera tokens dinámicos basados en OTPs
https://www.itsvse.com/thread-9325-1-1.html

La serie Angular 10 (trece) introduce los gráficos echarts de Baidu
https://www.itsvse.com/thread-9347-1-1.html

Empaquetamos el proyecto Angular en un entorno de producción con el comando de compilación, y el efecto esperado puede diferir del que vemos en nuestro entorno de desarrollo.

Código TS:



AppComponent es el componente actual.

Los renderizados del entorno de desarrollo y del entorno de producción son los siguientes:



El entorno de producción no era en absoluto lo que esperábamos.

Sobre los datos de comandos de compilación:

Optimización del rendimiento de construcción angular
https://www.itsvse.com/thread-9203-1-1.html
En este momento, necesitamos depurarlo.
SourceMap es un archivo de información que almacena el mapeo de ubicación del código fuente y el código compilado

En el trabajo front-end, se utiliza principalmente para resolver problemas de depuración en los siguientes tres aspectos:

a. Después de que la compresión del código se confunda
b. Después de compilar a css o JS usando otros lenguajes como sass y typeScript
c. Después de la fusión de múltiples archivos usando herramientas de empaquetado como webpack

En los tres casos anteriores, no podemos depurar el código fuente tan fácilmente como al depurar, así que necesitamos que SourceMap nos ayude a convertirlo en código fuente en la consola para depurar.


Necesitamos modificar el comando de construcción, que es el siguiente:



(Antes de añadir parámetros)



(Tras añadir parámetros)

Puedes ver que se generan muchos archivos *.map.





Como se muestra en la imagen de arriba, usa Google Chrome, pulsa F12 para entrar en modo desarrollador, selecciona la fuente, selecciona main.js y luego haz clic derecho y selecciona la opción "Añadir mapa fuente" para añadir la dirección del archivo del mapa generado.

Por ejemplo:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map
(Fin)




Anterior:La serie Angular 10 (trece) introduce los gráficos echarts de Baidu
Próximo:Llamadas a navegadores de PC para ejecutar aplicaciones .NET

Publicaciones relacionadas
Renuncia:
Todo el software, materiales de programación o artículos publicados por Code Farmer Network son únicamente para fines de aprendizaje e investigación; El contenido anterior no se utilizará con fines comerciales o ilegales; de lo contrario, los usuarios asumirán todas las consecuencias. La información de este sitio proviene de Internet, y las disputas de derechos de autor no tienen nada que ver con este sitio. Debes eliminar completamente el contenido anterior de tu ordenador en un plazo de 24 horas desde la descarga. Si te gusta el programa, por favor apoya el software genuino, compra el registro y obtén mejores servicios genuinos. Si hay alguna infracción, por favor contáctanos por correo electrónico.
Mail To:help@itsvse.com