Angular CLI is a command line interface tool which is used to initialize, develop, scaffold, and maintain Angular applications. You can use these command directly on command prompt or indirectly through an interactive UI i.e. Angular Console. Command Alias Description add It is used to add support for an external library to your project. build b It compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory. config It retrieves or sets Angular configuration values in the angular.json file for the workspace. doc d It opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword. e2e e It builds and serves an Angular app, then runs end-to-end tests using Protractor. generate g It generates and/or modifies files based on a schematic. help It provides a list of available commands and their short descriptions. lint l It is used to run linting tools on Angular app code in a given project folder. new n It creates a new workspace and an initial Angular app. run It runs an Architect target with an optional custom builder configuration defined in your project. serve s It builds and serves your app, rebuilding on file changes. test t It runs unit tests in a project. update It updates your application and its dependencies. See https://update.angular.io/ version v It utputs Angular CLI version. xi18n It extracts i18n messages from source code. ng add Command The ng add command is used to add support for an external library to your project. It adds the npm package for a published library to your workspace, and makes your default app project to use that library, in whatever way is specified by the library’s schematic. For example, if you add @angular/pwa, then it will configure your project for PWA support. The default app project is the value of defaultProject in angular.json. Syntax: Parameter Explanation: <collection>: It specifies the package which you want to add. Options –defaults=true|false: When true, it disables interactive input prompts for options with a default. –help=true|false|json|JSON: It is used to show a help message in the console. Default: false –interactive=true|false: When false, it disables interactive input prompts. ng build Command The ng build command is used to compile an Angular app into an output directory named dist/ at the given output path. It must be executed from within a workspace directory. Syntax: Parameter Explanation: <project>: It specifies the name of the project to build. It can be an app or a library. Options –aot=true|false: It builds using Ahead of Time compilation. Default: false –baseHref=baseHref: It specifies the base url for the application being built. –buildEventLog=buildEventLog: (experimental) Output file path for Build Event Protocol events. –buildOptimizer=true|false: It enables ‘@angular-devkit/build-optimizer’ optimizations when using the ‘aot’ option. Default: false –commonChunk=true|false: It uses a separate bundle containing code used across multiple bundles. Default: true –configuration=configuration: A named build target, as specified in the “configurations” section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Aliases: -c –deleteOutputPath=true|false: It is used to delete the output path before building. Default: true –deployUrl=deployUrl: URL where files will be deployed. –es5BrowserSupport=true|false: Enables conditionally loaded ES2015 polyfills. Default: false –extractCss=true|false: It is used to extract css from global styles into css files instead of js ones. Default: false –extractLicenses=true|false: It is used to extract all licenses in a separate file. Default: false –forkTypeChecker=true|false: It is used to run the TypeScript type checker in a forked process. Default: true –help=true|false|json|JSON: It is used to show a help message for this command in the console. Default: false –i18nFile=i18nFile: Localization file to use for i18n. –i18nFormat=i18nFormat: Format of the localization file specified with –i18n-file. –i18nLocale=i18nLocale: Locale to use for i18n. –i18nMissingTranslation=i18nMissingTranslation: How to handle missing translations for i18n. –index=index: The name of the index HTML file. –lazyModules: List of additional NgModule files that will be lazy loaded. Lazy router modules will be discovered automatically. –main=main: The full path for the main entry point to the app, relative to the current workspace. –namedChunks=true|false: Use file name for lazy loaded chunk Default: true –ngswConfigPath=ngswConfigPath: Path to ngsw-config.json. –optimization=true|false: Enables optimization of the build output. –outputHashing= none|all|media|bundles: Define the output filename cache-busting hashing mode. Default: none –outputPath=outputPath: The full path for the new output directory, relative to the current workspace. By default, writes output to a folder named dist/ in the current project. –poll: Enable and define the file watching poll time period in milliseconds. –polyfills=polyfills: The full path for the polyfills file, relative to the current workspace. –preserveSymlinks=true|false: Do not use the real path when resolving modules. Default: false –prod=true|false: When true, sets the build configuration to the production target. All builds make use of bundling and limited tree-shaking. A production build also runs limited dead code elimination. –profile=true|false: Output profile events for Chrome profiler. Default: false –progress=true|false: Log progress to the console while building. –resourcesOutputPath= resourcesOutputPath: The path where style resources will be placed, relative to outputPath. –serviceWorker=true|false: Generates a service worker config for production builds. Default: false –showCircularDependencies=true|false: Show circular dependency warnings on builds. Default: true –sourceMap=true|false: It is used to show Output sourcemaps. Default: true –statsJson=true|false: It generates a ‘stats.json’ file which can be analyzed using tools such as: ‘webpack-bundle-analyzer’ or https://webpack.github.io/analyse. Default: false –subresourceIntegrity=true|false: It enables the use of subresource integrity validation. Default: false –tsConfig=tsConfig: The full path for the TypeScript configuration file, relative to the current workspace. –vendorChunk=true|false: It uses a separate bundle containing only vendor libraries. Default: true –verbose=true|false: It adds more details to output logging. Default: false –watch=true|false: It runs build when files change. Default: false ng config Command The ng config command is used to retrieve or set Angular configuration values in the angular.json file for the workspace. Syntax: Parameter Explanation: <jsonPath>: The configuration key to set or query, in JSON path format. For example: “a[3].foo.bar[2]”. If no new value is provided, returns the current value of this key. <value>: If provided, a new value for the given configuration key. Options –global=true|false: When true, it accesses the global configuration in the caller’s home directory. Default: false Aliases: -g –help= true|false|json|JSON: It is used to show a help message for this command in the console. Default: false ng doc Command The ng doc command is used

