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?