AoT compilation problem about angular-webpack-starter HOT 20 CLOSED

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.

from angular-webpack-starter.

@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".

from angular-webpack-starter.

@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.

from angular-webpack-starter.

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.

from angular-webpack-starter.

@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

from angular-webpack-starter.

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.

from angular-webpack-starter.

@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?

from angular-webpack-starter.

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

from angular-webpack-starter.

@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",

from angular-webpack-starter.

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

from angular-webpack-starter.

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

from angular-webpack-starter.

@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?

from angular-webpack-starter.

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

from angular-webpack-starter.

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

from angular-webpack-starter.

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

from angular-webpack-starter.

@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.

from angular-webpack-starter.

@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.

from angular-webpack-starter.

@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.

from angular-webpack-starter.

@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.

from angular-webpack-starter.

@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.

from angular-webpack-starter.