Búsqueda de sitios web

typescript - ¿El compilador Ahead-of-Time de Angular 2 no encuentra ngfactory?

ACTUALIZAR

Todavía estoy trabajando en esto, pero ahora el CLI de ngc no me da ningún error. Sin embargo, todavía no crea mis archivos NGFactory. He actualizado todo a las versiones más recientes.

tsconfig.js

{
 "compilerOptions": {
   "target": "es5",
   "module": "es2015",
   "moduleResolution": "node",
   "sourceMap": false,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "lib": ["es2015", "dom"],
   "noImplicitAny": true,
   "suppressImplicitAnyIndexErrors": true
 },

 "files": [
   "./typescript/modules/app.module.ts"
   // "./typescript/main.ts" <- see (1)
 ],

 "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
 }
}

(1) - eliminar este archivo, que inicia mi aplicación A2 y, por lo tanto, apunta a mi archivo NgFactory, significa que ngc ahora se ejecuta sin ningún error.

Sin embargo, parece que lee mi archivo app.module, y crea un archivo node_modules y genera muchos archivos factory para A2 en sí. ¡Pero mi código, mi app.module.ngfactory, no está en la carpeta 'aot' a la que apunta mi tsconfig!

¡Por favor, ayuda!

Soy muy nuevo en Angular 2, y he estado experimentando con el uso de webpack para crear un archivo de paquete para mí. Sin embargo, este archivo tiene más de 3 MB. Así que pensé en investigar el uso de System JS (hago una pregunta sobre eso).

Pero mientras miraba eso, descubrí por qué mis archivos de paquete eran tan grandes, ya que estaba usando el método de compilación JIT para construir el código. Así que he estado intentando hacer que mi pequeña y sencilla aplicación (aplicación de inicio del sitio de Angular) funcione usando el compilador AOT para compilar. Pero no puedo lograr que funcione.

Este es mi código de configuración de ts:

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },

  "files": [
    "./typescript/modules/app.module.ts",
    "./typescript/main.ts"
  ],

  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : true
  }
}

El código de mi Componente: añadí el moduleId en el @Component y la configuración window.module='aot'; en mi archivo HTML que carga la aplicación. Mi código de Componente:

app.components.ts

 import { Component } from '@angular/core';

 @Component({
   moduleId: module.id,
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`
 })

 export class AppComponent { name = 'Angular'; }

Este es el código actual de mi módulo de la aplicación, sin cambios desde el ejemplo que he usado.

app.module.ts

 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent }  from '../components/app.component';

 @NgModule({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })

 export class AppModule { }

Ahora mi archivo main.ts, esto es lo que parece estar dándome problemas. He cambiado la declaración de importación para usar el NgFactory, ¡sin embargo eso no funciona en absoluto!

Main.ts

 import { platformBrowser }    from '@angular/platform-browser';
 import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory'; (1)

 platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

 (1) - this file is not generted at all!

Entonces, cuando ejecuto node_modules/.bin/ngc (ejecutándose en una máquina virtual Ubuntu 16.04), obtengo el siguiente error:

 Error at /var/www/typescript/main.ts:10:36: 
 Cannot find module './modules/app.ngfactory'. <-- ????????

Y sí, he instalado @angular/compiler-cli & @angular/platform-server

Y sí, encontré esta pregunta, Angular 2 - compilación anticipada - Cómo hacerlo - Pero cuando cambio mi archivo main.ts para apuntar a otra carpeta, obtengo el mismo error....

Entonces, ¿qué estoy haciendo mal?

Tampoco estoy seguro de cómo esto influye en la creación de un archivo bundle con webpack, ya que no pude hacer que esto funcionara, no he llegado tan lejos, pero cualquier ayuda sería muy bienvenida.

Gracias.

Respuesta #1

¿Estás seguro de que esa es la ruta de archivo correcta a app.module.ngfactory? Tuve que copiar la ruta desde app.module.ngfactory para que mi main.ts funcionara y resultó que era simplemente la siguiente:

import { AppModuleNgFactory } from './app.module.ngfactory';

También acabo de ver esto en tu publicación:

(1) - ¡este archivo no se genera en absoluto!

Mi app.module.ngfactory no se estaba generando porque no tenía la versión correcta de TypeScript. Cambié lo siguiente en mi archivo package.json y se generó:

"awesome-typescript-loader": "3.0.0-beta.17",
"typescript": "2.0.3"

Respuesta #2

Esto podría no ser una respuesta completa, pero parece, según las pruebas limitadas que he realizado, que está funcionando.

Me encontré con este proyecto inicial A2 en GitHub, https://github.com/jbalbes/angular2-aot-webpack. Lo descargué en una carpeta de prueba funcional y funcionó, el comando ngc creó el archivo .ngfactory del proyecto.

Sin embargo, este proyecto está usando una versión más antigua de A2. Así que hice algunas pruebas, he actualizado las dependencias de A2 en el package.json a 2.4.1. Después de eso, todavía estaba funcionando. Así que he agregado todos mis paquetes, pensando que uno o más de ellos tiene algún tipo de problema con el compilador ngc.

Sin embargo, nada parecía hacer que funcionara, hasta que añadí TypeScript, a la versión 2.1.4 - entonces no produjo ningún archivo ngfactory.

Por favor, háganme saber si alguien más tiene el mismo problema con AOT y TypeScript 2.1.4 (también he probado 2.1.1 y eso solo dio muchos errores)