How to install Bootstrap for Angular project? Run the following command on command prompt: Further, when you use a project created with Angular CLI 6+ (check via ng v ), you’ll have an angular.json file instead of an .angular-cli.json file. In that file, you still need to add Bootstrap to the styles[] array, but the path should be node_modules/bootstrap/dist/css/bootstrap.min.css , NOT ../node_modules/bootstrap/dist/css/bootstrap.min.css . The leading ../ must not be included. Here, we are using the Angular 7.2.3 version. How to add bootstrap.css file in the project? Expand Node Module (library root folder) Go to bootstrap folder and expand it. Go to dist folder and expand dist. Expand css and you will find “bootstrap.css”. Expand bootstrap.css and you will see bootstrap.min.css Open angular.json file and add the bootstrap.min.css in style section. Bootstrap is now installed for your Angular 7 project. You can use it now.

See the structure of the Angular 7 app on WebStorm IDE (how it looks on IDE). For Angular 7 development, you can use either Visual Studio Code IDE or WebStorm IDE. Both are good. Here, we are using JetBrains WebStorm IDE. Files used in Angular 7 App folder Angular 7 App files which are mainly used in your project are given below: Other Important files

Following are the Angular CLI commands to create the first Angular app. Run the following command to create your first Angular app. Navigate to your first app. Start your server to run app. Your server is running on localhost:4200. Now, go to the browser and open it. Now, you need an IDE to edit and run your app’s code. Here, we are using WebStorm. Open WebStorm and open your app “my-first-app” in the IDE. It will look like this: Here, go to src folder, you will see app folder there. Expand the app folder. You will see 5 components there: You can see the code within the different components to understand what is going on and which part is responsible for the outlook of the app. app.component.css This part is empty because we don’t specify any CSS here. app.component.html This is the most important component, the front page of your app. Here, you can change the salutation used before your app’s name. You can also change the content on the front page and their respective links. Code: app.component.spec.ts: This file is used for testing purpose only. app.component.ts You can change the name of your app here. You just have to change the title. app.module.ts

The first version of Angular was Angular1.0 (also known as AngularJS) which was released in 2010. But here, we are talking about Angular so; let’s see history and different versions of Angular. Angular2 Angular 2.0 was first introduced in October 2014. It was a complete rewrite of Angular so, the drastic changes in the 2.0 version created controversy among developers. On April 30, 2015, the Angular developers announced that Angular 2 moved from Alpha to Developer Preview and then Beta version was released in December 2015. Its first version was published in May 2016 and the final version was released on September 14, 2016. Angular4 Angular 4 version was announced on 13 December 2016. The developers skipped the version 3 due to some confusion. Its final version was released on 23 March 2017. This version has some additional features: Angular5 This version was released on 1 Nov, 2017. It provided some improvements to support for progressive web apps, also provides improvements related to Material Design. Angular6 This version was released on 4 may, 2018. It was a major relaese which provides some features like: ng update, ng add, Angular Elements, Angular Material + CDK Components, Angular Material Starter Components, CLI Workspaces, Library Support, Tree Shakable Providers, Animations Performance Improvements, and RxJS v6. Angular 7 The latest version of Angular is Angular 7. It was released on October 18, 2018. It consists of many extensive features:

