Cómo se construye y ejecuta Angular

¿Solo quieres aprender cómo Angular se construye y se ejecuta detrás de escena?

A continuación se muestra lo que entendí hasta ahora. Quiero saber si me perdí algo.

Cómo se construye Angular

Después de codificar nuestras aplicaciones Angular usando TypeScript, usamos el comando CLI Angular para construir la aplicación.

ng buildEl comando compila la aplicación en un directorio de salida y los artefactos de compilación se almacenarán en el dist/directorio.

Proceso interno

1. Angular CLI ejecuta Webpack para construir y empaquetar todo el código JavaScript y CSS.

2. A su vez, Webpack llama a los cargadores de TypeScript, que recuperan todos los .tsarchivos del proyecto Angular y luego los transpila a JavaScript, es decir, a un .jsarchivo que los navegadores pueden entender.

Esta publicación dice que Angular tiene dos compiladores:

• Ver compilador

• Compilador de módulos

Preguntas sobre compilaciones

¿Cuál es la secuencia de llamar al proceso de construcción?

Angular CLI primero llama al compilador integrado Angular escrito en TypeScript => luego llama al TypeScript Transpiler => luego llama al Webpack para agrupar y almacenar en el dist/directorio.

Cómo funciona Angular

Cuando se completa la compilación, todos los componentes, servicios, módulos, etc. de nuestra aplicación se transfieren a JavaScript .jsarchivos que se utilizan para ejecutar la aplicación Angular en el navegador.

Declaraciones en Angular Docs

1. Cuando arranca con la AppComponentclase (en main.ts), Angular busca un <app-root>en el index.html, lo encuentra, crea una instancia de AppComponent y lo representa dentro de la <app-root>etiqueta.

2. Angular crea, actualiza y destruye componentes a medida que el usuario se mueve por la aplicación.

Preguntas sobre carreras

Aunque main.tsse usa en la declaración anterior para explicar el proceso de arranque, ¿la aplicación Angular no se arranca o se inicia con .jsarchivos JavaScript ?

¿No se realizan todas las declaraciones anteriores en tiempo de ejecución utilizando .jsarchivos JavaScript ?

¿Alguien sabe cómo encajan todas las partes en profundidad?

(Cuando digo Angular, me refiero a Angular 2+ y diré explícitamente angular-js si menciono angular 1).

Preludio: es confuso

Angular, y probablemente con más precisión angular-cli, han combinado una serie de herramientas de tendencias en Javascript que están involucradas en el proceso de construcción. Conduce a un poco de confusión.

Para aumentar la confusión, el término compilese usaba a menudo en angular-js para referirse al proceso de tomar el pseudo-html de la plantilla y convertirlo en elementos DOM. Eso es parte de lo que hace el compilador, pero una de las partes más pequeñas.

En primer lugar, no es necesario utilizar TypeScript, angular-cli o Webpack para ejecutar Angular. Para responder tu pregunta. Deberíamos mirar una pregunta simple: "¿Qué es Angular?"

Angular: ¿Qué hace?

Esta sección puede ser controvertida, veremos. En esencia, el servicio que proporciona Angular es un mecanismo de inyección de dependencia que funciona en Javascript, HTML y CSS. Escribes todos los pequeños fragmentos y piezas individualmente y en cada pequeña pieza sigues las reglas de Angular para hacer referencia a las otras piezas. Angular luego teje eso por completo de alguna manera.

Para ser (un poco) más específico:

• Las plantillas permiten conectar HTML al componente Javascript. Esto permite que la entrada del usuario en el DOM mismo (por ejemplo, haga clic en un botón) se alimente en el componente Javascript y también permite que las variables en el componente Javascript controlen la estructura y los valores en el DOM.
• Las clases de Javascript (incluidos los componentes de Javascript) deben poder acceder a instancias de otras clases de Javascript de las que dependen (por ejemplo, inyección de dependencia clásica). Un BookListComponent necesita una instancia de BookListService que podría necesitar una instancia de BookListPolicy o algo así. Cada una de estas clases tiene diferentes tiempos de vida (por ejemplo, los servicios son usualmente singletons, los componentes usualmente no son singletons) y Angular tiene que administrar todos esos tiempos de vida, la creación de los componentes y el cableado de las dependencias.
• Las reglas CSS debían cargarse de tal manera que solo se apliquen a un subconjunto del DOM (el estilo de un componente es local para ese componente).

