[4.0.0] bug(compiler-cli): Cannot use JitCompiler with AoT

[lacolaco]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior Since 4.0.0, JitCompiler cannot be used with AoT compilation. It's exported from @angular/compiler but its compiled import path is @angular/compiler/src/jit/compiler

app.module.ts

import { NgModule, Compiler } from '@angular/core';
import { JitCompiler } from '@angular/compiler';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [
        {
            provide: Compiler, useExisting: JitCompiler,
        },
    ]
})
export class AppModule {
}

app.module.ngfactory.ts(summary)

import * as import0 from '@angular/core';
import * as import1 from './app.module';
import * as import2 from './app.component.ngfactory';
import * as import3 from '@angular/compiler/src/jit/compiler';
class AppModuleInjector extends import0.ɵNgModuleInjector<import1.AppModule> {
  _AppModule_0:import1.AppModule;
  __Compiler_1:any;
  constructor(parent:import0.Injector) {
    super(parent,[import2.AppComponentNgFactory],[import2.AppComponentNgFactory]);
  }
  get _Compiler_1():any {
    if ((this.__Compiler_1 == null)) { (this.__Compiler_1 = this.parent.get(import3.JitCompiler)); }
    return this.__Compiler_1;
  }

@angular/compiler/src/jit/compiler is not existing JS file (because of 4.0.0 FESM). webpack bundling crashes by this problem.

Expected behavior

Resolve JitCompiler from @angular/compiler

Minimal reproduction of the problem with instructions

https://github.com/laco0416/ngrepro-0001

1. git clone
2. npm install
3. npm run ngc
4. see the generated files

What is the motivation / use case for changing the behavior?

Please tell us about your environment: OSX

• Angular version: 4.0.0

• Language: TypeScript 2.2

• Node (for AoT issues): node --version = 6.9.5

[Toxicable]

Just to add to this, you can reproduce it with the CLI aswell. ng new myproj cd myproj add to app.module.ts

  providers: [ { provide: Compiler, useExisting: JitCompiler, }, ],

run ng serve --aot ng serve works fine however and you should get an error similar to Error: Can't resolve '@angular/compiler/src/jit/compiler' in '...\myproj\src\$$_gendir\app' which indicates the same deep import as @laco0416 pointed out in the ngc build

[patrikx3]

Same error for me.

[Paladinium]

Any workaround?

[patrikx3]

use JIT only and wait until AOT is workling together at once... :) If you need JIT with AOT together anyway you will have larger bundle so it is possible same time any way... AOT + JIT = minus speed, plus bundle size JIT = minus speed, plus bundle size

You will be the same any way. :)

[Paladinium]

Here's the workaround using the JitCompilerFactory:

import {JitCompilerFactory} from '@angular/compiler';
...
// Need an exported function to make it work with AOT:
export function createJitCompiler () {
    return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();
}
...
@NgModule({
    providers: [
       { provide: Compiler, useFactory:  createJitCompiler},
    ],
    ...
})

[patrikx3]

@Paladinium are you able to create dynamic component with JIT? Right now I still get a No NgModule metadata TemplateModule (which I created on the fly), can you do it???

[Paladinium]

Yes, I can, but the code to create a module dynamically is complex. It's along the lines of this: http://www.themonkeythemes.com/blog_backoffice/create-components-at-runtime-with-angular

[patrikx3]

@Paladinium Sorry, my error, are you able to compile with AOT? So AOT + JIT?

[Paladinium]

Yes. We use AOT. Except for one part of the UI that we wanted to build the UI dynamically (based on a server side configuration) which is where we use JIT.

[patrikx3]

