npm-form-design-abc-code
v1.0.0
Published
This project contains a component library as well as sample usage of those components
Downloads
3
Readme
NgComponentLibrary
This project contains a component library as well as sample usage of those components
Packaging the component library
To package the component library, run npm run package
. This will create or update the dist folder of your project with your component
library bundled according to Angular Package Format.
How does it work?
It uses a library called ng-packagr, which depends on two files, ng-package.json
and public_api.ts
, both of which live in the root of the project.
ng-package.json
This file points to the ng-packagr schema within the ng-packagr library (this is default), and an "entry file" named public_api.ts
, which
is named according to a convention of Angular libraries. (See below)
{
"$schema": "./node_modules/ng-packagr/lib/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts"
}
}
public_api.ts
This file exports the modules you would like to expose within your library. Components that these modules depend on are exported automatically as part of the packaging process.
export * from './src/app/modules/input/input.module';
export * from './src/app/modules/form/form.module';
...
Once packaged, the dist folder's contents are packed with npm pack
, to be pushed to npm or installed by a local app in development npm install ../some-path/dist/dist-0.0.0.tgz
.
Creating components
You can use the CLI to create modules and components for your component library. For example, if you wanted a button component:
Creating a button module
From the root of the project:
ng g m modules/button
Creating a button component
From the root of the project:
ng g c modules/button
Registering the module with public_api.ts
export * from './src/app/modules/button/button.module';
Exporting the component from the module
exports: [
ButtonComponent
]
Why all the fuss?
You can still use the CLI to develop your component library, run it in a sample application, and test it according to the CLI's conventions.
Development server
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Code scaffolding
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|module
.
Build
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
Running unit tests
Run ng test
to execute the unit tests via Karma.
Running end-to-end tests
Run ng e2e
to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve
.
Further help
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.