Imported class in angular is undefined

Question

I have an npm project with the following structure:

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

My app.ts code has an App class that utilizes all.ts files inside src/

export default class App extends HTMLElement { //some-content }

I use webpack to build a bundle.js inside the dist/ folder.

---

I have another angular project where I install this app-dep project using

npm install --save ../app-dep

When I try to use it in my angular component:

import App from 'app-renderer/dist/bundle';

ngOnInit() {
    window.customElements.define('micro-app', App);
}

I get this error:

Failed to execute 'define' on 'CustomElementRegistry': parameter 2 is not of type 'Function' When I try to log it on console, all I can see is undefined.

It seems that I can't import basic functions even.

Can you tell me what's wrong?

Answer 1

I think the problem has to do with the import or the pack, I ellaborate below with the steps to follow.

Also, make sure that you are exporting all the classes that you want to make available from the outside.

For TypeScript libraries

You can simply use "tsc" and then pack the generated code inside the dist folder with "npm pack" and install the dependency in your application with "npm install ".

This may get complicated due to the different module systems and bundlers, check this links for more info on Webpack:

https://marcobotto.com/blog/compiling-and-bundling-typescript-libraries-with-webpack/

https://webpack.js.org/guides/author-libraries/

For CSS libraries

The "npm pack" has to be executed in the root folder. You may want to process your styles with sass before and only pack the result.

For Angular libraries

By default with Angular CLI when you build a library project the code is generated in /dist/mylibrary folder.

If you want to use that code in other project, the steps are:

1. Build your library with "ng build mylibrary" (add --prod for production).
2. From your library, move into /dist/mylibrary folder and then execute a "npm pack", that will generate a tgz package.
3. From your application in which you want to use the library execute "npm install " to install the dependency.
4. To import code from the library use "import * from 'mylibrary'"

Other option would be using "npm link", that creates a link between your node_nodules and the library code as explained here:

https://www.willtaylor.blog/complete-guide-to-angular-libraries/

That would be the way to go with local libraries, usually these libraries are published into Npm repository (public or private) and installed remotely with "npm install ". These steps are only for local usage.