Firstly, let us discuss how we can build an Angular application, run it, and preview it in the browser. We can easily do using the CLI, provided by Angular. The CLI is a Command-line interface tool by using which, the developers face fewer challenges to initialize an application, develop it, scaffold, and maintain it efficiently. CLI is not always required to develop an application in Angular but definitely it gives the developer a high-quality toolset to make the code more impressive and saves time.
Highlights on CLI:
- Creating a new Angular application.
- Running a development server with LiveReload support to preview your application during development.
- Adding different features to the existing Angular application.
- Running application’s unit tests.
- Running application’s end-to-end (E2E) tests.
- Building application for deployment to production.
Let us build our first Angular application. Some prerequisites are as follows:
- Node.js 6.9.0
- npm 3.0.0 or higher versions
Installation: To install Angular CLI, run the following in the command prompt, this will install ng in your system.
$ npm install -g @angular/cli
To check the version we will write the following command-
$ ng version
This will give the version you have installed.
@angular/cli: 1.0.0 node: 6.10.0 os: darwin x64
Creation of a new application: To build, and serve a new Angular project on a development server, go to the parent directory of your new workspace and use the following commands:
$ ng new my-first-Angular-application
This ng new command will create a new folder under the current working directory, all the source files and the directories for your new Angular application are created based on the name you specified “my-first-Angular-application”. The npm dependencies are installed. Note that all the files that you want to create, you will be able to create them inside the folder. If the current working directory is not the right place for your project, you can change it to another directory by running cd.
To preview your new application in your browser, navigate to its directory:
$ cd my-first-Angular-application
$ ng serve
In your browser, open http://localhost:4200/ to see the result of my-first-Angular-application. When you use the ng serve command to build an app and serve it locally, the server automatically rebuilds the app and it reloads the page when you change any of the source files. Creating, building, and running your Angular application is as simple as that.
Now the main question arises, why we need to allow access the localhost from outside?
The answer is Often we as developers use more than one device or computer to run our application with respect to our needs. It will make our work efficient and also we can save a lot of time. To allow the access of localhost from outside there is a simple modification to the ng serve comment which we have seen earlier.
$ ng serve --host 0.0.0.0
Then type 192.168.x.x:4200 to get access from another machine. x.x stands for the last two dotted decimal digits from your IP address. Else you can simply type-
$ ng serve --host 192.168.X.X
If you are still not able to access 192.168.X.X:4200, you may be in a network where firewall protection is ON. Disable the protection and check again.
- HTTP headers | Access-Control-Allow-Credentials
- HTTP headers | Access-Control-Allow-Origin
- HTTP headers | Access-Control-Allow-Headers.
- HTTP headers | Access-Control-Allow-Methods
- PHP program to fetch data from localhost server database using XAMPP
- Creating custom domain name instead of localhost in Ubuntu
- How to configure XAMPP to send mail from localhost using PHP ?
- HTTP headers | Allow
- HTTP headers | Timing-Allow-Origin
- How to fix number of visible items in HTML dropdown and allow multiple selections ?
- How to hide a div when the user clicks outside of it using jQuery?
- How to remove active nav-tab when click outside of nav-tab in Bootstrap ?
- CSS | shape-outside Property
- How to detect click event outside Angular component ?
- How to access the correct `this` inside a callback?
- How to access an associative array by integer index in PHP?
- JSP Access Model
- How to get access to the containing form of an input?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.