--- title: Meet Angular CLI, the opinionated NG2 tool description: "> Angular CLI is in beta at the date of this article's publication. The author's\nopinions are still considered accurate but, as with any beta software, expect\ninformation to quickly become dated.\n\n\nA brief introduction\nAngular CLI [https://cli.angular.io/] is a command line tool used to develop and\ndeploy" image: https://blog.ippon.tech/hubfs/Imported_Blog_Media/angular-cli-1.jpg --- [Skip to main content](https://blog.ippon.tech/meet-angular-cli-the-opinionated-ng2-tool#main) [![IpponLogoKleinBlue](https://blog.ippon.tech/hs-fs/hubfs/IpponLogoKleinBlue.png?width=219&height=64&name=IpponLogoKleinBlue.png) ![IpponLogoKleinBlue](https://blog.ippon.tech/hs-fs/hubfs/IpponLogoKleinBlue.png?width=219&height=64&name=IpponLogoKleinBlue.png) ![IpponLogoKleinBlue](https://blog.ippon.tech/hs-fs/hubfs/IpponLogoKleinBlue.png?width=168&height=49&name=IpponLogoKleinBlue.png) ![IpponLogoKleinBlue](https://blog.ippon.tech/hs-fs/hubfs/IpponLogoKleinBlue.png?width=168&height=49&name=IpponLogoKleinBlue.png)](https://ipponusa.com/) - [Home](https://ipponusa.com) - [Show submenu for About About](https://ipponusa.com/about-us) - [Who We Are](https://ipponusa.com/who-we-are) - [Careers](https://ipponusa.com/careers) - [Show submenu for Our Partners Our Partners](https://ipponusa.com/our-partners/) - [AWS](https://ipponusa.com/our-partners/aws/) - [Snowflake](https://ipponusa.com/our-partners/snowflake/) - [Databricks](https://ipponusa.com/our-partners/databricks/) - [Microsoft](https://ipponusa.com/our-partners/microsoft/) - [Show submenu for Services Services](https://ipponusa.com/services) - [Snowflake](https://ipponusa.com/service/snowflake-concierge/) - [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/) - [Data & Analytics](https://ipponusa.com/service/data-analytics/) - [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/) - [Platform Modernization](https://ipponusa.com/service/platform-moderization/) - [Product Innovation](https://ipponusa.com/service/product-innovation/) - [Operating Model](https://ipponusa.com/service/operating-model/) - [Blogs](https://blog.ippon.tech/) - [Success Stories](https://ipponusa.com/success-stories/) - [Show submenu for Resources Resources](https://ipponusa.com/resources/) - [eBooks](https://ipponusa.com/ebooks/) - [The Data Pour](https://info.ippon.tech/the-data-pour) - [Videos & Webinars](https://info.ippon.tech/videos-and-webinars) - [Media Center](https://ipponusa.com/media-center/) Search Open main navigation Close main navigation - [Home](https://ipponusa.com) - Show submenu for About About - About - [About](https://ipponusa.com/about-us) - [Who We Are](https://ipponusa.com/who-we-are) - [Careers](https://ipponusa.com/careers) - Show submenu for Our Partners Our Partners - Our Partners - [Our Partners](https://ipponusa.com/our-partners/) - [AWS](https://ipponusa.com/our-partners/aws/) - [Snowflake](https://ipponusa.com/our-partners/snowflake/) - [Databricks](https://ipponusa.com/our-partners/databricks/) - [Microsoft](https://ipponusa.com/our-partners/microsoft/) - Show submenu for Services Services - Services - [Services](https://ipponusa.com/services) - [Snowflake](https://ipponusa.com/service/snowflake-concierge/) - [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/) - [Data & Analytics](https://ipponusa.com/service/data-analytics/) - [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/) - [Platform Modernization](https://ipponusa.com/service/platform-moderization/) - [Product Innovation](https://ipponusa.com/service/product-innovation/) - [Operating Model](https://ipponusa.com/service/operating-model/) - [Blogs](https://blog.ippon.tech/) - [Success Stories](https://ipponusa.com/success-stories/) - Show submenu for Resources Resources - Resources - [Resources](https://ipponusa.com/resources/) - [eBooks](https://ipponusa.com/ebooks/) - [The Data Pour](https://info.ippon.tech/the-data-pour) - [Videos & Webinars](https://info.ippon.tech/videos-and-webinars) - [Media Center](https://ipponusa.com/media-center/) - Search - [Contact Us](https://ipponusa.com/contact/) [Contact Us](https://ipponusa.com/contact/) # Meet Angular CLI, the opinionated NG2 tool ![John Strickler](https://app.hubspot.com/settings/avatar/d41d8cd98f00b204e9800998ecf8427e) by [John Strickler](https://blog.ippon.tech/author/john-strickler) January 23, 2017 ![Meet Angular CLI, the opinionated NG2 tool](https://blog.ippon.tech/hubfs/Imported_Blog_Media/angular-cli-1.jpg)     Jan 23, 2017   > Angular CLI is in beta at the date of this article's publication. The author's opinions are still considered accurate but, as with any beta software, expect information to quickly become dated. ### A brief introduction [Angular CLI](https://cli.angular.io/?ref=blog.ippon.tech) is a command line tool used to develop and deploy an Angular2 front-end. Recently, I've been using Angular CLI to develop an enterprise front-end, and I have to say that I am impressed. It's a powerful tool, and due to it's opinionated approach, it's simple to use. What makes the CLI a worthwhile tool is two things; first, it conveniently packs all the necessary commands for building, running, testing, and linting code into one place. Second, the CLI generates a highly scalable front-end infrastructure by bringing together a synergistic suite of tech that includes: - [Angular2](https://angular.io/?ref=blog.ippon.tech) (the basis for life) - [Typescript](https://www.typescriptlang.org/?ref=blog.ippon.tech) (because NG2) - [Webpack](https://webpack.github.io/?ref=blog.ippon.tech) (solid module bundler) - [Karma](https://karma-runner.github.io/?ref=blog.ippon.tech)/[Jasmine](https://jasmine.github.io/?ref=blog.ippon.tech) (simple unit testing) - [Protractor](http://www.protractortest.org/?ref=blog.ippon.tech) (even simpler e2e testing) - [Istanbul](https://istanbul.js.org/?ref=blog.ippon.tech) (sharp code coverage reporting) - [TSLint](https://palantir.github.io/tslint/?ref=blog.ippon.tech) (clean and consistent code) - And many other integrations... For better or for worse, you won't find *Gulp* or *Bower* packed in by default, and I think it's a good thing. The code feels more streamlined by cutting out Bower in lieu of NPM, and the CLI acts as a basic task runner so Gulp isn't necessary either. ### Installing the CLI Angular CLI is primarily used as a local development tool. To get started, open up a terminal and run the following command: `npm install -g angular-cli` It might take a few minutes to install, so be patient. Also, note that the `-g` flag is important as it signifies to install and make the CLI available globally. After the install process, the CLI is made available via the `ng` command. ### Create an Angular2 project With the CLI installed, creating a new project is straight forward. Simply run the command: `ng new ` ![](https://blog.ippon.tech/hubfs/Imported_Blog_Media/ng_new-1.png) This will create a new directory for your project. Inside the directory, a runnable Angular2 project will have been generated. You can deploy the application locally using: `ng serve` ![](https://blog.ippon.tech/hubfs/Imported_Blog_Media/ng_serve-1.png) Open a browser to `http://localhost:4200`. The application should load and display the default text of *App Works!* ![](https://blog.ippon.tech/hubfs/Imported_Blog_Media/hello_world-1.png) That's it! In one command, a runnable Angular2 application can be generated, and in another command it can be deployed. You may have noticed that the `serve` command is still active in your terminal. The reason is that the CLI utilizes *browser reload* functionality by watching relevant project files for changes. When a file changes, *Webpack* does its magic to redeploy the application and automatically refresh the browser. This functionality has been around for a while via a variety of node packages, but it's still nice that the CLI packs it in by default. ### Build, package, and deploy Eventually, the front-end will need to be deployed to a remote web server, and to do so, the application needs built and packaged. Fortunately, the CLI's **build** process is painless. Simply run `ng build` and the CLI will utilize *Webpack* to output the generated front-end to the project's `dist` folder. The next step is to **package** the newly generated resources inside the `dist` folder to a tarball archive: `tar -czvf judochop.tar.gz -C dist .` *Note: the `-C dist .` creates a cleaner tarball by only archiving the contents of the `dist` directory and not the directory itself.* ![](https://blog.ippon.tech/hubfs/Imported_Blog_Media/ng_build-1.png) Now the front-end is ready to be **deployed**! In this example, deployment is just copying and unzipping the archive to the web content directory of a locally-running Nginx server: ![](https://blog.ippon.tech/hubfs/Imported_Blog_Media/ng_deploy-1.png) That's all there is to it! The front-end application is now being served by an independent web server! Hopefully this article has been useful in getting started with Angular2. Modern web applications have become extremely complex, and Angular CLI has been an equalizer in making things a tad simpler. ## Related Articles ### Comments ### Subscribe to Our Blog! Stay informed with the latest insights and updates by signing up for our weekly blog newsletter – delivered straight to your inbox! [Back to blog homepage »](https://blog.ippon.tech/) ![IpponLogoKleinBlue](https://blog.ippon.tech/hs-fs/hubfs/IpponLogoKleinBlue.png?width=247&height=73&name=IpponLogoKleinBlue.png "IpponLogoKleinBlue") Ippon is a consulting and expertise firm, who is convinced that technology is a source of progress for society. We help our clients leverage their digital assets to design an appropriate strategy and deploy their transformation roadmap at scale. #### Navigation - [Home](https://ipponusa.com/) - [About](https://ipponusa.com/about-us/) - [Services](https://ipponusa.com/services/) - [Blogs](https://blog.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701) - [eBooks](https://ipponusa.com/ebooks/) - [The Data Pour](https://info.ippon.tech/the-data-pour?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701) [Contact Us](https://ipponusa.com/contact/) [Join Us](https://ipponusa.com/careers/) #### Services - [Data & Analytics](https://ipponusa.com/service/data-analytics/) - [Cloud Strategy](https://ipponusa.com/service/cloud-strategy/) - [Artificial Intelligence](https://ipponusa.com/service/artificial-intelligence/) - [Operating Model](https://ipponusa.com/service/operating-model/) - [Platform Modernization](https://ipponusa.com/service/platform-moderization/) - [Product Innovation](https://ipponusa.com/service/product-innovation/) #### Ippon International - [France](https://fr.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701) - [Australia](https://au.ippon.tech/?__hstc=223043268.1036d82247623b329dfefe4e92697801.1714729179243.1714729179243.1714729179243.1&__hssc=223043268.2.1714729179244&__hsfp=803678701) - #### Contact - Ippon Technologies [3431 West Leigh Street Richmond, VA 23230, USA](https://maps.app.goo.gl/RySm6SAwZnsxeiLz9) - [(844) 477- 6687](tel:8444776687) - [Sales@ipponusa.com](mailto:Sales@ipponusa.com) ©Copyright 2024 Ippon USA. All Rights Reserved.   |   [Terms and Conditions](https://ipponusa.com/privacy-policy/)   |   [Privacy Policy](https://ipponusa.com/privacy-policy/)   |   [Website by Skol Marketing](https://skolmarketing.com/) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "John Strickler", "url" : "https://blog.ippon.tech/author/john-strickler" }, "dateModified" : "2024-01-29T15:55:51.331Z", "datePublished" : "2017-01-23T15:26:00.000Z", "headline" : "Meet Angular CLI, the opinionated NG2 tool", "image" : [ "https://blog.ippon.tech/hubfs/Imported_Blog_Media/angular-cli-1.jpg" ], "mainEntityOfPage" : { "@id" : "https://blog.ippon.tech/meet-angular-cli-the-opinionated-ng2-tool", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.ippon.tech/hubfs/logo_SVG.svg" }, "name" : "Ippon Technologies" } } ```