Discovering new angular/cli command — library. Short overview.

Jumping in the perfect world

  • Uniformity of projects and quick start
  • Comfortable development
  • Comfortable distribution

So, let’s start

npx @angular/cli@6.1.5 new mylibapp
cd mylibapp
npx ng generate library mylib --prefix mlb
npm test mylib
npx ng lint mylib
  • Quick start of the new project
  • Uniform approach for all new libraries
  • Unneeded code in the project
  • Crucial tools should be added manually

Development

  • Build the library
  • Import library module into the main project
npx ng build mylib
import { MylibModule } from "mylib";...@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule, MylibModule
],
providers: [],
bootstrap: [AppComponent]
})
<mlb-mylib></mlb-mylib>
npx ng generate component some-nice-image --project mylib
<img alt="image was not found" src="../../assets/myimage.png" />
npx ng generate component big --project mylib
npm run build --prod
npm i -D @drag13/when-do
npm i @drag13/round-to
  • Working in the known framework with already known commands
  • Tree shaking feature comes out of the box
  • To see the component we need to use the main project
  • No watch mode for now
  • No static resources support out of the box

Publish

npx ng build --prod
cd dist/mylib
npm pack

Summary

 by the author.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Drag13

Drag13

Senior Software Developer. Working with .NET and TypeScript. Interested in #websecurity, love #webperformance