I'm developing an Angular 5 NPM package library for use in applications. Unfortunately, this is one area of Angular development that appears to be very poorly (un)documented, so it's been a lot of trial and error.
I've developed a test application that consumes the NPM package and uses its components. At this point, it's working perfectly except when running production compiled code.
My NPM package utilizes a lot of Angular Material components. Once compiled, the browser throws 'Object doesn't support this action' every time my code tries to display an Angular Material dialog (from the library). Interestingly though, a component that exists IN the library can launch a dialog using the exact same method. The problem only exists with launching a dialog in the library from my consuming application.
I'm guessing that the solution lies somewhere in the realm of polyfills. But I'm not sure where/how to implement them in my NPM package, if indeed that is the issue. Implementing them on the application that consumes the package does not resolve the issue. I've tried adding polyfill import statements into the index.ts file of my NPM package - but that didn't help either.
The structure of the NPM package and the way that it's compiled is somewhat foreign to me. It's not like a "standard" Angular app built and compiled via the CLI. It uses gulp, which is new to me and is rather troublesome (I often have to tell it to build 5 times in a row to get it to work).
I used the following project as a starting point for my NPM package: https://github.com/qurt/generator-angular4-library