Una cosa posiblemente importante a tener en cuenta es que Angular no es responsable de cómo los archivos Javascript hacen referencia a otros archivos Javascript (por ejemplo, la importpalabra clave). De eso se encarga Webpack.

¿Qué hace el compilador?

Ahora que sabe lo que hace Angular, podemos hablar sobre lo que hace el compilador. Evitaré ser demasiado técnico principalmente porque soy ignorante. Sin embargo, en un sistema de inyección de dependencias que normalmente tienen para expresar sus dependencias con algún tipo de metadatos (por ejemplo, ¿cómo puede un ejemplo de clase I can be injected, My lifetime is blaho You can think of me as a Component type of instance). En Java, Spring originalmente hizo esto con archivos XML. Posteriormente, Java adoptó las anotaciones y se han convertido en la forma preferida de expresar metadatos. C # usa atributos para expresar metadatos.

Javascript no tiene un gran mecanismo para exponer estos metadatos incorporados. angular-js hizo un intento y no estuvo mal, pero había muchas reglas que no se podían verificar fácilmente y eran un poco confusas. Con Angular, hay dos formas compatibles de especificar los metadatos. Puede escribir Javascript puro y especificar los metadatos manualmente, algo similar a angular-js y simplemente seguir las reglas y escribir código adicional. Alternativamente, puede cambiar a TypeScript que, como sucede, tiene decoradores (esos @símbolos) que se utilizan para expresar metadatos.

Así que aquí es donde finalmente podemos llegar al compilador. El trabajo del compilador es tomar esos metadatos y crear el sistema de piezas de trabajo que es su aplicación. Te concentras en todas las piezas y todos los metadatos y el compilador crea una gran aplicación interconectada.

¿Cómo lo hace el compilador?

El compilador puede funcionar de dos formas, en tiempo de ejecución y con anticipación. De aquí en adelante, asumiré que estás usando TypeScript:

• Tiempo de ejecución: cuando se ejecuta el compilador de mecanografiado, toma toda la información del decorador y la introduce en el código Javascript adjunto a las clases, métodos y campos decorados. En su index.html, hace referencia a su main.jsque llama al bootstrapmétodo. Ese método pasa a su módulo de nivel superior.

El método bootstrap enciende el compilador en tiempo de ejecución y le da una referencia a ese módulo de nivel superior. El compilador en tiempo de ejecución comienza a rastrear ese módulo, todos los servicios, componentes, etc. a los que hace referencia ese módulo, y todos los metadatos asociados, y crea su aplicación.

• AOT: en lugar de hacer todo el trabajo en tiempo de ejecución, Angular ha proporcionado un mecanismo para hacer la mayor parte del trabajo en tiempo de compilación. Esto casi siempre se hace usando un complemento de paquete web (este debe ser uno de los paquetes npm más populares pero menos conocidos). Se ejecuta después de que se haya ejecutado la compilación de mecanografiado, por lo que ve esencialmente la misma entrada que el compilador en tiempo de ejecución. El compilador AOT crea su aplicación como el compilador en tiempo de ejecución, pero luego la guarda en Javascript.

La ventaja aquí no es solo que puede ahorrar el tiempo de CPU requerido para la compilación en sí, sino que también le permite reducir el tamaño de su aplicación.

Respuestas específicas

Angular CLI Primero llama al compilador integrado angular escrito en Typescript => luego llama al Typecript Transpiler => luego llama al Webpack para empaquetar y almacenar en el directorio dist /.

No. Angular CLI llama a Webpack (el servicio real de Angular CLI es configurar webpack. Cuando lo ejecutas, ng buildno es mucho más que un proxy para iniciar Webpack). Webpack primero llama al compilador Typecript, luego al compilador angular (asumiendo AOT), todo mientras agrupa su código al mismo tiempo.

Aunque main.ts se usa en la Declaración anterior para explicar el proceso de arranque, ¿no se arranca la aplicación angular o se inicia con archivos Javascript .js?

