typescript - Angular 2 Ahead-of-Time-kompilator hittar inte ngfactory?

UPPDATERA

Jag arbetar fortfarande med detta, men nu ger inte ngc-cli mig några fel. Däremot skapar det fortfarande inte mina NGFactory-filer. Jag har uppdaterat allt till de senaste versionerna.

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) - att ta bort denna fil, som startar upp min A2-app och därför pekar på min NgFactory-fil, innebär att ngc nu körs utan några fel.

Det verkar dock läsa min app.module-fil, och skapa en node_modules-fil och göra många fabriksfiler för A2 självt. Men min kod, min app.module.ngfactory finns inte i 'aot'-mappen som min tsconfig pekar på!

Snälla hjälp!

Jag är väldigt ny på Angular 2 och har experimenterat med att använda webpack för att skapa en bundle-fil åt mig. Den här filen är dock över 3 MB. Så jag tänkte att jag skulle titta på att använda System JS (jag ställer en fråga om det).

Men medan jag tittade på det, upptäckte jag varför mina bundle-filer var så stora, eftersom jag använde JIT-kompilatormetoden för att bygga koden. Så jag har försökt få min enkla lilla app att fungera (startapp från Angular-sidan) genom att använda AOH-kompilatorn för att bygga. Men jag kan inte få det att fungera.

Det här är min ts-konfigurationskod:

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
  }
}

Min komponentkod Jag lade till moduleId i @Component och window.module='aot'; inställningen i min html-fil som laddar appen. Min komponentkod:

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'; } 

Det här är min nuvarande appmodulkod, oförändrad från exemplet jag har använt.

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 { }

Nu min main.ts-fil, det här är vad som verkar ge mig mina problem. Jag har ändrat import-satsen för att använda NgFactory, men det fungerar överhuvudtaget inte!

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!

Så när jag kör node_modules/.bin/ngc (körs i en Ubuntu 16.04 VM), får jag följande fel:

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

Och ja, jag har installerat @angular/compiler-cli & @angular/platform-server

Och ja, jag hittade denna fråga, Angular 2 - Ahead-of-time compilation hur man gör - Men när jag ändrar min main.ts-fil för att peka på en annan mapp, får jag samma fel....

Så vad gör jag för fel?

Jag är också osäker på hur detta påverkar att bygga en bundle-fil med webpack, eftersom jag inte kunde få detta att fungera, jag har inte kommit så långt, men all hjälp skulle vara mycket välkommen.

Tack.

Svar #1

Är du säker på att det är din korrekta filväg till app.module.ngfactory? Jag var tvungen att kopiera vägen från app.module.ngfactory för att få min main.ts att fungera och det slutade med att det bara blev följande:

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

Jag såg också detta från ditt inlägg:

(1) - den här filen genereras inte alls!

Min app.module.ngfactory genererades inte eftersom jag inte hade rätt version av TypeScript. Jag ändrade till följande i min package.json-fil och den genererades:

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

Svar #2

Detta kanske inte är ett fullständigt svar men det verkar, utifrån de begränsade tester jag har gjort, fungera.

Jag stötte på detta GitHub A2-startprojekt, https://github.com/jbalbes/angular2-aot-webpack. Jag laddade ner det till en fungerande testmapp och det fungerade, ngc-kommandot skapade projektets .ngfactory-fil.

Men det här projektet använder en äldre version av A2. Så jag gjorde några tester, jag har uppdaterat A2-beroenden i package.json till 2.4.1. Efter det fungerade det fortfarande. Så jag har lagt till alla mina paket, eftersom jag trodde att ett eller flera av dem har någon slags problem med ngc-kompilatorn.

Men inget verkade få det att fungera förrän jag lade till TypeScript till 2.1.4 - då genererade det inte några ngfactory-filer.

Vänligen låt mig veta om någon annan har samma problem med AOT och TypeScript 2.1.4 (jag har också provat 2.1.1 och det gav bara många fel)