Search code examples
angulartypescriptrollup

Exporting UI-Components in Angular 5 - template not found

I'm developing UI Components for usage in different Web-Projects across the company. We want to publish the ui-components as npm package on our local Repository. Publishing the package works fine.

When I npm install the package, import the module in my app.module.ts and run 'ng serve' (it's an Angular CLI Project), everything compiles fine. But when accessing the Site on localhost, nothing is shown and the console says:

enter image description here

Why is Angular looking for templates in html format, when they are compiled and packaged? And how to tell the CLI that these components are already compiled?

tsconfig.json (before packaging)

{
   "compilerOptions": {
      "baseUrl": ".",
      "declaration": true,
      "stripInternal": true,
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "strictNullChecks": true,
      "noImplicitAny": true,
      "module": "es2015",
      "moduleResolution": "node",
      "paths": {
         "@angular/core": ["node_modules/@angular/core"],
         "@angular/common": ["node_modules/@angular/common"],
         "@angular/forms": ["node_modules/@angular/forms"],
         "@ng-bootstrap/ng-bootstrap": ["node_modules/@ng-bootstrap/ng-bootstrap"]
      },
      "rootDir": ".",
      "outDir": "dist",
      "sourceMap": true,
      "inlineSources": true,
      "target": "es5",
      "skipLibCheck": true,
      "lib": [
         "es2015",
         "dom"
      ]
   },
   "files": [
      "index.ts"
   ],
   "angularCompilerOptions": {
      "strictMetadataEmit": true
   }
}

I was not able to find a documentation for the angularCompilerOptions on the Internet...

The npm package in node_modules is:

enter image description here

I found the button-template by searching for CSS-Classes in button.component.ngfactory.js but the exported ButtonComponentNgFactory seems to be imported nowhere.

Solution

  • I could not get this to work, but another approach did work very well - it packed the template into different formats of JS and does all the work: https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e