Compile a TypeScript library to Angular Package Format
For an Angular library, create one configuration file
Then, build the library from a npm/yarn script defined in
Now build with this command:
$ yarn build
Paths are resolved relative to the location of the
package.json describing the library should be located in the same folder, next to
Nikolas LeBlanc's story on medium.com: Building an Angular 4 Component Library with the Angular CLI and ng-packagr
Here is a demo repository showing ng-packagr and Angular CLI in action.
What about ng-packagr alongside Nx Workspace? Well, they work well together!
Configuration is picked up from the cli
-p parameter, then from the default location for
ng-package.json, then from
To configure with
package.json, put your ng-package configuration in the
Note: the JSON
$schema reference enables JSON editing support (autocompletion) for the custom
ngPackage property in an IDE like VSCode.
Beside the primary entry point, a package can contain one or more secondary entry points (e.g.
These contain symbols that we don't want to group together with the symbols in the main entry.
The module id of a secondary entry directs the module loader to a sub-directory by the secondary's name.
@angular/core/testing resolves to a directory under
node_modules/@angular/core/testing containing a
package.json file that directs the loader to the correct location for what it's looking for.
For library developers, secondary entry points are dynamically discovered by searching for
package.json files within sub directories of the main
package.json file's folder!
All you have to do is create a
package.json file and put it where you want a secondary entry point to be created.
One way this can be done is by mimicking the folder structure of the following example which has a testing entry point in addition to its main entry point.
my_package ├── src | └── *.ts ├── public_api.ts ├── ng-package.json ├── package.json ├── testing ├── src | └── *.ts ├── public_api.ts └── package.json
The contents of the secondary
package.json can be as simple as:
No, that is not a typo. No name is required. No version is required.
It's all handled for you by ng-packagr!
When built, the primary entry is imported with
@my/library and the secondary entry with
You can change the entry point file by using the
ngPackage configuration field in your secondary
For example, the following would use
index.ts as the secondary entry point:
If you have React Components that you're using in your library, and want to use proper JSX/TSX syntax in order to
construct them, you can set the
jsx flag for your library through
ng-package like so:
jsx flag will accept anything that
tsconfig accepts, more information here.
Note: Don't forget to include
react-dom in your
externals so that you're not bundling those dependencies.
We keep track of user questions in GitHub's issue tracker and try to build a documentation from it. Explore issues w/ label documentation.
Angular Package Format v4.0, design document at Google Docs
Packaging Angular - Jason Aden at ng-conf 2017 (28min talk):