¿Cómo se carga el marco angular en una aplicación con CLI angular?

Estoy convirtiendo una aplicación AngularJS existente en una aplicación híbrida, para comenzar a actualizar incrementalmente a Angular 4. Quiero entender cómo se debe hacer reference a AngularJS en el AngularJS existente. En la aplicación AngularJS existente, está claro cómo se está cargando el framework AngularJS: es simplemente un file de script incluido:

<script src="/angular/angular.js"></script> 

Para familiarizarme con una versión angular actualizada, he creado una aplicación Angular 5 'de inicio rápido' por separado usando la guía de inicio rápido angular en https://angular.io/guide/quickstart , y puedo ejecutarla usando:

 ng serve --open 

Sin embargo, cuando miro los files del proyecto, no veo dónde se está cargando realmente el marco angular. No se incluye ningún script en el file src / index.html para esa aplicación, simplemente declara una directiva para un componente (app.component.ts) que se ve así:

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Test Angular 5 app'; } 

¿De dónde importa realmente la import? La documentation angular dice sobre el file index.html que es:

La página HTML principal que se sirve cuando alguien visita su sitio. La mayoría de las veces, nunca necesitarás editarlo. La CLI agrega automáticamente todos los files js y css al comstackr su aplicación para que nunca tenga que agregar ninguna label aquí manualmente.

Entonces, ¿Que esta pasando aquí? ¿Cómo se está haciendo reference a @ angular / core?

Cuando se usa CLI angular, tenemos muchas partes mobilees. Para entender realmente lo que está sucediendo, debemos revisar algunas de las tecnologías centrales utilizadas en Angular CLI, ya que se relacionan con los files de salida y la resolución del module:

  • TypeScript: transferirá su código TypeScript a ES5 o ES6 (más comúnmente ES5). El código transstackdo usará modules CommonJS por defecto si el objective es ES5. Si el objective es ES6, se usarán modules ES6 .
  • Webpack: tomará su código TypeScript transstackdo y creará un gráfico de dependencia de sus importaciones / exportaciones en function de los puntos de input definidos en webpack.config.js . Este gráfico de dependencia includeá todos sus modules y empaquetará estos modules en packages 1+, dependiendo de la configuration. Este es el paso donde la dependencia @angular/core (que vive en node_modules/@angular/core ) es procesada por Webpack y agregada a un package al que se puede acceder durante el time de ejecución.

Puede cargar los packages generados en la página incluyendo los files generados en su HTML. En el caso de los files JS, los carga con la label de script como lo hizo con AngularJS.

Debido a que estamos utilizando CLI Angular, hay muchas configuraciones dentro de Webpack que están configuradas por defecto, por lo que tendremos múltiples packages generados.

Acabo de crear un proyecto de CLI angular vacío e inspeccioné el HTML para ver los 5 packages generados:

enter image description here

En el núcleo de la complejidad cuando se comparan los files de proyectos angulares con los files AngularJS, el código angular se transforma a través de múltiples pasos de compilation, mientras que el código AngularJS normalmente se usa de fábrica con ES5. Si tuviera que agregar Webpack y TypeScript a su compilation AngularJS, vería algo muy similar a la salida angular.


¿Dónde se configura Webpack en Angular CLI?

Debajo del capó, Angular CLI usa Webpack para build su proyecto y agrupar sus files.

El equipo de Angular optó por no exponer un file de configuration de Webpack configurable para Angular CLI, pero agregaron ng eject , que genera un webpack.config.js que coincide con la construcción de Webpack de su proyecto. La desventaja de expulsar es que ya no usará ng serve para servir su proyecto. En su lugar, usará npm run build && npm run start (verá estos scripts agregados a su package.json después de expulsar), que buildá y servirá su proyecto en webpack.config.js file webpack.config.js generado.

Esta característica es esencial si necesita realizar modificaciones personalizadas a la compilation pnetworkingeterminada de Webpack.

Lea más sobre ng eject aquí .

¿Dónde están los packages generados?

Si usa ng serve , no verá ninguno de sus files generados porque se están publicando desde la memory y no desde el disco (para acelerar el desarrollo cuando los files cambian constantemente), por lo que los files generados no se encuentran en ninguna carpeta .

Si desea ver los files generados, puede ejecutar ng build , que creará una carpeta dist con el index.html y los activos / packages asociados.

Tenga en count que, de forma pnetworkingeterminada, todos los commands que crean o sirven su proyecto eliminarán su carpeta dist less que pase la --no-delete-output-path cuando construya / publique.

Debe comprender cómo funcionan las importaciones y exportaciones en TypeScript

De los documentos de TypeScript

Exportar una statement

Cualquier statement (como una variable, function, class, alias de tipo o interfaz) se puede exportar agregando la palabra key export.

Validation.ts

 export interface StringValidator { isAcceptable(s: string): boolean; } 

ZipCodeValidator.ts

 export const numberRegexp = /^[0-9]+$/; export class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } 

Declaraciones de export

Las declaraciones de export son útiles cuando las exportaciones deben renombrarse para los consumidores, por lo que el ejemplo anterior se puede escribir como:

ZipCodeValidator.ts

 class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } export { ZipCodeValidator }; export { ZipCodeValidator as mainValidator }; 

Importar

Importar es tan fácil como exportar desde un module. La import de una statement exportada se realiza mediante uno de los siguientes formularios de import:

Importar una sola export desde un module

 import { ZipCodeValidator } from "./ZipCodeValidator"; let myValidator = new ZipCodeValidator(); 

las importaciones también pueden renombrarse

 import { ZipCodeValidator as ZCV } from "./ZipCodeValidator"; let myValidator = new ZCV(); 

Importe todo el module en una sola variable y úselo para acceder a las exportaciones del module

 import * as validator from "./ZipCodeValidator"; let myValidator = new validator.ZipCodeValidator(); 

Como siguió la guía de inicio rápido angular, debe haber utilizado npm, que se usa para instalar sus modules y dependencies.

Si lees angular.io/npm

@ angular / core: partes esenciales del entorno de ejecución necesarias para cada aplicación. Incluye todos los decoradores de metadatos, Componente, Directiva, dependency injection y los ganchos del ciclo de vida de los componentes.

Y por defecto npm almacena todas sus dependencies en el directory node_modules .

Por lo tanto, está importando componente de @ angular / core que se encuentra dentro del directory node_modules .