Angular is a framework or platform used for creating a single-page application by using HTML and Typescript. Angular is written using Typescript, which means it implements optional and core functionalities as a Typescript library that you can import into your applications. You don’t need to use any third-party libraries to create basic functionalities. Everything is available in official libraries in which an Angular team provides everything. This means better quality and higher security can be achieved.

---

---

Tips for using Angular like a Pro

Publishing, maintaining, and keeping all packages up to date is difficult to manage. But by using some advanced features of Angular, all these problems can be solved. To use Angular like a pro, use Angular CLI and use automated technologies to publish them to npm using semantic release with Travis. Travis configuration is required to deploy and update the demo for a library to Github pages. 

 Prerequisites to master Angular

Tools and frameworks required for pro features

Create an Angular library 

Before starting work in advance features, make sure that you have installed the latest versions of Angular CLI. The following command can be used to install the latest version of Angular CLI.
[adinserter block=”2″]

npm install –g @angular/cli

After installing angular, you can start creating your apps and library. To understand the working of Angular like a pro, we will create an angular library for creating the code snippets and examples from markup and real code. 

Create a new app

A new application whose name is angular-exemplify-demo can be created by using the command;

ng new Angular—exemplify-demo 

The second step is to create the angular library itself. The above will be the name of the package that will be published to npm. Choose a name that fits the requirements of your library.

Create a library

Create a library by using the following command;

ng generate library angular-exemplify –prefix ex

It is important to note that you never forget to add the prefix “ex” and replace “angular-exemplify” and “exemplify” with the name of your library. If these things are omitted, then the prefix will set to “lib.”

The above command will create a new folder called “projects” that contains newly created libraries. Try to add the library module to the demo application.

App.module.ts

 
import {
  BrowserModule
} from '@angular/platform-browser';

import {
  NgModule
} from '@angular/core';

import {
  AppComponent
} from './app.component';

import {
  AngularExemplifyModule
} from '../../projects/angular-exemplify/src/lib/angular-exemplify.module';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule, AngularExemplifyModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule {}

In the next step, add a component from the library to the demo application, then update the app.component .html

<ex-angular-exemplify></ex-angular-exemplify>

Fire up the application by using the command;
[adinserter block=”2″]

npm start 

This will print the following on the output screen;

angular-exemplify works!

 How to import the library?

You will notice that we import our module directly from the project folder like this:

import { AngularExemplifyModule } from '../../projects/angular-exemplify/src/lib/angular-exemplify.module';

This will be effective because changes in our library will reflect your application instantly. However, keep in mind that consumers will consume a compiled version after building our library. Let’s create an npm script in package.json to compile the library. It is also required to set the base-href for Github pages for building demo

package.json

{

  "name": "angular-exemplify-demo",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build --base-href /angular-exemplify-demo/ --prod",

    "build-lib": "ng build angular-exemplify",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  ...

}

Build a library by running command;

npm run build-lib  

Now Angular CLI will compile the library using ng-package and place that library bundles in the output folder “dist/angular-exemplify,” which is the default folder for keeping output. This is the required package for publishing to npm if you are required to try it by yourself; before doing so, update and import reference:

app.module.ts to 

import {AngularExemplifyModule} from 'angular-exemplify';

After setting a basic setup, if you already complete your task and want to publish, then jump to “How to set it up and automate the whole process.”

Setup and automate the release workflow.

Before setting and automating the releases of workflow, few more things are required to install.

Commitizen

Install citizens to create git commit messages that can be analyzed using semantic releases to determine the next versions of semantic specifications. This is essential for automated releases because it eliminates the obstacles to determining the next version number.

Install commitizen CLI tools by using the command:

npm install commitizen –g 

There is also a need to let the commitizen which adapter is required to use like a template we required, followed by our contributors. Here we will use a conventional_change-log adaptor. 

Initialize cz-conventional-changelog adaptor by running the command;

commitizen init cz-conventional-changelog –save-dev –save-exact 

Add the following code for npm script to commit easily;

{

 "name": "angular-exemplify-demo",

 "version": "0.0.0",

 "scripts": {

 "ng": "ng",

 "start": "ng serve",

 "build": "ng build --base-href /angular-exemplify-demo/ --prod",

 "build-lib": "ng build angular-exemplify",

 "test": "ng test",

 "lint": "ng lint",

 "e2e": "ng e2e",

 "commit": "git-cz"

 },
 
 config": {

 "commitizen": {

 "path": "./node_modules/cz-conventional-changelog"

 }

 }

}

Config for the commitizen is added automatically by using the “commitizen init”. For starting commit wizard, it is required to type;

npm run commit 

Semantic release

Let’s continue after adding some semantic releases that will provide heavy life for us;

npm install semantic-release -- save-dev 

There is also a skillful cli for semantic release that will help set up for Angular professional features. Here we are trying to set up manually for making some adjustments. 
[adinserter block=”2″]

 Travis

Semantic releases are required to run in a ci environment. To continue with configuration, it is required to install Travis from the GitHub marketplace and give access to repositories. In the next step, add the .travis.yml file in the root folder of the project.

.travis.yml

dist: trusty

sudo: false

language: node_js

node_js: node

install:

- npm ci

cache:

 directories:

 - $HOME/.npm

script:

- npm run lint-lib

- npm run build-lib && npm run build

 

deploy:

 provider: pages

 skip-cleanup: true

 github-token: $GITHUB_TOKEN

 keep-history: true

 local-dir: dist/angular-exemplify-demo

 on:

 branch: master

