Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix ng build <lib> error when renaming public_api.ts to public-api.ts in angular8 upgrade

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)

like image 366
Annie Huang Avatar asked Aug 15 '19 01:08

Annie Huang


People also ask

How to make library in Angular?

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.


1 Answers

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"
  ]
}
like image 53
Annie Huang Avatar answered Dec 26 '22 09:12

Annie Huang