Riley Lambert

Riley Lambert

1559617277

Angular 8 Update using Ng-Update & Angular CLI v8

In this article, you’ll learn about the required steps that you need to follow to appropriately migrate your existing Angular apps to Angular 8

Upgrade or update Angular 7 to Angular 8 is now easier than ever before, thanks to all the work that has been done in version 8 and the ng update command which allows you to update specific versions and dependencies.

Angular 8 is released with many new features for the core framework and the other libraries like Angular Material. The new version depends on the latest version of TypeScript and Node. Let’s see how we can update the CLI to Angular CLI 8 and upgrade an existing project from using version 7 to Angular 8.

What is ng update?

ng update is a command available from Angular CLI used to update your application and its dependencies. You can use it to update all packages in the package.json file via the --all option that could take true and false or specific versions via the --packages option. You can see all available commands from the official docs.

How to Update/Upgrade to Angular 8

For most use cases and thanks to the work done in Angular 8, you can upgrade to the latest release using one command:

$ ng update @angular/cli @angular/core 

If you have issues. You can also check update.angular.io for more details.

How to Update/Upgrade to Angular 7

You can find more details about the update process from the update.angular.io official website.

Thanks to all the improvements done in Angular 6, it’s now easier than ever to update to the latest version.

In most cases, you can update to v7 by running one simple command:

$ ng update @angular/cli @angular/core 

If you still need more details on the process, follow the next sections:

Updating from Angular 6 to Angular 7 (Basic Apps)

if your project is basic, you can simply try the following steps:

  • First, you need to remove the deprecated features of RxJS 6 using the auto-update rules from rxjs-tslint. You simply need to install the tool globally using the npm install -g rxjs-tslint command then run the rxjs-5-to-6-migrate -p src/tsconfig.app.json from the root of your project. Once it’s done you can remove the rxjs-compat library.
  • Finally you simply have to run the ng update @angular/cli @angular/core command to update to v7 the core framework and the CLI.

Updating Advanced Apps

If your project uses advanced APIs like HTTP, you need to replace the old HttpModule and the Http service (which was deprecated in v6) with the new HttpClientModule and the HttpClient service that brings a lot of new powerful features.

Also if your applicaton makes use of the Angular Service worker, you need to migrate any versionedFiles to the files array.

Aside from what’s stated above, you don’t need to perform any changes in your project to migrate from v6.1 to v7.

Instructions for Old Angular Versions

Throughout this tutorial guide, you’ll learn by example how you can update or migrate your Angular 5 project generated by Angular CLI to use Angular 6 (The latest version) and Angular CLI 6. We’ll take you step by step to upgrade your existing Angular 5 projects (can be also applied to Angular 2 or Angular 4) to use the latest Angular features and dependencies.

In nutshell, these are the steps:

  • Update your Node.js to version 8 or later required by Angular 6
  • Update Http to HttpClient introduced in Angular 4.3+
  • Update animations import from @angular/core to @angular/animations
  • Update or install the Angular CLI to version 6 globally and locally per project
  • Displays packages that need updating using ng update
  • Update core packages using ng update @angular/core
  • Update RxJS package using ng update rxjs
  • Update Angular Material, if used, using ng update @angular/material

Requirements

Before you can update/upgrade your Angular 5 project, make sure you have the following requirements:

  • NodeJS 8+ installed on your machine
  • You are using the new Angular 4.3+ HttpClient and HttpClientModule. If that’s not the case then don’t worry the process is simple and transparent just replace HttpModule with HttpClientModule and use Http with HttpClient
  • You are importing animations from @angular/animations instead of @angular/core

Installing or Updating the Angular CLI to Version 6

Updating the Angular CLI is easy and it’s a matter of installing the latest version from npm using the following command:

npm install -g @angular/cli 

You may need to add sudo depending on your npm configuration.

Also it goes without saying that you need Node.js 8+ and NPM installed on your system to be able to install and run Angular CLI 6.

Updating Angular 5 CLI to Version 6 (Method 2)

You can also uninstall the previous Angular CLI 5 version before you install the latest version using the following command:

npm uninstall -g angular-cli
npm cache clean   

Next run the npm install command globally:

npm install -g @angular/cli 

Upgrading Angular 4|5 Projects

First, start by installing the Angular CLI 6 locally using the following command (Make sure you are inside your project’s root folder):

npm install @angular/cli@latest 

Updating Configuration Files

