AOT Fail

[MurhafSousli]

I use couple of RXJS operators, I have added them in gulpfile.js

      // A list of IDs of modules that should remain external to the bundle
      // See https://github.com/rollup/rollup/wiki/JavaScript-API#external
      external: [
        '@angular/core',
        '@angular/common',
        '@angular/http',
        'rxjs/Observable',
        'rxjs/Subject',
        'rxjs/add/observable/timer',
        'rxjs/add/operator/do',
        'rxjs/add/operator/takeWhile',
        'rxjs/add/operator/switchMap'
      ],

gulp build output:

[02:29:00] Finished 'ngc' after 1.41 s
[02:29:00] Starting 'rollup:fesm'...
build/services/browser-xhr.provider.js (1:17) The 'this' keyword is equivalent to 'undefined' at the to
p level of an ES module, and has been rewritten
build/services/browser-xhr.provider.js (1:25) The 'this' keyword is equivalent to 'undefined' at the to
p level of an ES module, and has been rewritten
[02:29:00] Finished 'rollup:fesm' after 159 ms
[02:29:00] Starting 'rollup:umd'...
build/services/browser-xhr.provider.js (1:17) The 'this' keyword is equivalent to 'undefined' at the to
p level of an ES module, and has been rewritten
build/services/browser-xhr.provider.js (1:25) The 'this' keyword is equivalent to 'undefined' at the to
p level of an ES module, and has been rewritten
No name was provided for external module '@angular/core' in options.globals – guessing '_angular_core'
No name was provided for external module '@angular/common' in options.globals – guessing '_angular_comm
on'
No name was provided for external module 'rxjs/Subject' in options.globals – guessing 'rxjs_Subject'
No name was provided for external module 'rxjs/Observable' in options.globals – guessing 'rxjs_Observab
le'
No name was provided for external module '@angular/http' in options.globals – guessing '_angular_http'
[02:29:00] Finished 'rollup:umd' after 64 ms

I don't understand why I am getting these errors!

Now when I import the dist package in a new app, I get no errors while compiling, but it is broken at runtime, getting these errors:

[jvandemo]

@MurhafSousli — Are you importing the rxjs operators in your library code?

import 'rxjs/add/observable/timer';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/takeWhile';
import 'rxjs/add/operator/switchMap';

[MurhafSousli]

@jvandemo I already have these imports in the library.
Another thing I noticed is in these errors:

build/services/browser-xhr.provider.js (1:17) The 'this' keyword is equivalent to 'undefined' at the to
p level of an ES module, and has been rewritten
build/services/browser-xhr.provider.js (1:25) The 'this' keyword is equivalent to 'undefined' at the to
p level of an ES module, and has been rewritten
[02:29:00] Finished 'rollup:fesm' after 159 ms
[02:29:00] Starting 'rollup:umd'...
build/services/browser-xhr.provider.js (1:17) The 'this' keyword is equivalent to 'undefined' at the to
p level of an ES module, and has been rewritten
build/services/browser-xhr.provider.js (1:25) The 'this' keyword is equivalent to 'undefined' at the to
p level of an ES module, and has been rewritten

I think there is an issue with rollup and super() keyword

@Injectable()
export class NgProgressBrowserXhr extends BrowserXhr {

  private currentRequest: number = 0;

  constructor(private service: NgProgressService) {
    super();
  }

  public build() {
    const xhr = super.build();
    .....
  } 
}

[jvandemo]

@MurhafSousli — Is it possible to share your code? Thanks!

[diego-d5000]

The gulp file has two rollup modes/tasks (umd and fesm), did you put the same externals in both modes ?

[sebastianteres]

This fixed it for me...

I was having the same problem... I also noticed some WARNINGS when building (see #149).

I had no idea what to do so I tried fixing those warnings first, I read somewhere that I should try exporting every component, model, service, etc that is being used by the module and its components in src/index.ts file (I apologise, I lost the reference to that comment).

Anyway, fixing those warnings also fixed r is not a constructor issue for me.

Hope this helps!

[diego-d5000]

@sebastianteres probably do you refer to export all lambdas ? https://medium.com/@isaacplmann/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5

[jvandemo]

@MurhafSousli Can you please apply @sebastianteres's recommendations and see if that works for you? Thanks!

[sebastianteres]

@diego-d5000 I finally found the reference! It was buried in my search history from yesterday 😄
See #126

To give you an example:

My library has 3 components:

• Component Foo

<p>Component Foo!</p>

• Component Bar

<p>Component Bar!</p>

• Component FooBar

<foo></foo>
<bar></bar>

Library module exports component Component FooBar

So my src/index.ts looks like this:

export * from './my-module';
export * from './foo-bar/foo-bar.component';

I believe this will cause the Warnings mentioned in #149 and #126.

So to fix it you would have to edit src/index.ts as follows:

export * from './my-module';
export * from './foo/foo.component';
export * from './bar/bar.component';
export * from './foo-bar/foo-bar.component';

To be honest I didn't know if this was necessary to begin with but I assumed I could only export what I wanted the library users to use and not to have to export everything. In this case I think is a valid scenario to only want to export fooBar and not foo or bar individually.

To be even more honest I'm not sure what I should be exporting or if I could leave anything out from src/index.tsbut what I did was add an export for every module, component, service or class my library uses internally.

Be that as it may, this fixed both the Warnings and the Runtime error for me.

[jvandemo]

@sebastianteres — Thank you so much for sharing, much appreciated! 👍

[crebuh]

Hi,

I've got the same problem. When using inheritance inside my library. For example I have a BaseComponent all other components like for example EmailComponent inherits from it.

When I dont use inheritance (which leads to a lot of boilerplate code :() the warnings in the console are gone.

Any idea on how to fix this?

update

ok I was able to supress the warnings in the console by adding this to the gulpfile (rollup task)

onwarn: function (warning) { // Skip certain warnings // should intercept ... but doesn't in some rollup versions if (warning.code === 'THIS_IS_UNDEFINED') { return; } // console.warn everything else console.warn(warning.message); }

now when I building and running my main application with AOT the following error is thrown

TypeError: ctor is not a constructor

[dgroh]

Just posted the same issue here:

#229

I followed the steps from the docs, I didn't change a word....