My current project involves developing UI Components that will be used in various web projects within the company. Our plan is to publish these UI components as an npm package on our local repository, and so far, the publishing process has been successful.
Upon npm installing the package, importing the module into my app.module.ts file, and running 'ng serve' (an Angular CLI Project), everything compiles without any errors. However, when attempting to access the localhost site, nothing appears and the console displays the following message:
https://i.stack.imgur.com/9jSef.png
I am confused as to why Angular is searching for templates in HTML format when they have already been compiled and packaged. How can I inform the CLI that these components are already compiled?
Before packaging, the tsconfig.json file looks like this:
{
"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
}
}
Despite spending time researching, I could not find any documentation regarding the angularCompilerOptions online...
The npm package found in the node_modules folder is visually represented as:
https://i.stack.imgur.com/QKVb1.png
In my search for the button-template, I examined CSS classes within the button.component.ngfactory.js file. Despite exporting ButtonComponentNgFactory, it does not seem to be imported anywhere.