There are many differences between Angular 4|5 and Angular 6 such as

  • Angular 6 uses angular.json instead of angular-cli.json.
  • Different versions of dependencies in package.json etc.

You can update different configuration files automatically by running the following command from the project’s root folder:

ng update @angular/cli 

Discovering Packages to Update

Angular CLI has a new utility that allows you to automatcially analyze your project’s package.json file and displays dependencies that need to be updated.

Using you terminal from the root folder of your Angular 5 project run the following command:

ng update 

This is an example output from this command:

Angular 8 Update using Ng-Update & Angular CLI v8

Upgrading Core Packages to Angular 6

Now you need to update the core packages/dependencies to Angular 6. Simply run the following command:

ng update @angular/core 

Upgrading RxJS

You can update RxJS using the ng update command:

ng update rxjs 

Upgrading Angular 2 Projects

Now how about existing Angular 2 projects, generated using the Angular CLI?

You can easily update them to use latest dependencies by following these instructions:

First check your versions of installed Angular CLI and other dependencies with:

ng --version 

In my case, I’m getting this output:

    @angular/cli: 1.0.0
    node: 7.9.0
    os: linux ia32
    @angular/animations: 4.1.2
    @angular/common: 4.1.2
    @angular/compiler: 4.1.2
    @angular/core: 4.1.2
    @angular/forms: 4.1.2
    @angular/http: 4.1.2
    @angular/platform-browser: 4.1.2
    @angular/platform-browser-dynamic: 4.1.2
    @angular/platform-server: 4.1.2
    @angular/router: 4.1.2
    @angular/cli: 1.0.0
    @angular/compiler-cli: 4.1.2

Since we have installed the latest Angular CLI globally. If you try to serve your project you’ll be getting a warning of version mismatch:

Your global Angular CLI version (1.2.5) is greater than your local
version (1.0.0). The local Angular CLI version is used.
To disable this warning use "ng set --global warnings.versionMismatch=false".

Next open your project package.json file then change the Angular CLI version: You can check the npm info page for Angular CLI package from this link to find out the latest version.

 "@angular/cli": "1.2.5" 

Next, delete your project node_modules folder and run the following command:

npm install 

You don’t need to change the versions of the other dependencies, the Angular CLI will take care of fetching latest versions.

Now you can check again for installed versions with:

ng --version 

In my case I’m getting this output:

    @angular/cli: 1.2.5
    node: 7.9.0
    os: linux ia32
    @angular/animations: 4.3.1
    @angular/common: 4.3.1
    @angular/compiler: 4.3.1
    @angular/core: 4.3.1
    @angular/forms: 4.3.1
    @angular/http: 4.3.1
    @angular/platform-browser: 4.3.1
    @angular/platform-browser-dynamic: 4.3.1
    @angular/platform-server: 4.3.1
    @angular/router: 4.3.1
    @angular/cli: 1.2.5
    @angular/compiler-cli: 4.3.1

As you can see Angular 4.3.1 is installed.

Conclusion

In this tutorial, we’ve seen step by step how to ng update the Angular CLI to version 6, how to upgrade an existing Angular 2 to Angular 4 and An Angular 4|5 to Angular 6.

#angular #javascript

What is GEEK

Buddha Community

Angular 8 Update using Ng-Update & Angular CLI v8
Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Clara  Gutmann

Clara Gutmann

1598719980

How To Update Angular CLI | Angular 8 CLI Upgrade

Upgrade Angular CLI to version 8 required some steps. To update Angular CLI to a new version, you must update both the global package and your project’s local package dependencies. You can perform a necessary update to the current stable release of the core framework and CLI by running ng update @angular/cli @angular/core. To update to the next beta or pre-release version, use the –next=true option.

To update from one major version to another, use the format ng update @angular/cli@^<major_version> @angular/core@^<major_version>.

We recommend that you always update to the latest patch version, as it contains fixes we released since the initial major release. For example, use the following command to take the most recent 8.x.x version and use that to update. ng update @angular/cli@^8 @angular/core@^8

#angular 8 #angular 8 cli

Clara  Gutmann

Clara Gutmann

1598716260

Angular 8 CRUD Example | Angular 8 Tutorial For Beginners

Angular 8 CRUD is a basic operation to learn Angular from scratch. We will learn how to build a small web application that inserts, read data, update and delete data from the database. You will learn how to create a MEAN Stack web application. In this Angular 8 Tutorial Example, you will learn a new framework by building a crud application.

