AoT compilation problem

[buddyackerman]

My first issue is to know if the build:aot script is even doing AoT compilation. I don't see ngc being called anywhere but for now I will assume that somewhere webpack is being configured to run it (possibly via some package I'm not understanding). My second issue is that I added the PrimeNG package to the project and added the following to the app.module and applied the directive to a new element that I placed in the dashboard template,

import { InputText } from 'primeng/primeng'

@NgModule({ declarations: [ AppComponent, APP_DECLERATIONS, InputText ],

When I try to run npm run build:aot I get errors on all the PNG components similar to the follwing

WARNING in .//primeng/components/inputtext/inputtext.js
Cannot find source file 'inputtext.ts': Error: Can't resolve './inputtext.ts' in 'C:\Projects\Angular2\angular2webpack2-starter\node_modules\primeng\components\inputtext'
@ .//primeng/primeng.js 33:9-52
@ ./src/app/app.module.ts
@ ./src/compiled/src/app/app.module.ngfactory.ts
@ ./src/main.browser.aot.ts

There is not componentname.ts file but there are componentname..d.ts files. Is it just that PNG is not properly setup for AoT or is there a problem with the AoT compilation configuration?

[qdouble]

As stated in the README.md, you're supposed to use npm run compile:

To create AOT version, run npm run compile. This will compile and build script.
Then you can use npm run prodserver to see to serve files.
Do not use build:aot directly unless you have already compiled.
Use npm run compile instead, it compiles and builds:aot

Let me know if you have the same issues when running the proper command.

[buddyackerman]

@qdouble I ran the command and now I get a different error:

Error: Unexpected value 'InputText' declared by the module 'AppModule'

I'm not sure why it's "Unexpected".

[qdouble]

@buddyackerman PrimeNG probably isn't AOT compatible yet: primefaces/primeng#871

Probably would be best to track/file the issue on their repo if the app works fine in AOT mode without using them.

[buddyackerman]

I'm posted this question with them on their forums but I wanted to make sure it's their problem. This error doesn't look to me like it's a problem in the PNG components (yet). This looks like AoT is not recognizing something and I don't know if there is some config that I haven't added that needs to be added or not. The only thing I did after downloading this starter project is install PrimeNG and add those lines to the AppModule and then added an element to the dashboard component's template. Again the error message doesn't "appear" to be PNG specific error but obviously error messages can be deceiving.

[qdouble]

@buddyackerman you can get that error message if what you are importing is not properly packaged to work with AOT...I tried to play with their stuff a little bit just now, but seems to be issue even with not using AOT mode. This repo uses material 2 and other 3rd party packages just fine. I ran into issues with ng2-bootstrap when thinking about creating a bootstrap branch, but the issue is ng-bootstrap, not this repo. Likewise, the PrimeNG issue, is not directly related to this repo either and the link I gave you states that they haven't made their stuff compatible with AOT

[buddyackerman]

Yeah, I'm looking into what they are missing to be AoT compatible. Looks like first step is to generate metadata.json files. Thanks for the info.

[buddyackerman]

@qdouble One other question, I was expecting that when the AoT compile runs there would be a bunch of generated js files because ngc is supposed to just be a in place replacement of tsc but I don't see any js files. Are they being created then deleted after webpack bundles them?

[DzmitryShylovich]

ngc generates *.ngfactory.ts files. you can find them inside src/compiled directory.

[qdouble]

@buddyackerman yes, they are being created into an output folder and then deleted as they not needed...notice the rimraf part at the end of the ngc script, if you want to see the js related files, you can remove that part of the script
"ngc": "./node_modules/.bin/ngc -p tsconfig.aot.json && npm run rimraf -- output",

[buddyackerman]

@qdouble @DzmitryShylovich Are ngfactory.ts files generated from the js files? If not, why are both created?

[DzmitryShylovich]

Nope, *.ngfactory.ts files are generated from ts files and also ts files. After that they are compiled into plain js by tsc.

[buddyackerman]

@DzmitryShylovich So, what's the process? ngc compiles *.ts to ngfactory.ts then tsc is used to compile ngfactory.ts to *.js then webpack bundles to single js?

[DzmitryShylovich]

angular code (.ts) --(ngc)--> *ngfactory.ts --(tsc)--> js

[qdouble]

Yeah, after doing some testing, emitting js or metadata doesn't appear to have any effect, as the final build step is still made by Webpack with the .ngfactory generated files, hence this commit: 65f64a8

[buddyackerman]

@qdouble Shouldn't the src/compiled folder be removed as well since it's not used once bundling is done?

[qdouble]

@buddyackerman technically, yeah, but in usefulness, no... As a lot of times I may be testing between AOT/JIT builds...so not deleting the compiled folder allows me to switch between testing both modes without recompiling.

[buddyackerman]

@qdouble but those are never used in JIT mode. The factory files are created by the compiler in memory in the browser, right? I can see maybe keeping them if you want to troubleshoot some problem when running in JIT mode and you want to see what the compiler would have created on the client side.

[qdouble]

@buddyackerman when creating the AOT build, the scr/compiled folder is needed. I was saying that you could technically delete it after creating the build...but what happens if you create a JIT build afterwards and then want to check the AOT build again? If you have deleted the src/compiled folder, you'll have to use npm run compile all over again...while instead, you could just use npm run build:aot which would skip compiling again and just use the src/compiled folder.

[buddyackerman]

@qdouble Yeah I was referring to deleting after build and bundling was complete but I understand what you're saying. I'm still learning ng-cli, AoT, and webpack so I'm asking a lot of questions just to understand all the underpinnings. I've been working on an app for nearly 4 months (using systemJS, gulp browserify) through all the RC changes and now I feel I need to learn these new(er) tools and methods of for building and distributing the app before I get much further down the road now that NG2 is "final".

Thanks for answering my questions.

[qdouble]

@buddyackerman no problem.... the angular team is supposed to be working on a AOT plugin for Webpack as well, so hopefully the build process will be a little less convoluted once that comes out.