My npm project structure includes the following:
app-dep
├── dist
│ ├── bundle.js
│ └── bundle.js.map
├── node_modules/
├── package.json
├── package-lock.json
├── src
│ ├── base-component.ts
│ ├── factory.ts
│ ├── app.ts
│ └── modules/
├── tsconfig.json
└── webpack.config.js
The App class in my app.ts file uses all .ts files inside src/
export default class App extends HTMLElement { //some-content }
I utilize webpack to create a bundle.js in the dist/ directory.
In another angular project, I include this app-dep project by running
npm install --save ../app-dep
However, when trying to use it in my angular component:
import App from 'app-renderer/dist/bundle';
ngOnInit() {
window.customElements.define('micro-app', App);
}
An error is thrown:
'Failed to execute 'define' on 'CustomElementRegistry': parameter 2 is not of type 'Function'. When logging to console, only undefined is seen.
It appears that even basic functions cannot be imported. Can you assist me with identifying the issue?