No estoy del todo seguro de lo que pregunta aquí. main.tsse transpilará en Javascript. Ese Javascript contendrá una llamada a la bootstrapque es el punto de entrada a Angular. Cuando bootstraphaya terminado, tendrá su aplicación Angular completa en ejecución.

Esta publicación dice que Angular tiene dos compiladores:

Ver compilador

Compilador de módulos

Para ser honesto, solo voy a afirmar ignorancia aquí. Creo que a nuestro nivel podemos pensar en todo como un gran compilador.

¿Alguien sabe cómo encajan todas las partes en profundidad?

Espero que lo anterior satisfaga esto.

Don't @ Me: Angular hace más que una inyección de dependencia

Por supuesto. Realiza enrutamiento, visualización de edificios, detección de cambios y todo tipo de cosas. El compilador en realidad genera Javascript para la creación de vistas y la detección de cambios. Mentí cuando dije que era solo una inyección de dependencia. Sin embargo, la inyección de dependencia está en el núcleo y es suficiente para impulsar el resto de la respuesta.

¿Deberíamos llamarlo compilador?

Probablemente hace mucho análisis y lectura y definitivamente genera una gran cantidad de código como resultado, por lo que podría llamarlo compilador por esa razón.

Por otro lado, en realidad no está traduciendo su código en simplemente una representación diferente. En su lugar, se trata de tomar un montón de diferentes piezas de código y tejerlas en piezas consumibles de un sistema más grande. El proceso de arranque luego (después de compilar, si es necesario) toma esas piezas y las conecta al núcleo angular.

Dejame empezar por el principio.

En mi aplicación, ejecuto la aplicación directamente desde Webpack.

Para construir y ejecutar la aplicación usamos webpack --progress y webpack-dev-server --inline command que se ha escrito package.jsoncomo se muestra a continuación

"scripts": {
    "serve": "webpack-dev-server --inline ",
    "build": "webpack --progress"

  }

Cuando ejecutamos el webpack --progresscomando, comienza el webpack.config.jsarchivo de lectura donde encuentra el punto de entrada como se muestra a continuación.

module.exports = {
    devtool: 'source-map',
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/]
            },
            /* Embed files. */
            {
                test: /\.(html|css)$/,
                loader: 'raw-loader',
                exclude: /\.async\.(html|css)$/
            },
            /* Async loading. */
            {
                test: /\.async\.(html|css)$/,
                loaders: ['file?name=[name].[hash].[ext]', 'extract']
            },
        ]
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}   

y luego lee todos los Typescriptarchivos y compila en base a las reglas declaradas en el tsconfig.jsonarchivo y luego lo convierte en los .jsarchivos respectivos y su archivo de mapa.

Si se ejecuta sin ningún error de compilación, creará un bundle.jsarchivo con los nombres que declaramos en la Webpacksección de salida.

Ahora déjeme explicar por qué usamos cargadores.

awesome-typescript-loader, angular2-template-loader Usamos este cargador para compilar el Typescriptarchivo en la base declarada en el tsconfig.jsonarchivo y angular2-template-loader busca templateUrly styleUrlsdeclara dentro de los metadatos del componente Angular 2 y reemplaza las rutas con los correspondientes requieren declaración.

resolve: {
        extensions: ['.ts', '.js']
    }

Usamos la sección de resolución anterior para decirle Webpackque convierta Typescripta un JavaScriptarchivo

plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]

La sección de complementos se utiliza para inyectar un marco o archivo de terceros. En mi código, estoy usando esto para inyectar la index.htmlcarpeta de destino.

 devtool: 'source-map',

La línea anterior se usa para ver el Typescriptarchivo en el navegador y depurarlo, y se usa principalmente para el código de desarrollador.

 loader: 'raw-loader'

Lo anterior raw-loaderse utiliza para cargar el .htmly .cssarchivo y unirlos junto con Typescriptlos archivos.

Al final, cuando ejecutamos webpack-dev-server --inline , creará su propio servidor y arrancará la aplicación como la ruta mencionada en el web-pack.config.jsarchivo donde mencionamos la carpeta de destino y el punto de entrada.

En el Angularpunto de entrada 2 de la mayoría de las aplicaciones es main.tsdonde mencionamos el módulo de arranque inicial, por ejemplo (módulo de aplicación), este módulo contiene información completa de la aplicación, como todas las directivas, servicios, módulos, componentes e implementación de enrutamiento de toda la aplicación.