git:

 depth: 3

after_success:

 - npm run travis-deploy-once "npm run semantic-release."

branches:

 except:

 - /^v\d+\.\d+\.\d+$/

Here is a short explanation of what functionalities will be performed by using the above code:

We need to add the following settings to the package.json file to make everything work efficiently. 

{

 "name": "angular-exemplify-demo",

 "version": "0.0.0",

 "scripts": {

 "ng": "ng",

 "start": "ng serve",

 "build": "ng build --base-href /angular-exemplify-demo/ --prod",

 "build-lib": "ng build angular-exemplify",

 "test": "ng test",

 "lint": "ng lint",

 "lint-lib": "ng lint angular-exemplify",

 "e2e": "ng e2e",

 "commit": "git-cz",

 "travis-deploy-once": "travis-deploy-once --pro",

 "semantic-release": "semantic-release"

 },

 "release": {

 "pkgRoot": "dist/angular-exemplify"

 },

 ...

}

Install travis-deploy-once

To run the first script, you need to install and add in the dev dependency by using the command:

npm install travis-deploy-once –save-dev

The script “travis-deploy-once –pro” ensure that the deploy script is only executed once in Travis. The pro option is used for Travis Pro and Travis Enterprise. The second script is not compulsory because later, we will replace environment variables in the application before it is deployed.
[adinserter block=”2″] It is also required to release a configuration to let the semantic release know which packages we will release. The reason for making it easier for contributors and others to know that our library is semantically released to change the version for our library in package.json library from 0.0.1 to 0.0.0. by using the following code:

{

 "name": "angular-exemplify",

 "version": "0.0.0-semantically-released",

 "peerDependencies": {

 "@angular/common": "^6.0.0-rc.0 || ^6.0.0",

 "@angular/core": "^6.0.0-rc.0 || ^6.0.0"

 }

}

Create access tokens for GitHub and npm

Create GitHub token

Travis and semantic releases are needed to access GitHub to tag releases and deploy demo to GitHub pages that control developer settings in GitHub and generate access tokens. After accessing the token, go-to app in Travis and to the environment variables under the tab settings using the name GITHUB_TOKEN

Create npm token

To make semantic releases to publish the npm package, we need to do the same with npm at npmjs.com. Add the token from the npm by using the name NPM_TOKEN 

Setting in Travis at travis-ci.com

Now everything is ready to push changes in the repository. It is recommended to protect the master branch in GitHub and commit to the branch before merging to master using the pull request.

Pull request to master branch automatically activate a build-in Travis. If all works fine, publish a new version to npm and create release notes in GitHub. Also, update the demo that is hosted on Github pages. Travis can also activate builds on other branches and pull requests automatically. But semantic release can only be configured from the releases of the master branch. 

Dependencies can be updated automatically with renovate 

This is optional but helpful when you want to keep your libraries up to date. Renovate will go by using all dependencies and create a pull request whenever new versions are available. After this, Travis will run tests if you add any for each pull request. This will let you know if the pull request can be merged without breaking your library or application. If you are confident with the test written by you, then pull requests by renovating will automatically be merged to master, triggering a new release without human interaction. For this:

renovate.json

{

"extends": [

"config:base"

],

"baseBranch": "develop",

"packageRules": [

{

"packagePatterns": [

"angular-exemplify"

],

"rangeStrategy": "replace"

},

{

"packagePatterns": [

"angular-exemplify"

],

"depTypeList": [

"devDependencies"

],

"rangeStrategy": "pin"

},
{

"packagePatterns": [

"angular-exemplify"

],

"depTypeList": [

"peerDependencies"

],

"rangeStrategy": "widen"

},

{

"packagePatterns": [

"angular-exemplify-demo"

],

"rangeStrategy": "replace",

"semanticCommitType": "chore"

},

{

"packagePatterns": [

"angular-exemplify-demo"

],

"depTypeList": [

"devDependencies":"devDependencies",

"rangeStrategy": "pin",

"semanticCommitType": "chore"

},

{

"packagePatterns": [

"angular-exemplify-demo"

 ],

 "depTypeList": [

 "peerDependencies"

 ],

 "rangeStrategy": "widen",

 "semanticCommitType": "chore"

 }

 ]

}

The above configuration will create a pull request for the demo application by using chore commit types. This will help to avoid any new releases because the dependencies in the demo application have been changed. The demo app can be separated from the library using packagePatterns “angular-exemplify-demo” and “angular-exemplify.” On the other hand, our library can get a pull request with the type set to fix. This can only happen if included dependencies will receive a fix.
[adinserter block=”2″]

By default, pull requests made by renovating cannot be merged. But if you are confident about your testing, nothing can stop renovating to merge them automatically.

Add Branches

Ensure that users have acquired that libraries have been updated automatically with renovate, released semantically, and commitizen. This can be done by adding the following badges in the README.md file in your repository.

Following is an example of how the badges can be added;

[](http://commitizen.github.io/cz-cli/)

[](https://github.com/semantic-release/semantic-release)

[](https://renovatebot.com/)

You can also get the current build status from Travis and never forget to update the path. The status will be like;

[](https://travis-ci.com/hjalmers/angular-exemplify)

Conclusion

This is all about setting and publishing packages to use Angular in the best way possible. The real code will be different from the above code, but all the concepts and working behavior are the same. Angular is a great option for building Enterprise applications based on advanced features and component-based architecture. Its dependency makes it ideal for single-page modern web applications.