New features of Angular 8

You check out the new features in brief on my  Angular 8 New Features post.

I have designed this Angular 8 CRUD Tutorial, especially for newcomers, and it will help you to up and running with the latest version of Angular, which is right now 8.

#angular #angular 8 #angular 8 crud

Riley Lambert

Riley Lambert

1559617277

Angular 8 Update using Ng-Update & Angular CLI v8

In this article, you’ll learn about the required steps that you need to follow to appropriately migrate your existing Angular apps to Angular 8

Upgrade or update Angular 7 to Angular 8 is now easier than ever before, thanks to all the work that has been done in version 8 and the ng update command which allows you to update specific versions and dependencies.

Angular 8 is released with many new features for the core framework and the other libraries like Angular Material. The new version depends on the latest version of TypeScript and Node. Let’s see how we can update the CLI to Angular CLI 8 and upgrade an existing project from using version 7 to Angular 8.

What is ng update?

ng update is a command available from Angular CLI used to update your application and its dependencies. You can use it to update all packages in the package.json file via the --all option that could take true and false or specific versions via the --packages option. You can see all available commands from the official docs.

How to Update/Upgrade to Angular 8

For most use cases and thanks to the work done in Angular 8, you can upgrade to the latest release using one command:

$ ng update @angular/cli @angular/core 

If you have issues. You can also check update.angular.io for more details.

How to Update/Upgrade to Angular 7

You can find more details about the update process from the update.angular.io official website.

Thanks to all the improvements done in Angular 6, it’s now easier than ever to update to the latest version.

In most cases, you can update to v7 by running one simple command:

$ ng update @angular/cli @angular/core 

If you still need more details on the process, follow the next sections:

Updating from Angular 6 to Angular 7 (Basic Apps)

if your project is basic, you can simply try the following steps:

  • First, you need to remove the deprecated features of RxJS 6 using the auto-update rules from rxjs-tslint. You simply need to install the tool globally using the npm install -g rxjs-tslint command then run the rxjs-5-to-6-migrate -p src/tsconfig.app.json from the root of your project. Once it’s done you can remove the rxjs-compat library.
  • Finally you simply have to run the ng update @angular/cli @angular/core command to update to v7 the core framework and the CLI.

Updating Advanced Apps

If your project uses advanced APIs like HTTP, you need to replace the old HttpModule and the Http service (which was deprecated in v6) with the new HttpClientModule and the HttpClient service that brings a lot of new powerful features.

Also if your applicaton makes use of the Angular Service worker, you need to migrate any versionedFiles to the files array.

Aside from what’s stated above, you don’t need to perform any changes in your project to migrate from v6.1 to v7.

Instructions for Old Angular Versions

Throughout this tutorial guide, you’ll learn by example how you can update or migrate your Angular 5 project generated by Angular CLI to use Angular 6 (The latest version) and Angular CLI 6. We’ll take you step by step to upgrade your existing Angular 5 projects (can be also applied to Angular 2 or Angular 4) to use the latest Angular features and dependencies.

In nutshell, these are the steps:

  • Update your Node.js to version 8 or later required by Angular 6
  • Update Http to HttpClient introduced in Angular 4.3+
  • Update animations import from @angular/core to @angular/animations
  • Update or install the Angular CLI to version 6 globally and locally per project
  • Displays packages that need updating using ng update
  • Update core packages using ng update @angular/core
  • Update RxJS package using ng update rxjs
  • Update Angular Material, if used, using ng update @angular/material

Requirements

Before you can update/upgrade your Angular 5 project, make sure you have the following requirements:

  • NodeJS 8+ installed on your machine
  • You are using the new Angular 4.3+ HttpClient and HttpClientModule. If that’s not the case then don’t worry the process is simple and transparent just replace HttpModule with HttpClientModule and use Http with HttpClient
  • You are importing animations from @angular/animations instead of @angular/core

Installing or Updating the Angular CLI to Version 6

Updating the Angular CLI is easy and it’s a matter of installing the latest version from npm using the following command:

npm install -g @angular/cli 

You may need to add sudo depending on your npm configuration.

Also it goes without saying that you need Node.js 8+ and NPM installed on your system to be able to install and run Angular CLI 6.

Updating Angular 5 CLI to Version 6 (Method 2)

You can also uninstall the previous Angular CLI 5 version before you install the latest version using the following command:

