Issue
I've Created a Ionic 5 solution and added a Library to my multi-solution project with a component "landing", but when I try and use the templateUrl in my landing.component.ts I get
ERROR Error: Uncaught (in promise): Failed to load landing.component.html
Using template with the html works fine. Any idea why?
Doesn't work at all
templateUrl: './landing.component.html',
Works fine
template: `
<p>
core-LANDING workss!
</p>`,
I've tried using "require('./landing.component.html')" but then my library won't build with exception
The class 'LandingComponent' is listed in the declarations of the NgModule 'CoreLibModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
Edit
- Yes Landing.component.html (templateUrl:) does exist. My library does not compile if it doesn't exist.
- Structure of solution below.
Solution
Found the issue. Man, that's 3 days down the toilet for something simple
*Do not use the ng-package.json
to build your solution (ie. don't bet on npm run build
work using the default ng-package.json
). Add the ngPackage tag to your library package.json
and include the assets you want to import. Build it using the script command to reference the library package.json
file specifically. Something to do with having to load the peer dependencies to resolve the paths
Your library library package.json
{
"$schema": "../../node_modules/ng-packagr/package.schema.json",
"name": "core-lib",
"version": "0.0.1",
"ngPackage": {
"dest": "../../dist/core-lib",
"assets": [
"src/lib/components/**/*.html",
"src/lib/components/**/*.css"
],
"lib": {
"entryFile": "src/public-api.ts"
}
},
"peerDependencies": {
"@angular/common": "^10.2.4",
"@angular/core": "^10.2.4"
},
"dependencies": {
"tslib": "^2.0.0"
}
}
Your base project package.json
(add this into the scripts tag)
"build:coreLib": "ng-packagr -p projects/core-lib/package.json"
Then build your library running
npm run build:coreLib
What an undocumented headache.
Answered By - Ruan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.