angular: JitCompilerFactory Bug at Angular 5
I’m submitting a…
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
JitCompilerFactory already exported to public api from this https://github.com/angular/angular/pull/20478
but when i install Angular 5 then start using it got some error in production
my code
export function compilerFactory() { return new JitCompilerFactory([{useJit:true}]).createCompiler() }
ERROR in src/app/app.module.ts(11,9): error TS2554: Expected 0 arguments, but got 1. src/app/dynamic/dynamic.component.ts(17,8): error TS2339: Property 'component' does not exist on type 'DynamicComponent'.
it seems JitCompilerFactory no need arguments, then i tried without arguments
export function compilerFactory() { return new JitCompilerFactory().createCompiler() }
then i got new error
ERROR TypeError: Cannot read property 'useJit' of undefined
i tried manually edit compiler_factory.d.ts
export declare class JitCompilerFactory implements CompilerFactory { private _defaultOptions; constructor(options: CompilerOptions[]) <<< i add this constructor createCompiler(options?: CompilerOptions[]): Compiler; }
after that im trying compile again but got new error :
Uncaught (in promise): Error: Unexpected value 't' imported by the module 'function (){}'. Please add a @NgModule annotation.
Expected behavior
how to fix this, Thanks
Minimal reproduction of the problem with instructions
https://github.com/jackzard/Angular5JitCompilerFactory
Environment
Angular version: 5.1.0-beta.2
For Tooling issues:
- Node version: 8.9
- Platform: Mac
Others:
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 5
- Comments: 25 (7 by maintainers)
Hello, we reviewed this issue and determined that it doesn’t fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag
angular.If you are wondering why we don’t resolve support issues via the issue tracker, please check out this explanation.
@ocombe : referring to your comment on Nov. 30, I created a feature request for the CLI: https://github.com/angular/angular-cli/issues/9306
It would be nice if you as an Angular contributor could add a comment to the issue to raise the awareness at the CLI team.
I think it is reality that there are use-cases where applications need AOT for the static parts of the app and JIT for dynamic content from the server. In my view, both the CLI and Angular should support this use case properly. Once that is possible, I guess that the number of AOT+JIT related issues will become less.
Please read what I wrote above: https://github.com/angular/angular/issues/20639#issuecomment-347149868
You shouldn’t create the compiler yourself, you need to let the injector do the work here. Look at the code that I used to test it: https://github.com/angular/angular/blob/master/integration/dynamic-compiler/src/app.module.ts
Also I can already tell you that it will fail because of missing metadata when you try to load the lazy module, the reason is that starting from 1.5.1 the cli strips metadata from your bundles when you use aot (to create smaller bundles). I’m not even sure if it’ll work in JIT. The example that I used to test the JitCompilerFactory uses rollup instead of the cli to bundle the lazy loaded module (don’t use my setup, it’s not optimized, there is no deduplication of modules).
If you want to know why the cli does that, @hansl should be able to answer your questions.
In the mean time, you can use the cli 1.5.0 if you want.
@ocombe , same error here, using
if I build with JIT (at-loader) then everything is working, but I need AOT
@ngtools/webpackAngularCompilerPlugin plugin. If lazy loaded module contains imported module which is using JitCompilerFactory in a way exactly as you showed here, then I get error:You can reproduce it by using angular2-busy lib forked by me to refactor use of JitCompilerFactory:
I can confirm that
JitCompilerFactoryis usable.Here is an example plunker: https://embed.plnkr.co/fPLr5wRLJK6CjUjSKoTb/
@ocombe, @jackzard Please look into the Issue
JIT Complier needed with AOT Build for Dynamic Component. #20875
I need the JIT Complier @ run time for producing the truly dynamic component. We build with AOT Build which do not work in Angular 5.0. With Angular 4.0 it is working. I am not sure why the feature that was given was taken out. Also what is the alternative?. No one answers except everyone loads the that static HTML as dynamic.
This is the sample of what we do. If you look into app/app.component.ts
In method ngAfterContentInit() {
this.addComponent('<div [formGroup]=“_parent.myForm” class=“form-row”> …
http://plnkr.co/edit/rELaWPJ2cDJyCB55deTF?p=preview
All our validation and controls comes from database which is configured.
In angular 4.0 we Implement and create the compiler @ run time (This works perfectly with AOT Build)
import { JitCompilerFactory } from ‘@angular/compiler’;
private compiler: Compiler = new JitCompilerFactory([{ useDebug: false, useJit: true }]).createCompiler();
Please bring back the feature to allow to build with AOT. Tell me the alternative to fix the issue.
Please consider reopening the issue
-Vijay
@sarunint , by lazy I mean that it should be loaded inside loadChildren by router, e.g. inside chunk. So in this case it would not work.