@Paladinium Do you have an example? I use the same code, but it shows No NgModule metadata TemplateModule :(

[Paladinium]

This is the code that creates a factory for creating a component:

@Injectable
export class GenericTypeCreator {
    private _cacheOfFactories: {[templateKey: string]: ComponentFactory<GenericContextData>} = {};

    constructor(protected compiler: Compiler) {} // This is the JIT compiler

    createComponentFactory(template: string): Promise<ComponentFactory<GenericContextData>> {

        let factory = this._cacheOfFactories[template];

        if (factory) {
            console.log('Module and Type are returned from cache');

            return new Promise((resolve) => {
                resolve(factory);
            });
        }

        // unknown template ... let's create a Type for it
        let type   = this.createNewComponent(template);
        let module = this.createComponentModule(type);

        return new Promise((resolve) => {
            this.compiler
                .compileModuleAndAllComponentsAsync(module)
                .then((moduleWithFactories) => {
                    factory = moduleWithFactories.componentFactories.find(component => component.componentType === type);
                    this._cacheOfFactories[template] = factory;
                    resolve(factory);
                })
                .catch(error => {
                    console.log(error);
                });
        });
    }

    private createNewComponent (tmpl:string) {
        @Component({
            selector: 'dynamic-component',
            template: tmpl,
        })
        class CustomDynamicComponent implements GenericContextData {
             // In our case, this component gets a context set. But you can do with that component whatever you want.
      }
      return CustomDynamicComponent;
  }

    private createComponentModule (componentType: any) {
        @NgModule({
            imports: [
                // whatever modules you need as a dependency,
                CommonModule,
                ReactiveFormsModule
            ],
            declarations: [
                componentType
            ]
        })
        class RuntimeComponentModule { }
        // a module for just this Type
        return RuntimeComponentModule;
    }

}

And here's the caller:

@Component({
    selector: 'generic-ui',
    template: '<div #genericUiContentPlaceHolder></div>',
    providers: [SchemaToUiService, GenericDataService]
})
export class GenericUiComponent implements ... {

    @Input
    templateString: string;

    @ViewChild('genericUiContentPlaceHolder', {read: ViewContainerRef})
    public genericUiComponentTarget: ViewContainerRef;
    protected componentRef: ComponentRef<GenericContextData>;

    constructor(private genericTypeCreator: GenericTypeCreator) { }

   // Note: this component implements a couple of lifecycle methods to trigger the creation of the UI

    private buildUi () {
        if (this.componentRef) {
            this.componentRef.destroy();
        }

        console.log('The generic template is: ' + this.templateString);

        // here we get Factory (just compiled or from cache)
        this.genericTypeCreator
            .createComponentFactory(this.templateString) // <- this is what you pass in to be compiled by JIT
            .then((factory: ComponentFactory<GenericContextData>) => {
                // Target will instantiate and inject component (we'll keep reference to it)
                this.componentRef = this.genericUiComponentTarget.createComponent(factory);
                let component = this.componentRef.instance;
               // Here we pass data to the component mentioned above
                component.context = this.ui.context;
            });
    }
}

And the usage could be:

<generic-ui [templateString]='whatever string you want to be compiled'></generic-ui>

[maxbellec]

I confirm @Paladinium 's workaround (Angular 4.0.1 angular-cli 1.0.0 and similar code to generate dynamic components). Thanks!

[patrikx3]

I get the same error No NgModule metadata found for RuntimeComponentModule, do you have a full example? The GenericUiComponent, GenericTypeCreator app and the module? I am thinking just some import or something setting from the module or the app. Please help me out. I get always the same error.

Looks like the component is decorated, but the module is missing something somewhere. I get the same code.

[patrikx3]

Are you guys using 4.0.1 or 4.0.2? Is it the same for you?

What is you app and module settings? :)

[maxbellec]

On 4.0.1. Below are my module settings. To generate components, my code is similar to that of @Paladinium, and derived from http://stackoverflow.com/a/38888009/3218806

export function cookieStrategy() {
  console.log("COOKIE STRATEGY");
  return  new CookieXSRFStrategy('csrftoken', 'X-CSRFToken');
}

// https://github.com/angular/angular/issues/15510#issuecomment-294860905
export function createJitCompiler () {
  return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();
}

@NgModule({
  declarations: [
    ... // components and pipes
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes),
    BrowserAnimationsModule,
    HttpModule,
    SimpleNotificationsModule.forRoot(),
  ],
  bootstrap:    [AppComponent],
  providers: [
    // from http://plnkr.co/edit/wh4VJG?p=preview
    SvgPageTemplateBuilder,
    SvgPageComponentBuilder,
      ... // services
    {
      provide: APP_BASE_HREF,
      useValue: '/',
    },
    { provide: Compiler, useFactory:  createJitCompiler},
    // this is useful for dates and currencies
    { provide: LOCALE_ID, useValue: "fr-FR" },
    // CSRF protection
    { provide: XSRFStrategy, useFactory: cookieStrategy },
    ],
})
export class AppModule {}

