I am in the middle of migrating angular 7 to angular 8 for my company's component library that was built with 'ng generate library '. I tried to be as close to standard angular cli build as possible. I created a brand new app and a library with "@angular/cli": "~8.2.0".
https://github.com/Annie-Huang/my-angular8-app/tree/create-lib
I noticed in angular 8, they change public_api.ts to public-api.ts https://github.com/Annie-Huang/my-angular8-app/blob/create-lib/projects/ea-ui/src/public-api.ts
So I renamed the entry file from the existing library from public_api.ts to public-api.ts And also update it in ng-package.json
And I get this error of
Bradleys-MacBook-Pro:ea-component-library anniehuang$ ng build ea-ui
Building Angular Package
ERROR: error TS6053: File '/Users/anniehuang/projects/ea-component-library/projects/ea-ui/src/public_api.ts' not found.
An unhandled exception occurred: error TS6053: File '/Users/anniehuang/projects/ea-component-library/projects/ea-ui/src/public_api.ts' not found.
See "/private/var/folders/sw/1rxh903n6y39kkwbgr737n8m0000gp/T/ng-SE3jbI/angular-errors.log" for further details.
When I built it in the brand new angular 8 app in my own repo (ng build ea-ui
). I don't have this error.
And there is no public_api.ts string when I did global search on the company component library.
ng-package.json:
---------------------
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ea-ui",
"lib": {
"entryFile": "src/public-api.ts"
}
}
public-api.ts (file content not change, just renamed):
----------------------------------------------------------
export * from './lib/accordion/accordion.component';
export * from './lib/accordion/accordion.module';
export * from './lib/autocomplete/autocomplete-trigger.directive';
export * from './lib/autocomplete/autocomplete.component';
export * from './lib/autocomplete/autocomplete.module';
....
Bradleys-MacBook-Pro:ea-component-library anniehuang$ ng build ea-ui
Building Angular Package
ERROR: error TS6053: File '/Users/anniehuang/projects/ea-component-library/projects/ea-ui/src/public_api.ts' not found.
An unhandled exception occurred: error TS6053: File '/Users/anniehuang/projects/ea-component-library/projects/ea-ui/src/public_api.ts' not found.
See "/private/var/folders/sw/1rxh903n6y39kkwbgr737n8m0000gp/T/ng-SE3jbI/angular-errors.log" for further details.
Open up angular-errors.log:
------------------------------
Bradleys-MacBook-Pro:~ anniehuang$ cat /private/var/folders/sw/1rxh903n6y39kkwbgr737n8m0000gp/T/ng-MET38P/angular-errors.log
[error] Error: error TS6053: File '/Users/anniehuang/projects/ea-component-library/projects/ea-ui/src/public_api.ts' not found.
at analyseEntryPoint (/Users/anniehuang/projects/ea-component-library/node_modules/ng-packagr/lib/ng-v5/init/analyse-sources.transform.js:45:15)
at MapSubscriber.exports.analyseSourcesTransform.rxjs_1.pipe.operators_1.map.graph [as project] (/Users/anniehuang/projects/ea-component-library/node_modules/ng-packagr/lib/ng-v5/init/analyse-sources.transform.js:15:9)
at MapSubscriber._next (/Users/anniehuang/projects/ea-component-library/node_modules/rxjs/internal/operators/map.js:49:35)
at MapSubscriber.Subscriber.next (/Users/anniehuang/projects/ea-component-library/node_modules/rxjs/internal/Subscriber.js:66:18)
at SwitchMapSubscriber.notifyNext (/Users/anniehuang/projects/ea-component-library/node_modules/rxjs/internal/operators/switchMap.js:86:26)
at InnerSubscriber._next (/Users/anniehuang/projects/ea-component-library/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
at InnerSubscriber.Subscriber.next (/Users/anniehuang/projects/ea-component-library/node_modules/rxjs/internal/Subscriber.js:66:18)
at MapSubscriber._next (/Users/anniehuang/projects/ea-component-library/node_modules/rxjs/internal/operators/map.js:55:26)
at MapSubscriber.Subscriber.next (/Users/anniehuang/projects/ea-component-library/node_modules/rxjs/internal/Subscriber.js:66:18)
The Purpose of Angular Libraries We just need to add the published library in our project, and that's it, the components, modules, services, are all ready to be used in the application. To create a library, we generate it by “ng generate” command, built it by “ng build” command, publish by “npm publish” command.
Actually found out the reason. Turned out if your library's package.json
got ngPackage
section, it will take the information there rather than the one in ng-package.json
. And if that ngPackage
section doesn't have a entryfile
, it will take src/public_api.ts
by default:
So in the FAILED situation, my file content are: In /projects/ea-ui/package.json:
{
"name": "@ea/ea-ui",
"version": "1.13.5",
"peerDependencies": {
"@angular/common": "^8.2.0",
"@angular/core": "^8.2.0"
},
"dependencies": {
"dayjs": "^1.8.15",
"ngx-take-until-destroy": "^5.4.0",
"ngx-mask": "^8.0.2",
"@angular/cdk": "^8.1.2"
},
"ngPackage": {
"dest": "../../dist/ea-ui",
"whitelistedNonPeerDependencies": [
"dayjs",
"ngx-take-until-destroy",
"ngx-mask",
"@angular/cdk"
],
"lib": {
"styleIncludePaths": [
"./src/assets/scss"
]
}
}
}
In /projects/ea-ui/ng-package.json:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ea-ui",
"lib": {
"entryFile": "src/public-api.ts"
}
}
Now I change it to the following the it PASSED: In /projects/ea-ui/package.json:
{
"name": "@ea/ea-ui",
"version": "1.13.5",
"peerDependencies": {
"@angular/common": "^8.2.0",
"@angular/core": "^8.2.0"
},
"dependencies": {
"dayjs": "^1.8.15",
"ngx-take-until-destroy": "^5.4.0",
"ngx-mask": "^8.0.2",
"@angular/cdk": "^8.1.2"
}
}
In /projects/ea-ui/ng-package.json:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ea-ui",
"lib": {
"styleIncludePaths": [
"./src/assets/scss"
],
"entryFile": "src/public-api.ts"
},
"whitelistedNonPeerDependencies": [
"dayjs",
"ngx-take-until-destroy",
"ngx-mask",
"@angular/cdk"
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With