Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Creating angular 6 project

Suggested Courses
Angular 2 | Text articles & Slides
Angular CRUD | Text articles & Slides
Angular CLI | Text articles & Slides

This is Part 1 of Angular 6 Tutorial for beginners. In this video
  • We will set up the development environment by installing the tools required for Angular 6 development
  • Create a brand new Angular 6 project using Angular CLI

Pre-requisites
Basic knowledge of Angular and Angular CLI


If you are new to Angular, please check out our 
Angular 2 course and Angular CRUD course

If you are new to Angular CLI, please check out our 
Angular CLI course

Setting up Angular 6 Development environment

Step 1 : Install Node and NPM using the link below. 
https://nodejs.org/en/download/

You need Node version 8.x or greater and NPM version 5.x or greater. To veriify the version of NODE and NPM you have, execute the following 2 commands using the command prompt window. Make sure you are running the command prompt as an administrator.
node -v
npm -v

If you already have NODE and NPM installed and if you want to upgrade to the latest version simply download and run the installer again, and it will automatically update NODE and NPM to the latest version.

Step 2 : Install Angular CLI. It is a command line tool that help us create angular applications quickly and easily while still following angular's best practices and conventions. It's a great tool to increase your productivity as an angular developer.

If you do not have Angular CLI installed already, execute the following command and it will install the latest version.
npm install -g @angular/cli

If you already have Angular CLI installed, and you want to upgrade to the latest version, then execute the following command
npm install -g @angular/cli@latest

Step 3 : Download and install Visual Studio Code
https://code.visualstudio.com/download

Create a new Angular 6 project using the Angular CLI : 

Step 1 : Run the command prompt window as an administrator

Step 2 : Execute the following command to create a new Angular 6 project.
ng new Angular6Project -d

Command Explanation
ng Is the Angular CLI
new For generating a new project
Angular6Project Is the name of the project
-d This is dry-run flag. This flag instructs Angular CLI just to list the files it's going to create. It does not actually create them. This is a great option, because it lets us see what files will be generated without actually generating them.

In our case, we do not want test files to be generated so let's also use --skip-tests option to skip generating test files. The following generates a new Angular 6 project and all the required files. Notice, we have not used -d option, so Angular CLI will create the Angular project and all the required files.
ng new Angular6Project --skip-tests

Running the Angular 6 Project

Step 1 : In the command prompt window, use the following command to go to the project directory
cd Angular6Project

Step 2 : Execute the following command to run the Angular 6 project. This command builds, launches your default browser and serves the application using the default port number 4200 (http://localhost:4200/)
ng serve --open (short cut command : ng s -o)

At this point you will see the following on the browser
Welcome to Angular6Project!

This message is coming from the root component AppComponent.

The project structure and the files in angular project have not changed much between Angular 5 and Angular 6. One change I can point out at this time is the Angular CLI configuration file. Prior to Angular 6, the Angular CLI configuration file is called angular-cli.json. In Angular 6, it is renamed to just angular.json. It's not a simple rename, the file format is also slightly different.

In the generated project there are several files and folders. If you are new to these files and folders, please check out Parts 7 and 8 from Angular CLI tutorial

The src folder contains the angular application components, templates, services, styles, images, and anything else the application needs. The files outside of this folder are meant to support building, testing, maintaining, documenting, and deploying the angular application.

To confirm this Angular application is using Angular Version 6, open package.json file and notice all the Angular packages version is 6.1.0.

angular 6 tutorial for beginners

7 comments:

  1. Can you please explain about jwt authentication for login using angular 6

    ReplyDelete
  2. Null Exception Error please guide me because i fellow your every video
    Controller:
    var employeetype = aPMSContext.Employee_Type.ToList();
    ViewBag.employeetype = employeetype;

    View :

    @Html.LabelFor(model => model.ET_Id, "ET_Id", htmlAttributes: new { @class = "control-label col-md-6", style = "margin-left:3px;margin-top:10px" })
    @Html.DropDownList("ET_Id", new SelectList(ViewBag.employeetype, "ET_Id", "ET_Name"), htmlAttributes: new { @class = "form-control", style = "width:150px; margin-left:190px;margin-top:10px" })
    @Html.ValidationMessageFor(model => model.ET_Id, "", new { @class = "text-danger" })

    ReplyDelete
  3. Great One Mr.Venkat. Thanks a lot.

    ReplyDelete
  4. how to debug .ts and script file using vscode?

    ReplyDelete
  5. how to debug .ts and script file using vscode?

    ReplyDelete
  6. If anyone gets module error in ansi html page.Please follow the steps below:


    You have to completely uninstall node.js from your machine.



    First, do a cache clean using this command: "npm cache clean --force" without quotes.
    Second, i uninstalled node.js using iobit uninstaller software(i'm just being explicit it doesn't matter).

    Third, i deleted nmp-cache folder in C:\Users\YOURNAME\AppData\Roaming

    Fourth, i deleted .npmrc file from users\USER DIRECTORY(if you can't see this file, you need to show hidden files, folders, and drives from file explorer options).
    Fifth, i deleted all ionic files on same location(users\USER DIRECTORY ionic was previously installed).
    Now, restart your computer; visit https://nodejs.org and download a fresh node.js installer, during the installation you'll be asked if you'd like to install additional tools for node.js, please skip and proceed to finish. Confirm you have successfully installed node.js, run this command: "node --version && npm --version" without quotes.

    ReplyDelete

It would be great if you can help share these free resources