Ng Packagr
Compile and package Angular libraries in Angular Package Format (APF)
Overview
ng-packagr is a tool that allows you to compile and package Angular libraries in the Angular Package Format (APF). It is used to build distribution-ready npm packages from TypeScript sources.
Features
- Implements Angular Package Format
- Bundles your library in FESM2022 format
- npm package can be consumed by Angular CLI, Webpack, or ESM Bundlers
- Creates type definitions (.d.ts)
- Creates scoped and non-scoped packages for publishing to npm registry
- Inlines Templates and Stylesheets
- Runs SCSS preprocessor, supporting custom include paths
- Adds vendor-specific prefixes with autoprefixer and browserslist
- Embeds assets data with postcss-url
Summary
ng-packagr is a powerful tool for compiling and packaging Angular libraries. It follows the Angular Package Format specification and provides a range of features to simplify the process of creating distribution-ready npm packages. With ng-packagr, you can easily bundle your library, create type definitions, and publish your packages to the npm registry.
- Angular
Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.
- LESS
Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- UI Kits & Components
A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.