[patrikx3]

end this is aot right? because same code component generator for me, all same, and my bundle is bigger with aot as well, but it is giving same error. jit working with aot not, so weird.

are you sure you using aot???

[Paladinium]

@maxbellec , yes, right, this is where I got the original code from. @patrikx3 : yes, we're using AOT. It seems to be that you should open a question on stackoverflow since it has nothing to do with this issue.

[maxbellec]

My bad, actually my code compiles with AOT but I still get the No NgModule metadata TemplateModule when the dynamic component should get compiled (the rest of the site works fine), so @Paladinium 's solution is not (yet) working for me. I'll try digging into it, @Paladinium if you happen to have made the same mistake as I did (your app is compiling and working but you can't use Jit to compile components), I'd be interested.

[patrikx3]

you must be using JIT, instead AOT. for sure!!!! you cannot create a dynamic module. for sure. the compiler does not allow dynamic modules! and you can decorate a component, but you cannot a dynamic module.

i tested all, the same code in 2.3 (angular-cli), 4.0, 4.0.1, 4.0.2, i understand the compiler how to create dynamic components and dynamic modules and even the angular guys say that you cannot create a dynamic module, so you are using JIT!!! for sure!

[patrikx3]

i am a pro in compiling in angular by now.. by hand... i am using AOT my self, love it. (bigger bundle yes, so i turned on gzip in nginx, so instead of 2.75MB is just 600KB ) but compiling is much faster like 2 seconds in a small project.

works even with 2G fast, max 15 seconds, from above 3G is fast!

i had to turn off JIT because it was not doing anything and solved in a different way.

[Paladinium]

@maxbellec : no, I never had this problem. I recommend opening a stackoverflow to not spam this bugreport with an application specific issue. Sounds to me like TemplateModule is not annotated with @NgModule. Or maybe check your tsconfig file that you need for AOT. For example the compiler options:

...
"compilerOptions": {
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitHelpers": true,
    "pretty": false,
    "sourceMap": true,
    "lib": ["es2015", "dom"],
    "noEmit": true,
    "strictNullChecks": false,
    "skipDefaultLibCheck": true,
    "noUnusedParameters": false,
    "noUnusedLocals": false,
    "typeRoots": [
      "node_modules/@types"
    ]
  }
...

[patrikx3]

your build is JIT, you just think it is AOT. even the angular guys say you cannot create modules on the fly with AOT and everyone says No NgModule metadata

you are the one with AOT creating modules on the fly

[maxbellec]

@Paladinium given the many discussions and workarounds found, I also doubt (but I hope you're right) you are actually using AOT AND making JITCompiler work.

Many well informed people (including contributors) seem to suggest it is not possible. Can you triple check everything works for you? If yes, could you provide a working plunker? It would make many people's life easier.

https://github.com/angular/angular/issues/15343 https://github.com/angular/angular/issues/11780 http://stackoverflow.com/a/42619501/3218806

[patrikx3]

@maxbellec : @Paladinium 's build is 100% is JIT!!! I tested all! v2, v4 , using angular-cli, my own , and always same error. how come angular-cli is wrong same error??? :) besides, his tsconfig.json is not the lowest js settings possible. :)

@Paladinium it is a miracle for you! i wish i get it as well!! :) :) :) :+1:

[Paladinium]

@maxbellec : I can provide you a ZIP that you can try ourself (see attachment). To run:

• If you want to run it in dev mode (which uses JIT all the time): npm run server:dev (if you clear the 'output' folder, you have to re-created the DLLs by running npm run build:dll)
• If you want to run it in prod mode (which uses AOT): npm run server:prod

I suggest you start with looking at the app.component.html which includes the same component twice: once 'normally' and once using the dynamic-ui component which gets a string (here with a component called 'some-component', but it could also be just HTML or both) that is then compiled using JIT and inserted into the page.

Just to not get confused: yes, 'some-component' is pre-compiled by AOT. But the string passed to the dynamic-ui component needs to be compiled and interpreted by Angular - which is the step where the JIT compiler is needed.