npm uninstall -g angular-cli
npm cache clean   

Next run the npm install command globally:

npm install -g @angular/cli 

Upgrading Angular 4|5 Projects

First, start by installing the Angular CLI 6 locally using the following command (Make sure you are inside your project’s root folder):

npm install @angular/cli@latest 

Updating Configuration Files

There are many differences between Angular 4|5 and Angular 6 such as

  • Angular 6 uses angular.json instead of angular-cli.json.
  • Different versions of dependencies in package.json etc.

You can update different configuration files automatically by running the following command from the project’s root folder:

ng update @angular/cli 

Discovering Packages to Update

Angular CLI has a new utility that allows you to automatcially analyze your project’s package.json file and displays dependencies that need to be updated.

Using you terminal from the root folder of your Angular 5 project run the following command:

ng update 

This is an example output from this command:

Angular 8 Update using Ng-Update & Angular CLI v8

Upgrading Core Packages to Angular 6

Now you need to update the core packages/dependencies to Angular 6. Simply run the following command:

ng update @angular/core 

Upgrading RxJS

You can update RxJS using the ng update command:

ng update rxjs 

Upgrading Angular 2 Projects

Now how about existing Angular 2 projects, generated using the Angular CLI?

You can easily update them to use latest dependencies by following these instructions:

First check your versions of installed Angular CLI and other dependencies with:

ng --version 

In my case, I’m getting this output:

    @angular/cli: 1.0.0
    node: 7.9.0
    os: linux ia32
    @angular/animations: 4.1.2
    @angular/common: 4.1.2
    @angular/compiler: 4.1.2
    @angular/core: 4.1.2
    @angular/forms: 4.1.2
    @angular/http: 4.1.2
    @angular/platform-browser: 4.1.2
    @angular/platform-browser-dynamic: 4.1.2
    @angular/platform-server: 4.1.2
    @angular/router: 4.1.2
    @angular/cli: 1.0.0
    @angular/compiler-cli: 4.1.2

Since we have installed the latest Angular CLI globally. If you try to serve your project you’ll be getting a warning of version mismatch:

Your global Angular CLI version (1.2.5) is greater than your local
version (1.0.0). The local Angular CLI version is used.
To disable this warning use "ng set --global warnings.versionMismatch=false".

Next open your project package.json file then change the Angular CLI version: You can check the npm info page for Angular CLI package from this link to find out the latest version.

 "@angular/cli": "1.2.5" 

Next, delete your project node_modules folder and run the following command:

npm install 

You don’t need to change the versions of the other dependencies, the Angular CLI will take care of fetching latest versions.

Now you can check again for installed versions with:

ng --version 

In my case I’m getting this output:

    @angular/cli: 1.2.5
    node: 7.9.0
    os: linux ia32
    @angular/animations: 4.3.1
    @angular/common: 4.3.1
    @angular/compiler: 4.3.1
    @angular/core: 4.3.1
    @angular/forms: 4.3.1
    @angular/http: 4.3.1
    @angular/platform-browser: 4.3.1
    @angular/platform-browser-dynamic: 4.3.1
    @angular/platform-server: 4.3.1
    @angular/router: 4.3.1
    @angular/cli: 1.2.5
    @angular/compiler-cli: 4.3.1

As you can see Angular 4.3.1 is installed.

Conclusion

In this tutorial, we’ve seen step by step how to ng update the Angular CLI to version 6, how to upgrade an existing Angular 2 to Angular 4 and An Angular 4|5 to Angular 6.

#angular #javascript

Clara  Gutmann

Clara Gutmann

1598727360

Angular 8 Updates And Summary of New Features

Angular 8 Updates And Summary of New Features is today’s topic. Angular 8 arrives with an impressive list of changes and improvements including the much-anticipated Ivy compiler as an opt-in feature. You can check out  Angular 7 features and updates if you have not seen yet. In this blog, we have written some articles about  Angular 7 Crud,  Angular 7 Routing,  Angular ngClass,  Angular ngFor.

Angular 8 Updates And Summary

See the following updates.

TypeScript 3.4

Angular 8.0 is now supported TypeScript 3.4, and even requires it, so you will need to upgrade.

You can look at what  TypeScript 3.3 and  TypeScript 3.4 brings on the table on official Microsoft blog.

#angular #typescript #angular 7 crud #angular 7 routing #angular 8