how to bundle a module/component to js and use in another angular project?

I was just trying to build a module/component and serve it as a JS bundle. it builds:

@Component({
selector: 'app-component-overview',
template: '<button><ng-content></ng-content></button>',
})
export class ButtonComponent {}

@NgModule({
declarations: [ButtonComponent],
})
export class AppModule {}


the issue is that after building it to a javascript bundle. when I try to import it in another angular project. I get:

//ERROR in ... error TS2306 '...' is not a module.
loadChildren: () => import('...').then(m=>m.ButtonModule)


maybe I am missing the point here and things are different in angular, having webpack control makes it a lot easier but I want to avoid bringing custom builders and fiddling with the settings as little as possible.

Question is, is there a well documented way to bundle a module or even a standalone component to be used outside my project as a JS bundle? I could not find anything useful other than high level explanation of reusing and lazyloading thing already inside the same project.

Continue reading...