In this article, we are bringing a step-to-step guide to setting up a local Angular environment in your system to develop an application. Using Angular CLI tools to set up a workspace for Angular development.
We have included details like prerequisites, CLI installation, building an initial environment, and basic application and running that app locally to test your app.
Step 1: Prerequisites for the local environment
If you want to use the Angular framework then you must be familiar with the below-given programming languages.
JavaScript
HTML
CSS
Before using the Angular installation command to set up a workspace you must have the following:
Download Visual Code in order to edit your code.
Node.js: Angular needs an LTS version or maintenance LTS version of Node.js. If you already have Node.js installed in your system then you can skip this part. Otherwise, you can install Node.js and in case you don’t know which version to install, run a command
node -v in a terminal window.
npm package manager: Angular CLI tools, Angular apps, and Angular depends on npm packages. These packages contain many functions and features and in order to download npm packages you need to download the npm packages manager.
In this article, we have used command lines for the npm client which is already installed with Node.js. In order to check whether your system has an npm client installed, run an npm -v command in a terminal window.
Step 2: Install Angular CLI
Angular CLI will allow you to create projects on Angular, generate library code and applications, and perform various tasks like bundling, deployment, and testing.
In order to install Angular CLI, run the following command in your terminal window.
npm install -g @angular/cli
On the computer, by default the execution of the PowerShell option is disabled. You can enable this by setting up the following execution policy.
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
Create an initial application and a workspace
You can develop applications after systematically Angular environment setup. Develop an application in the context of Angular nx workspace.
Create a local environment and starter application:
Run the command ng new in your terminal window and type the name my-app, as shown below.
ng new my-app
The other command ng new will prompt for information related to features to add to the starter app. Accept all the defaults by tapping on the ‘Return’ or ‘Enter’ key.
Angular dependencies and npm packages are already installed along with Angular CLI. This process might take some time. The CLI will only create a basic Welcome application and a new workspace for Angular development. Install Angular CLI to get packages and features as default.
Step 3: Run the app
The Angular CLI inculcate a server to build and serve application locally.
First, go to the Angular workspace folder like my-app.
Run the below-given command
cd my-app
ng serve --open
The command ng serve launches the server, review your files, recreate the app, and adds all the changes that you make in your files.
The -o or --o option will open your browser to http://localhost:4200/.
If you have successfully followed all the steps and set up Angular workspace successfully, you would see the page as given below.
Now that you have successfully set up the local environment, you can create a basic application using Angular.
No comments:
Post a Comment