How to include an external js module?

[andrea-spotsoftware]

This issue is basically a request of help, because I'm new to AOT compilation and I'd love to use your seed for my lib.

I'm trying to understand how to include an external js module into the library. In the details, I'm trying to add a NumericTextBoxComponent in the application, based on inputmask.

I did these steps:

• added my component:

  import * as Inputmask from 'inputmask';
  import 'inputmask.numeric.extensions';
  import { Component, OnInit, ViewChild, ElementRef, OnChanges, Input } from '@angular/core';
  @Component({
  moduleId: module.id,
  selector: 'et-numeric-text-box',
  templateUrl: './numeric_text_box.html'
  })
  export class NumericTextBoxComponent implements OnInit {
  @Input() value: number;
  @ViewChild('inputmask') inputmask: ElementRef;
  
  ngOnInit() {
  let mask = new Inputmask({
    'alias': 'numeric',
    'allowPlus': false,
    'unmaskAsNumber': true,
    'radixPoint': ',',
    'groupSeparator': '.',
    'autoGroup': true,
    'showMaskOnHover': false,
    'digits': 4,
    'digitsOptional': false,
    'clearMaskOnLostFocus': false,
    'placeholder': '0',
    'integerDigits': 4,
    'positionCaretOnClick': 'none',
  });
  mask.mask(this.input);
  }
  
  protected get input(): HTMLInputElement {
  return this.inputmask.nativeElement;
  }
  }

• installed inputmask as dependency;
• edited build.js adding to external and globals fields of rollupBaseConfig:

  const rollupBaseConfig = {
    // ATTENTION:
    // Add any dependency or peer dependency your library to `globals` and `external`.
    // This is required for UMD bundle users.
    globals: {
      '@angular/core': 'ng.core',
      '@angular/forms': 'ng.forms',
      '@angular/common': 'ng.common',
      'inputmask': 'Inputmask'
    },
    external: [
      // List of dependencies
      // See https://github.com/rollup/rollup/wiki/JavaScript-API#external for more.
      '@angular/core',
      '@angular/common',
      '@angular/forms',
      'inputmask',
      'inputmask.numeric.extensions'
    ],
  ...
  };

• changed systemjs.config.js in src/demo/ & integration/src adding:

  (function (global) {
  System.config({
  defaultJSExtensions: true,
  ...
  map: {
  ...
  // other libraries
  'rxjs': 'npm:rxjs',
  'inputmask': 'npm:inputmask/dist/inputmask/inputmask.js',
  'inputmask.numeric.extensions': 'npm:inputmask/dist/inputmask/inputmask.numeric.extensions.js'

• changed karma.conf.js adding:

  files: [
    ...
    // inputmask
    { pattern: 'node_modules/inputmask/**/*.js', included: false, watched: false },
    ...
  ],

Now: JIT demo is working nicely with livereload, tests are working, build:aot succeeds without errors but when i try to run aot bundle, i have a runtime error in bundle.js: ReferenceError: Inputmask is not defined. Of course, integration tests are not working. Looks like that the import in the top line of my component is not properly working in AOT. Am I missing something?

Thank you so much, and thank you for sharing this great seed. PS: this is my fork --> https://github.com/andrea-spotsoftware/angular-quickstart-lib

[filipesilva]

Hm.... can you try changing 'inputmask': 'Inputmask' to 'inputmask': 'inputmask' (lowercase) in rollupBaseConfig? I'm not sure it's needed even.

[ralberts]

@andrea-spotsoftware Did you figure it out? I may be having similar issues just with another library :-)

[andrea-spotsoftware]

@ralberts @filipesilva I have just made some little steps, I'm able to include a library that is bundled by rollup and working in AOT, Now i've found a very simple library named 'the-answer' made by the creators of rollup and used in the rollup.js documentation samples.

The problem is that when it's working in AOT, it's not working in JIT, and vice-versa.

import { Component } from '@angular/core';
import answer from 'the-answer';

@Component({
  selector: 'my-lib',
  templateUrl: './lib.component.html',
  styleUrls: ['./lib.component.css']
})
export class LibComponent {
  name = answer;
}

If inside my component the import of the external library module is done like the documentation say: import answer from 'the-answer'; everything is working fine only in AOT (integration app working fine).

Strangely, the if I import the module like this: import * as answer from 'the-answer'; everything is working fine only in JIT 😆 (demo is working, tests are running positively)

I don't have enough experience to understand why, but i think the right mode is the first one. System.js problem?

To do so: package.json

...
"dependencies": {
  "the-answer": "^1.0.0"
}

karma-test-shim.js

System.config({
...
map: {
      ...
      // the-answer
     'the-answer': 'npm:the-answer/dist/the-answer.js'
}
});

karma.conf.js

config.set({
...
files: [
      ...
      // the-answer
      { pattern: 'node_modules/the-answer/**/*.js', included: false, watched: false }
],
...
});

build.js

const rollupBaseConfig = {
...
globals: {
      ...
      'the-answer': 'answer'
},
external: [
      ...
      'the-answer'
],
...
});

src/demo/systemjs.config.js

System.config({{
    defaultJSExtensions: true,
    ...
    map: {
        ...
        'the-answer': 'npm:the-answer/dist/the-answer.js'
    },
    ...
});

I'm suspecting that i'm configuring in the wrong way the module into system.js.

Any idea about why in demo app & unit tests system.js resolves this import in undefined?

import answer from 'the-answer';` 
console.log(answer); // JIT with system.js : undefined --> AOT with rollup: 42

[ralberts]

@andrea-spotsoftware Yes, that looks all correct to me and almost exactly what I did for ag-grid library (in my case). For now I ended up letting it treat as an external dependency as I am using it internally though would still really like to understand how to make it work.