Angular 6 Installation And Setup


Prerequisite to install and setup Angular 6 on Windows systems.
  • Nodejs
  • Npm
  • Angular CLI
  • IDE for writing your code
It’s required for Angular 6 that Nodejs should have version greater than 8.11 and npm has to be greater than 5.6.

Nodejs

Identify the nodejs is installed on your system with typing command node -v in the cmd prompt. This will help you see the version of nodejs currently installed on your system.

















If it does not print anything, install nodejs on your system. To install nodejs, go the homepage https://nodejs.org/en/download/ of nodejs and install the package based on your OS.

Official site’s homepage of nodejs will look like the following –






To install  node on Windows 10, I downloaded node-v10.15.3-x64.msi from nodejs.org site. Run this msi file and follow the required step to install.














Once nodejs is installed, npm will also get installed along with it. To check if npm is installed or not, type npm -v in the terminal. It should display the version of the npm.




Once node and npm is installed then run below command on same window to install the CLI using the npm package manager.
npm install -g @angular/cli




After successfully installation of CLI you can create angular app in your system with the help of below command. Also to open and work on angular app code, download Visual Studio Code from https://code.visualstudio.com/docs/?dv=win64user

Create a new Project in Angular
To create a new project in angular use below command. After running this command required module will be added to this app and you can start basic work on the same application.



Ng new AngularTest
Once you run above command in Nodejs window then few option will be displayed in same window regarding routing and CSS frameworks etc. Please select Y for routing and select CSS/SAAS as per your requirement.



Once new project is created then below cmd screen will be displayed. This project includes relevant modules including htmls, css, type scripts etc.



After this please check the physical location of your project. There you find source code including required module as below.








Now open this project in Visual Studio Code. Here you find complete structure of your project in explorer view.




















Sharing few basic command to compile, build, run the project from Visual Studio code terminal or Nodejs command prompt.
ng build : this command build the project


ng serve :  run command ng serve to see the page in web browser.



In this article I explained the setup and configuration of Angular 6. In my next article I will try to help out on few more codding stuff on Angular.



Happy Learning!!! 


Comments

Post a Comment

Popular posts from this blog

Error : DependencyManagement.dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique: com.adobe.aem:uber-jar:jar:apis -> version 6.3.0 vs 6.4.0

Image
I got above error after adding dependency in Maven POM xml file placed under newly created AEM arch type and running command  mvn -PautoInstallPackage clean install . Error : DependencyManagement.dependencies.dependency.(groupId:artifactId:type:classifier)' must be unique: com.adobe.aem:uber-jar:jar:apis -> version 6.3.0 vs 6.4.0 After google and gone through few article I got command ( mvn -PautoInstallPackage -Padobe-public clean install) . Once I run this command this issue with jar compatibility was resolved. Happy Learning!!!
Read more

ERROR Exception while handling event Sitecore.Eventing.Remote.PublishEndRemoteEventException: System.AggregateExceptionMessage: One or more exceptions occurred while processing the subscribers to the 'publish:end:remote'

I was getting below error while working with cache management on CM and CD server. Actually my code was working fine on CM server but I was not able to access or clear cache object on CD server because of wrong event selection.  PID[18108] Error       ManagedPoolThread #3 16:24:16 ERROR Exception while handling event Sitecore.Eventing.Remote.PublishEndRemoteEventException: System.AggregateExceptionMessage: One or more exceptions occurred while processing the subscribers to the 'publish:end:remote' event.Source: Sitecore.Kernelat Sitecore.Events.Event.EventSubscribers.RaiseEvent(String eventName, Object[] parameters, EventResult result)at Sitecore.Events.Event.RaiseEvent(String eventName, Object[] parameters)at Sitecore.Eventing.Subscription`1.Invoke(Object instance, EventContext context)at Sitecore.Eventing.EventProvider.RaiseEvent(Object event, Type eventType, EventContext context) Above error comes due to wrong event args access in CD server. T...
Read more

Error : Sorry, there was an error : unauthorized_client in Sitecore 9.1 login

Image
After adding a new binding from IIS on my sitecore 9.1 instance I was getting unauthorized client error while login with newly added binding URL. To fix this issue I added AllowedCorsOriginsGroup in xml file placed at File Name :  Sitecore.IdentityServer.Host.xml Location : C:\inetpub\wwwroot\9Dot1.identityserver\Config\production After adding field tag AllowedCorsOriginsGroup in  Sitecore.IdentityServer.Host.xml file I was able to login properly with newly added URL. Also you can fix this issue by placing a pipe operator beside of old AllowedCorsOriginsGroup as below. <AllowedCorsOriginsGroup1>http://9Dot1.sc | http://jss.9Dot1.sc</AllowedCorsOriginsGroup1 Happy Learning!!!
Read more