Import umd bundle in Angular

1k views Asked by At

I'm trying to import an umd.js file into an angular project. The module (library) is declared as follows:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
    typeof define === 'function' && define.amd ? define('MyCustomModule', ['exports', '@angular/core', '@angular/common'], factory) :
    (global = global || self, factory(global['MyCustomModule'] = {}, global.ng.core, global.ng.common));
}

Now I know I should import the esm bundle and not the umd but sadly I don't have it

import {MyCustomModule} from 'src/assets/umd_modules/awesome-library.umd'

@NgModule({
  declarations: [ ... ],
  imports: [
    ...
    MyCustomModule
    ...
  ],
  exports : [ ... ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class LoggedModule { }

By importing the module in this way I'm able to use it while serving angular, but compiling will throw the following error

ERROR in src/app/shared/logged-component.module.ts:28:12 - error NG1010: Value at position 8 in the NgModule.imports of LoggedModule is not a reference
  Value could not be determined statically.

 28   imports: [
               ~
 29     CommonModule,
    ~~~~~~~~~~~~~~~~~
... 
 37     MyCustomModule
    ~~~~~~~~~~~~~~~~~~~~~~~~
 38   ],

If I try to import the umd.js file using the scripts in angular.json or load it as <script> from the index I get errors because ng is not declared.

I have seen that I can dynamically import the umd.js file in angular using SystemJS, but then I'm not sure how I can use the components declared inside the umd.js itself on my templates.

So basically I'm stuck beign able to use the library while developing but not able to use it when I try to compile the project for deploying.

Apart from writing to the developers and ask for the correct esm bundle, what can I do?

0

There are 0 answers