One more thing: I never said it can be done using the angular CLI. We created our own build based on Webpack 2 and I'm not saying that it's perfect. However, it manages the complexity of switching between JIT and AOT for dev and prod mode. Also note that among others, the entry points are different: main.browser.ts and main.browser.aot.ts.

I'm sure there is much to be improved in the given example, but for sure: it shows how to dynamically create a UI using JIT within an AOT compiled application. Let me know what you think.

angular4-aot-jit.zip

[patrikx3]

if this works, you are the god!

[patrikx3]

It is missin': const AotPlugin = require('@ngtools/webpack').AotPlugin;

How does it work without the @ngtools AotPlugin???

[alexzuza]

@patrikx3 He uses ngc

[patrikx3]

ok testing, thanks.

[patrikx3]

this is JIT. To make it work with AOT:

• npm run build:prod - generates an ouput I saved the files. (copy to another directory, but I still have to keep, otherwise broken - missing factories, which my builder does it by itself) then
• npm run build:aot:prod - (if i remove the previous output, broken, by itself is not working anyway, which is weird, have to keep the previous)

This is a JIT factory . Exact same bundles :)

then the last note: In my bundle is

• 2.5MB - JIT vs
• 2.75MB - AOT, though I am using GZIP so in the ends is like 600KB, which is nothing.

As well, my load form 3 seconds to 1.5 seconds. AOT is better, but for now I am using a different method, I had to leave out JIT. It cannot work without dyamic factories. Imagine tons of components. Very fast with AOT!!! Awesome!

