How to build a library for Angular apps

1. How to build a library for Angular apps?

2. One of the things that the Angular crew made ridiculously easy with the arrival of Angular 6 is the possibility to create Angular libraries. We are going to create a library that gives a service, a component, and some interfaces. 1. Create the library project: • We begin as usual, with the aid of producing the initial setup with the ng new command: ng new lib-demo --prefix ld • With version 6 of Angular CLI, the layout of configuration file changed in a pretty tremendous way. angular.json represents what is referred to as a workspace now, with possibly more than one project. • By default, we get lib-demo and lib-demo-e2e projects generated for us, but you can add extra with "ng generate application [my-app-name]" command. • What you may also generate instead of an application, is a library: ng generate library tvmaze --prefix tm • As for the flags for this command, there are several options, however, setting up prefix is absolutely the minimum. If you won’t choose prefix then it will default to lib- • The generate command did several modifications to our app:

3. Most particularly, a new "projects" directory was created, with "tvmaze" folder inside. This new undertaking is referenced in our angular.json configuration too.

4. 2. Define and provide some interfaces: • An api request will appear to be this: https://api.Tvmaze.Com/shows/336 . If you observe the link you may be aware that the lower back json is quite complex — it would be a good concept to outline a reusable set of interfaces and provide them to our library’s users. • You can use a exquisite jsontots.Com tool to do the former. Let’s create a projects/tvmaze/src/lib/tvmaze.models.ts file with all of the interfaces. There’s bunch of them and they are all quite closely associated so it surely doesn’t make sense to create a separate file for every one among them. • To allow developers the use of this library to have an access to our interfaces, we need to provide them as a public api of the tvmaze library. Edit the generated inside the 1st step projects/tvmaze/src/public_api.ts file so it looks like this:

5. 3. Create a service in the library: • Our newly created tvmaze has its very own package.json, tsconfig.json, tslint.json and karma.conf.js because it makes sense that it may want a different setup than the principle application. • It also has a pattern component, module and a provider generated for us. We can also add extra ones, which we are able to do in a moment. • For now, let’s add some logic to the projects/tvmaze/src/lib/tvmaze. service.ts:

6. There is nothing uncommon in this carrier aside from the provideIn: root configuration in the @Injectable decorator. It’s surely a brand new setting brought in Angular 6. • "provideIn: root" lets in to provide a provider without explicitly registering it in any NgModule. • It enables such carrier to be tree-shaken (removed form the production package deal if no longer used), that is a not unusual scenario in case of services defined in libraries. 4. Create a component in the library: • Our library will allow displaying a poster of a given show. As with an ordinary Angular project, you don’t have to create a component by means of hand — it’s what the CLI is for: ng generate component poster --project=tvmaze • We just needed to tell the CLI to create the poster internal our tvmaze library.

8. To make the component available outside the lib’s tvmaze.Module, we need to add it to the exports section. • Make certain your projects/tvmaze/src/lib/tvmaze.module.ts seems like this: • Here we have added HttpClientmodule dependency, due to the fact that we needed HttpClient in TvMazeService, and CommonModule because it is wherein async pipe and ngIf directive (that the poster element uses) are defined.

9. 5. Build time: • Before we are able to use our library, we want to build it. Again, Angular CLI allows with that. We can now tell it to construct a particular project: ng build tvmaze 6. Use the library: • To try our library out, we want to do what we constantly do with 3rd party extension — define as a dependency within the imports segment of the app’s NgModule:

10. Here we don’t import the class by using a relative path to the tvmaze directory, but do it as if it was already in node_modules.So how does this work? • When we have generated the library (ng generate library tvmaze ) Angular CLI modified the tsconfig.json within the root of our project with the aid of including tvmaze to the paths entry. • This manner that each time to your TypeScript code you import some thing from "tvmaze" it is certainly being imported from the dist/tvmaze directory, where the build of our library has been saved. • That is definitely convenient, because after you put up the library to the real npm repository and want to start the use of that version, you won’t change any imports within the supply of the application — simplest put off that paths entry.

11. Now let’s show some thing.Let’s alter the default src/app/app.component.ts to look like this:

12. Here we are using the everything that our tvmaze carrier provides. The show interface, TvmazeService and <tm-poster>. Once we we start the app, this need to be a result: 7. Publish the library: To make the library available on npm all you need to do is create a production build, and run npm post command from the project’s dist directory: ng build tvmaze --prod cd dist/tvmaze npm publish

13. For More information about Angular JS Call : +91 9989971070 Visit: https://www.visualpath.in/ www.visualpath.in

14. Thank you www.visualpath.in