UPDATE
I am still wokring on this but now the ngc cli does not give me any errors. However it still does not make my NGFactory files. I have updated eveything to the lastest versions.
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) - revoeing this file, which bootstraps my A2 app, and therefore points to my NgFactory file, means that ngc now runs without any errors.
However it seems to read my app.module file, and make a node_modules file and make lots of factory files for A2 itselfs. But my code, my app.module.ngfactory is not in the 'aot' folder that my tsconfig is pointing to!
Please help!
I am very new to Angular 2, and have been playing around with using webpack to build a bundle file for me. However, this file is over 3mb. So I thought I would look into using System JS (I ask a question about that).
But while looking to that, I found out why my bundle files where so big, as I was using the JIT compiler method to build the code. So I have been trying to get my simple little app to work (starter app from the Anagular site) to work using the AOH compiler to build. But I can not get it to work.
This is my ts config code:
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
}
}
My Component code I added the moduleId into the @Component and the window.module = 'aot'; setting into my html file that loads the app. My Component code:
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'; }
This is my current app module code, unchanged form the example I have used.
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 { }
Now my main.ts file, this is what seems to be giving me my problems. I have changed the import statment to use the NgFactory, however that does not work at all!
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!
So when I run node_modules/.bin/ngc (running in a Ubuntu 16.04 VM), I get the following error:
Error at /var/www/typescript/main.ts:10:36:
Cannot find module './modules/app.ngfactory'. <-- ????????
And yes I have installed @angular/compiler-cli & @angular/platform-server
And yes I did found this question, Angular 2 - Ahead-of-time compilation how to - But when I change my main.ts file to point to another folder, I get the same error....
So what am I doing wrong?
I am also not sure how this plays into building a bundle file with webpack let, has I could not get this to work, I have not gotten that far, but any help would be most welcome.
Thanks.