Nota: Mucha gente tiene dudas de por qué index.htmlsolo iniciar la aplicación, aunque no hayan mencionado ningún lugar. La respuesta es cuando se Webpackejecuta el comando de servicio, crea un servicio propio y, de forma predeterminada, se carga index.htmlsi no ha mencionado ninguna página predeterminada.

Espero que la información brindada ayude a algunas personas.

¿Cómo se construye Angular?

Las Angular CLIllamadas Webpack, cuando Webpackllega a un .tsarchivo, lo pasa al TypeScriptcompilador, que tiene un transformador de salida que compila Angularplantillas.

Entonces la secuencia de construcción es:

Angular CLI=> Webpack=> TypeScriptCompilador => El TypeScriptcompilador llama al Angularcompilador en tiempo de compilación.

¿Cómo funciona Angular?

Angulararranca y se ejecuta usando Javascriptfile.

En realidad, el proceso de arranque es tiempo de ejecución y ocurre antes de abrir el navegador. Esto nos lleva a nuestra siguiente pregunta.

Entonces, si el proceso de arranque ocurre con el Javascriptarchivo, ¿por qué AngularDocs usa el main.tsarchivo TypeScript para explicar el proceso de arranque?

AngularLos médicos solo hablan de los .tsarchivos, ya que esa es la fuente.

Esta es una respuesta breve. Aprecie si alguien puede responder en profundidad.

Los créditos van a @ Toxicable por responder mis preguntas en el chat.

Puede que llegue tarde para esta respuesta, pero recientemente se ha hablado muy bien sobre este tema, que comienza desde el punto de vista de un principiante y profundiza. En lugar de intentar resumir o señalar información errónea en este hilo con mis palabras, simplemente vincularé el video de Kara Erickson: Cómo funciona Angular .

Ella es la líder tecnológica en el marco Angular y hace una muy buena presentación sobre:

• ¿Cuáles son las partes principales del marco angular?
• cómo funciona el compilador, qué produce
• ¿Qué es una "Definición de componente"?
• ¿Qué es un bootstrap de aplicación, cómo funciona?

Entonces, si el proceso de arranque ocurre con el archivo Javascript, ¿por qué Angular Docs usa el archivo main.ts TypeScript para explicar el proceso de arranque?

Esto es parte de la versión .js transformada de main.ts emitida por la ng buildcual aún no está uglified y minified. ¿Cómo espera que un principiante comprenda este código? ¿No parece mucho complicado?

Object(__WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_dynamic__["a" /* platformBrowserDynamic */])().bootstrapModule(__WEBPACK_IMPORTED_MODULE_2__app_app_module__["a" /* AppModule */])
    .catch(function (err) { return console.log(err); });

y con el ng build --prod --build-optimizerque uglifica y minimiza su código para optimizarlo, los paquetes generados son compactos y están en formato ilegible de bits.

webpackJsonp([1],{0:function(t,e,n){t.exports=n("cDNt")},"1j/l":function(t,e,n){"use strict";n.d(e,"a",function(){return r});var r=Array.isArray||function(t){return t&&"number"==typeof t.length}},"2kLc

mientras que el archivo main.ts es legible por humanos y lúcido, es por eso que angular.io usa main.ts para explicar el proceso de arranque de la aplicación angular. Angular: ¿Por qué TypeScript? Aparte de esto, si hubiera sido un autor de un marco tan excelente, ¿qué enfoque habría utilizado para hacer que su marco sea popular y fácil de usar? ¿No optaría por una explicación clara y concisa en lugar de una complicada? Estoy de acuerdo en que la documentación de angular.io carece de una explicación detallada y no es muy buena, pero por lo que he visto, se están esforzando por mejorarla.

Angular 9+ usa AOT (compilación anticipada), lo que significa que toma todos los bits dispersos en varios archivos, es decir, componentes (.ts + .html + .css), módulos (.ts) y compilación de JavaScript comprensible para el navegador que en tiempo de ejecución se descarga y ejecutado por el navegador.

Antes de Angular 9 era JIT (Just in time Compilation) donde el código se compilaba como lo requería el navegador.

Para obtener más información, consulte: Documentación de Angular AOT