This is JIT. If I got a bigger bundle with AOT as well, probably AOT + JIT. But the same bundle. :(

Please, if you can show 2 different bundles JIT vs JIT + AOT I would be very interested. I really need it, but for now it is not win.

Bruhuhuhuhuu

[Paladinium]

@patrikx3 : whether or not it is JIT or AOT at runtime is determined by the selection of the appropriate main.browser.ts vs. main.browser.aot.ts which is done by the build. Check out this documentation an compare those files with the ones provided: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#bootstrap

When we switched to AOT a couple of months ago, we could also observe the massive performance gain.

I hope I could help you - but I'm not going to continue this conversation since a working example has been provided which is using AOT.

[patrikx3]

@paladinium: alright, thanks for showing me, i have to test more, to make it work it out for my own app with this settings, thanks so much!

[patrikx3]

@paladinium: you are the god! i am getting the hang of it! it is a JIT, but we use the pre-compile code!

When it is already precompiled it is using the precompiled code and the rest is JIT. That is why we need awesome loader!!! It will be done soon!!!

I AM GOD AS WELL!!!! huhuhuhuhhu! I send you when it is working, but I can see it the light!!!!

[Paladinium]

Yes, you got it. I'm glad that I could help you.

[patrikx3]

@Paladinium YOU ARE THE TOTAL MASTER OF THE UNIVERSE!!!!

I DID IT! I AM USING THE FACTORIES, ALL!!!! BUT WHEN I NEED JIT, I GOT IT!!!

I AM YOUR SLAVE!!!

[rahulbpatel]

When I try this using AoT + Rollup compliation as described in the Angular Cookbook I am getting this error:

Error: Uncaught (in promise): Error: No ResourceLoader implementation has been provided. Can't read the url "toolbar.component.html"
Error: No ResourceLoader implementation has been provided. Can't read the url "toolbar.component.html"
    at d (http://localhost:5555/js/shims.js?1493151391600:5:2034)
    at Object.get (http://localhost:5555/js/app.js?1493151391601:18:18561)
    at t._fetch (http://localhost:5555/js/app.js?1493151391601:14:27723)
    at t.normalizeTemplateAsync (http://localhost:5555/js/app.js?1493151391601:14:28740)
    at t.normalizeTemplate (http://localhost:5555/js/app.js?1493151391601:14:28361)
    at t._loadDirectiveMetadata (http://localhost:5555/js/app.js?1493151391601:15:7098)
    at http://localhost:5555/js/app.js?1493151391601:15:10265
    at Array.forEach (native)
    at t.loadNgModuleDirectiveAndPipeMetadata (http://localhost:5555/js/app.js?1493151391601:15:10237)
    at http://localhost:5555/js/app.js?1493151391601:18:12416
    at Array.forEach (native)
    at t._loadModules (http://localhost:5555/js/app.js?1493151391601:18:12369)
    at t._compileModuleAndAllComponents (http://localhost:5555/js/app.js?1493151391601:18:12083)
    at t.compileModuleAndAllComponentsAsync (http://localhost:5555/js/app.js?1493151391601:18:11433)
    at http://localhost:5555/js/app.js?1493151391601:22:25906
    at d (http://localhost:5555/js/shims.js?1493151391600:5:2034)
    at Object.get (http://localhost:5555/js/app.js?1493151391601:18:18561)
    at t._fetch (http://localhost:5555/js/app.js?1493151391601:14:27723)
    at t.normalizeTemplateAsync (http://localhost:5555/js/app.js?1493151391601:14:28740)
    at t.normalizeTemplate (http://localhost:5555/js/app.js?1493151391601:14:28361)
    at t._loadDirectiveMetadata (http://localhost:5555/js/app.js?1493151391601:15:7098)
    at http://localhost:5555/js/app.js?1493151391601:15:10265
    at Array.forEach (native)
    at t.loadNgModuleDirectiveAndPipeMetadata (http://localhost:5555/js/app.js?1493151391601:15:10237)
    at http://localhost:5555/js/app.js?1493151391601:18:12416
    at Array.forEach (native)
    at t._loadModules (http://localhost:5555/js/app.js?1493151391601:18:12369)
    at t._compileModuleAndAllComponents (http://localhost:5555/js/app.js?1493151391601:18:12083)
    at t.compileModuleAndAllComponentsAsync (http://localhost:5555/js/app.js?1493151391601:18:11433)
    at http://localhost:5555/js/app.js?1493151391601:22:25906
    at d (http://localhost:5555/js/shims.js?1493151391600:5:2034)
    at l (http://localhost:5555/js/shims.js?1493151391600:5:1152)
    at l (http://localhost:5555/js/shims.js?1493151391600:5:838)
    at http://localhost:5555/js/shims.js?1493151391600:5:1666
    at t.invokeTask (http://localhost:5555/js/shims.js?1493151391600:5:10114)
    at Object.onInvokeTask (http://localhost:5555/js/app.js?1493151391601:6:6531)
    at t.invokeTask (http://localhost:5555/js/shims.js?1493151391600:5:10035)
    at n.runTask (http://localhost:5555/js/shims.js?1493151391600:5:5291)
    at a (http://localhost:5555/js/shims.js?1493151391600:5:214)
I @ app.js?1493151391601:1
t.handleError @ app.js?1493151391601:5
next @ app.js?1493151391601:6
e.object.o @ app.js?1493151391601:6
e.__tryOrUnsub @ app.js?1493151391601:5
e.next @ app.js?1493151391601:5
e._next @ app.js?1493151391601:5
e.next @ app.js?1493151391601:5
e.next @ app.js?1493151391601:5
e.emit @ app.js?1493151391601:6
t.triggerError @ app.js?1493151391601:6
onHandleError @ app.js?1493151391601:6
t.handleError @ shims.js?1493151391600:5
n.runGuarded @ shims.js?1493151391600:5
r @ shims.js?1493151391600:5
a @ shims.js?1493151391600:5
app.js?1493151391601:1 ERROR Error: Uncaught (in promise): Error: No ResourceLoader implementation has been provided. Can't read the url "toolbar.component.html"
Error: No ResourceLoader implementation has been provided. Can't read the url "toolbar.component.html"
    at d (http://localhost:5555/js/shims.js?1493151391600:5:2034)
    at Object.get (http://localhost:5555/js/app.js?1493151391601:18:18561)
    at t._fetch (http://localhost:5555/js/app.js?1493151391601:14:27723)
    at t.normalizeTemplateAsync (http://localhost:5555/js/app.js?1493151391601:14:28740)
    at t.normalizeTemplate (http://localhost:5555/js/app.js?1493151391601:14:28361)
    at t._loadDirectiveMetadata (http://localhost:5555/js/app.js?1493151391601:15:7098)
    at http://localhost:5555/js/app.js?1493151391601:15:10265
    at Array.forEach (native)
    at t.loadNgModuleDirectiveAndPipeMetadata (http://localhost:5555/js/app.js?1493151391601:15:10237)
    at http://localhost:5555/js/app.js?1493151391601:18:12416
    at Array.forEach (native)
    at t._loadModules (http://localhost:5555/js/app.js?1493151391601:18:12369)
    at t._compileModuleAndAllComponents (http://localhost:5555/js/app.js?1493151391601:18:12083)
    at t.compileModuleAndAllComponentsAsync (http://localhost:5555/js/app.js?1493151391601:18:11433)
    at http://localhost:5555/js/app.js?1493151391601:22:25906
    at d (http://localhost:5555/js/shims.js?1493151391600:5:2034)
    at Object.get (http://localhost:5555/js/app.js?1493151391601:18:18561)
    at t._fetch (http://localhost:5555/js/app.js?1493151391601:14:27723)
    at t.normalizeTemplateAsync (http://localhost:5555/js/app.js?1493151391601:14:28740)
    at t.normalizeTemplate (http://localhost:5555/js/app.js?1493151391601:14:28361)
    at t._loadDirectiveMetadata (http://localhost:5555/js/app.js?1493151391601:15:7098)
    at http://localhost:5555/js/app.js?1493151391601:15:10265
    at Array.forEach (native)
    at t.loadNgModuleDirectiveAndPipeMetadata (http://localhost:5555/js/app.js?1493151391601:15:10237)
    at http://localhost:5555/js/app.js?1493151391601:18:12416
    at Array.forEach (native)
    at t._loadModules (http://localhost:5555/js/app.js?1493151391601:18:12369)
    at t._compileModuleAndAllComponents (http://localhost:5555/js/app.js?1493151391601:18:12083)
    at t.compileModuleAndAllComponentsAsync (http://localhost:5555/js/app.js?1493151391601:18:11433)
    at http://localhost:5555/js/app.js?1493151391601:22:25906
    at d (http://localhost:5555/js/shims.js?1493151391600:5:2034)
    at l (http://localhost:5555/js/shims.js?1493151391600:5:1152)
    at l (http://localhost:5555/js/shims.js?1493151391600:5:838)
    at http://localhost:5555/js/shims.js?1493151391600:5:1666
    at t.invokeTask (http://localhost:5555/js/shims.js?1493151391600:5:10114)
    at Object.onInvokeTask (http://localhost:5555/js/app.js?1493151391601:6:6531)
    at t.invokeTask (http://localhost:5555/js/shims.js?1493151391600:5:10035)
    at n.runTask (http://localhost:5555/js/shims.js?1493151391600:5:5291)
    at a (http://localhost:5555/js/shims.js?1493151391600:5:214)
I @ app.js?1493151391601:1
t.handleError @ app.js?1493151391601:5
next @ app.js?1493151391601:6
e.object.o @ app.js?1493151391601:6
e.__tryOrUnsub @ app.js?1493151391601:5
e.next @ app.js?1493151391601:5
e._next @ app.js?1493151391601:5
e.next @ app.js?1493151391601:5
e.next @ app.js?1493151391601:5
e.emit @ app.js?1493151391601:6
t.triggerError @ app.js?1493151391601:6
onHandleError @ app.js?1493151391601:6
t.handleError @ shims.js?1493151391600:5
n.runGuarded @ shims.js?1493151391600:5
r @ shims.js?1493151391600:5
a @ shims.js?1493151391600:5

What am I missing?

[patrikx3]

Can't read the url "toolbar.component.html" there is the error

[rahulbpatel]

That file exists. This works when using JIT compilation. After tearing my hair out all day, I found that using webpack doesn't exhibit the issue.

On Wed, Apr 26, 2017 at 8:52 AM Patrik Laszlo notifications@github.com wrote:

Can't read the url "toolbar.component.html" there is the error

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/angular/issues/15510#issuecomment-297455546, or mute the thread https://github.com/notifications/unsubscribe-auth/ABGtsKHBNnM8ZJvSznRWWhqaN0dHUEVfks5rz2gzgaJpZM4Mpsr2 .

--

---

Rahul B. Patel Parsus Solutions, LLC 14358 N. Frank Lloyd Wright Blvd., #15 Scottsdale, AZ 85260 480.614.9000 (office) 480.650.2445 (cell) 866.708.6847 (fax)

[patrikx3]

for sure the build, not finding the file, in webpack it finds and the other build is missing, that's all i say. very hard. i fixed jit+aot at once together, was 1 week, but guy showed the code and i got it. hard hard hard, relax on it a day :)

rollup and ngtools and awesome load are different! had to fixed to work in both settings for webpack. aot is totally different. i tried rollup, but in started missing featured, i stopped, i dont want less features. :)

besides webpack uses rollup functions already with typescript, the bundle is a bit bigger, but it has tons of plus features. rollup is too slim in features and i tried rollup but it was not really bigger, missing features, webpack is more better for me.

for the bundle size, i use gzip, my bundle: aot+jit: 2.5 rollup 2.3 gzip aot+jit: 600kb

Runtime overhead Webpack: 243B + 20B per module + 4B per dependency, features: all Rollup: none, features like 4

https://webpack.github.io/docs/comparison.html

I vote on Webpack 2.

[rahulbpatel]

With Rollup build for some reason it results with "No ResourceLoader implementation has been provided...". Therefore the URL "xyz" cannot be read. It's not because the file does not exist.

I have verified that using Webpack 2 this works fine.

Thanks

[patrikx3]

you dont need everything new, besides webpack does everything rull up does :) plus tons of features out of box

[rahulbpatel]

Maybe so. Unfortunately for me this is my first attempt with AoT / tree-shaking and therefore I was following the Angular Team's Cookbook article as my guide in my project.

[patrikx3]

tree-shaking with webpack working out of the box, no needed for rollup. tried it. better.

yes it is learning, long process, many days.

jit is nothing. easy.

then aot is different (styleUrls not working, different, no jit, compilation)

i am not using scss,with angular anymore, i use my own node-sass builder, so it works always, doesn't need everything angular. they can't do everything, there is too much. i use grunt and webpack, some people glup + webpack, or pure npm run ....

you need to know npm, grunt, gulp, webpack or rollup, choose!

then scss will be different in aot + jit, i use my own grunt node sass so i dont have to worry about. the types. in my issue for example.

then. glue. done.

then together at once, (jit and aot at the once) that's another issue. i had to create my own builder (ngc to build, then use the factories and use angular-awesome-loader with webpack... i got the code in the future)

i tried rollup, but i had to write more new plugins, i already created many grunt, webpack plugins, i checked the size, with gzip it will be the same any way.

the key is AOT, that's what makes it fast, not rollup. webpack is easier than rollup.

precompiled!! that's the best!

[Alekcei]

Please help me How to use "MyModule" Compiled by AOT in JitCompiler? ERROR Error: Unexpected value '[object Object]' imported by the module 'DynamicHtmlModule'. Please add a @NgModule annotation. MyModule contains controls component. But he does not have metadata

[Alekcei]

The compiler AOT has enableSummariesForJit What does it mean?

[arniebradfo]

Well? Anyone know what it means?

[william-lohan]

With this workaround I'm getting Error: No NgModule metadata found for 'e'. on ng serve --prod.

[Alekcei]

https://github.com/angular/angular/issues/17595,

alexzuza

angular-cli removes all angular decorators in aot mode. If you want to keep decorator then use custom decorator like @CustomComponent or @CustomNgModule

See my MyRepositary AotAndJitl

I'm used @CustomDecorator If you used simple component (No external styles) then should work

[william-lohan]

@Alekcei I tried with

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    const metaData = new Component(annotation)
    Component(metaData)(target)
  }
}
export function CustomNgModule(annotation: any) {
  return function (target: Function) {
    const metaData = new NgModule(annotation)
    NgModule(metaData)(target)
  }
}

and now getting Error: Unexpected value 'e' imported by the module 'e'. Please add a @NgModule annotation.

[Alekcei]

Yes, It is necessary to add and @ NgModule

Example

const metadata = {
  declarations: declarations,
  imports: [CommonModule],
  exports:  declarations,
  providers: []
};

@NgModule(metadata)
@CustomNgModule(metadata)
export class ControlsModule {}