ng new xxx-app
that will be our testing application for our new librarycd xxx-app
ng g library xxx-lib --prefix=awesome
- Mind that the components/services/modules that you would like to public expose must be specified in the file
public-api.ts
- Mind that the components/services/modules that you would like to public expose must be specified in the file
- Rename the folder
xxx-app
toxxx-lib
ng build xxx-lib
cd dist\xxx-lib
npm init
to create theproject.json
file, that will contains the specs about your library- Before publish:
- You can create the file
.npmrc
if you need to push to a custom/private gallery. If you omit this, npm will try to push to the community gallery npmjs.com - The npm gallery authentication token must be saved in the user folder
$HOME
in the global file.npmrc
- You can use the command
npm login
to automatically generate and save the token for npmjs.com (service like azure devops creates this token from the web interface and you save it to the global.npmrc
there are also tools to do this, but I prefer to simply copy and paste the token myself)
- You can create the file
npm publish
- You can test the component directly from the application and the run
ng serve
as usual, this will execute the default application as if you had executedng serve xxx-app
. Now from the application you can use the component of your library without needing to install it from the gallery, and of course you can also debug it. From theapp.module.ts
imports the moduleXxxLibModule
like thisimport { XxxLibModule } from 'projects/xxx-lib/src/public-api';
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { XxxLibModule } from 'projects/xxx-lib/src/public-api'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, XxxLibModule, AppRoutingModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
app.component.html
<awesome-xxx-lib></awesome-xxx-lib>
and the final result is…..
amazing!! 🙂