Angular 7 Environment Setup In this page, you will see how you can install the prerequisites needed to run your first Angular 7 app. Install Visual Studio Code IDE or JetBrains WebStorm You must have an IDE like Visual Studio Code IDE or JetBrains WebStorm to run your Angular 7 app. VS Code is light and easy to setup, it has a great range of built-in code editing, formatting, and refactoring features. It is free to use. It also provides a huge number of extensions that will significantly increase your productivity. You can download VS Code from here: https://code.visualstudio.com JetBrains WebStorm is also a great IDE to develop Angular 7 apps. It is fast, attractive, and very easy to use software but, it is not free to use. You have to purchase it later, it only provides a trial period of 30 days for free. You can download VS Code from here: https://www.jetbrains.com/webstorm/download/#section=windows We are using JetBrains WebStorm in this tutorial. Install Node.js You should install node.js to run your Angular 7 app. It manages npm dependencies support some browsers when loading particular pages. It provides required libraries to run Angular project. Node.js serves your run-time environment as your localhost. See how to install node.js: install-nodejs Or Just go to node.js official website https://nodejs.org/en/ Download and install latest version of node.js. In my case, it is 11.8.0 After the successful installation, you will see command prompt like this: Use npm to install Angular CLI Run the Angular CLI command to install Angular CLI or Just go to Angular CLI official website https://cli.angular.io/ You will see the whole cli command to create an Angular app. You need to run the first command to install Angular CLI. These steps are same for Windows and Mac. Your Angular 7 Environment setup is complete now.

A list of most important features and benefits of Angular: Angular supports multiple platforms Angular is a cross platform language. It supports multiple platforms. You can build different types of apps by using Angular. High Speed, Ultimate Performance Angular is amazingly fast and provides a great performance due to the following reasons: Productivity Angular provides a better productivity due to its simple and powerful template syntax, command line tools and popular editors and IDEs. Full Stack Development Angular is a complete framework of JavaScript. It provides Testing, animation and Accessibility. It provides full stack development along with Node.js, Express.js, and MongoDB.

Angular 7 is a JavaScript (actually a TypeScript based open-source full-stack web application) framework which makes you able to create reactive Single Page Applications (SPAs). Angular 7 is completely based on components. It consists of several components which forms a tree structure with parent and child components. Angular’s versions beyond 2+ are generally known as Angular only. The very first version Angular 1.0 is known as AngularJS. “Angular is a complete rewrite of AngularJS by the same team that built AngularJS.” What is Single Page Application (SPA)? A single page application is a web application or a website which provides users a very fluid, reactive and fast experience similar to a desktop application. It contains menu, buttons and blocks on a single page and when a user clicks on any of them; it dynamically rewrites the current page rather than loading entire new pages from a server. That’s the reason behind its reactive fast speed. Difference between AngularJS and Angular AngularJS Angular AngularJS is common and popular name of the first version of Angular1.0. Angular is common and popular name of the Angular’s version beyond 2+ AngularJS is a JavaScript-based open-source front-end web framework. Angular is a TypeScript-based open-source full-stack web application framework. AngularJS uses the concept of scope or controller. Instead of scope and controller, Angular uses hierarchy of components as its primary architectural characteristic. AngularJS has a simple syntax and used on HTML pages along with the source location. Angular uses the different expression syntax. It uses “[ ]” for property binding, and “( )” for event binding. AngularJS is a simple JavaScript file which is used with HTML pages and doesn’t support the features of a server-side programming language. Angular uses of Microsoft’s TypeScript language, which provides Class-based Object Oriented Programming, Static Typing, Generics etc. which are the features of a server-side programming language. AngularJS doesn’t support dynamic loading of the page. Angular supports dynamic loading of the page. Angular 7 vs Angular6 vs Angular2 vs Angular1 Angular1 was initially released in 2010. It was the first Angular version. It created a revolution in the web application development. It was a browser side JavaScript which was used within HTML code. It is popularly known as AngularJS. Angular2 was a complete rewrite of Angular1. It was initially released in 2016. There is nothing common between Angular2 and Angular1 except the core developer’s team. Angular2, Angular 6 and Angular 7 are very similar to each other. Angular 7 is the latest version. It contains the extensive features of Angular2 and Angular6. These versions are known as Angular.