Angular Library + NPM

layout: true
<div class="my-header"></div>
 <div class="my-footer">Andrei Ignat , http://msprogrammer.serviciipeweb.ro/</div>
 
---

# Angular Library / Project => NPM

From  ![:img ang, 10%](ang.png) to ![:img npm, 10%](npm.png)

---

# Agenda

0. About me
10. Introduction to Angular application
20. Introduction to the Angular library
25. Demo Angular + library
30. Introduction to NPM + Deploying library
50. Questions ?
---
class: center, top

# About me

Andrei Ignat http://msprogrammer.serviciipeweb.ro/

www.ASP.NET forum moderator

YouTube 5 minutes .NET and tools : http://bit.ly/5MinTools

Book Making Open Source Component  : http://bit.ly/NetOpenSourceComponent

Book Copy Paste from StackOverflow : https://amzn.to/2PQ8EDc

Monthly meetings:  https://www.meetup.com/Bucharest-A-D-C-E-S-Meetup/

---

# Introduction to Angular application

Angular  = front end for Web( and Desktop(Linux/Windows/Mac) , and Mobile(Android/iOS)

Code
```javascript
ng new myTestApp
cd myTestApp
npm i
ng serve --open 
```

And this is how >222MB of javascript renders a Web Application
( not fair - there is tree-shaking - we will see it)
---

# Introduction to the Angular library / project

Why ? Reusability of components

Code
```javascript
ng generate library my-name --prefix=ignatandrei
//see projects folder
//see angular.json, tsconfig.json
ng build my-name
//see myTestApp\projects\my-name\src\lib\my-name.component.ts
```

---

#  Demo Angular + library

Change code in main project and in library

Code
```javascript
//src\app\app.module.ts
//import {MyNameModule} from 'my-name';
import {MyNameModule} from 'projects/my-name/src/lib/my-name.module';
imports: [
    BrowserModule,
    AppRoutingModule,
    MyNameModule
  ]
//src\app\app.component.html
<ignatandrei-my-name></ignatandrei-my-name>

```
---

# Introduction to NPM + Deploying library

https://www.npmjs.com/package/versions-netcore-angular