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
Chloe  Butler

Chloe Butler

1667425440

Pdf2gerb: Perl Script Converts PDF Files to Gerber format

pdf2gerb

Perl script converts PDF files to Gerber format

Pdf2Gerb generates Gerber 274X photoplotting and Excellon drill files from PDFs of a PCB. Up to three PDFs are used: the top copper layer, the bottom copper layer (for 2-sided PCBs), and an optional silk screen layer. The PDFs can be created directly from any PDF drawing software, or a PDF print driver can be used to capture the Print output if the drawing software does not directly support output to PDF.

The general workflow is as follows:

  1. Design the PCB using your favorite CAD or drawing software.
  2. Print the top and bottom copper and top silk screen layers to a PDF file.
  3. Run Pdf2Gerb on the PDFs to create Gerber and Excellon files.
  4. Use a Gerber viewer to double-check the output against the original PCB design.
  5. Make adjustments as needed.
  6. Submit the files to a PCB manufacturer.

Please note that Pdf2Gerb does NOT perform DRC (Design Rule Checks), as these will vary according to individual PCB manufacturer conventions and capabilities. Also note that Pdf2Gerb is not perfect, so the output files must always be checked before submitting them. As of version 1.6, Pdf2Gerb supports most PCB elements, such as round and square pads, round holes, traces, SMD pads, ground planes, no-fill areas, and panelization. However, because it interprets the graphical output of a Print function, there are limitations in what it can recognize (or there may be bugs).

See docs/Pdf2Gerb.pdf for install/setup, config, usage, and other info.


pdf2gerb_cfg.pm

#Pdf2Gerb config settings:
#Put this file in same folder/directory as pdf2gerb.pl itself (global settings),
#or copy to another folder/directory with PDFs if you want PCB-specific settings.
#There is only one user of this file, so we don't need a custom package or namespace.
#NOTE: all constants defined in here will be added to main namespace.
#package pdf2gerb_cfg;

use strict; #trap undef vars (easier debug)
use warnings; #other useful info (easier debug)


##############################################################################################
#configurable settings:
#change values here instead of in main pfg2gerb.pl file

use constant WANT_COLORS => ($^O !~ m/Win/); #ANSI colors no worky on Windows? this must be set < first DebugPrint() call

#just a little warning; set realistic expectations:
#DebugPrint("${\(CYAN)}Pdf2Gerb.pl ${\(VERSION)}, $^O O/S\n${\(YELLOW)}${\(BOLD)}${\(ITALIC)}This is EXPERIMENTAL software.  \nGerber files MAY CONTAIN ERRORS.  Please CHECK them before fabrication!${\(RESET)}", 0); #if WANT_DEBUG

use constant METRIC => FALSE; #set to TRUE for metric units (only affect final numbers in output files, not internal arithmetic)
use constant APERTURE_LIMIT => 0; #34; #max #apertures to use; generate warnings if too many apertures are used (0 to not check)
use constant DRILL_FMT => '2.4'; #'2.3'; #'2.4' is the default for PCB fab; change to '2.3' for CNC

use constant WANT_DEBUG => 0; #10; #level of debug wanted; higher == more, lower == less, 0 == none
use constant GERBER_DEBUG => 0; #level of debug to include in Gerber file; DON'T USE FOR FABRICATION
use constant WANT_STREAMS => FALSE; #TRUE; #save decompressed streams to files (for debug)
use constant WANT_ALLINPUT => FALSE; #TRUE; #save entire input stream (for debug ONLY)

#DebugPrint(sprintf("${\(CYAN)}DEBUG: stdout %d, gerber %d, want streams? %d, all input? %d, O/S: $^O, Perl: $]${\(RESET)}\n", WANT_DEBUG, GERBER_DEBUG, WANT_STREAMS, WANT_ALLINPUT), 1);
#DebugPrint(sprintf("max int = %d, min int = %d\n", MAXINT, MININT), 1); 

#define standard trace and pad sizes to reduce scaling or PDF rendering errors:
#This avoids weird aperture settings and replaces them with more standardized values.
#(I'm not sure how photoplotters handle strange sizes).
#Fewer choices here gives more accurate mapping in the final Gerber files.
#units are in inches
use constant TOOL_SIZES => #add more as desired
(
#round or square pads (> 0) and drills (< 0):
    .010, -.001,  #tiny pads for SMD; dummy drill size (too small for practical use, but needed so StandardTool will use this entry)
    .031, -.014,  #used for vias
    .041, -.020,  #smallest non-filled plated hole
    .051, -.025,
    .056, -.029,  #useful for IC pins
    .070, -.033,
    .075, -.040,  #heavier leads
#    .090, -.043,  #NOTE: 600 dpi is not high enough resolution to reliably distinguish between .043" and .046", so choose 1 of the 2 here
    .100, -.046,
    .115, -.052,
    .130, -.061,
    .140, -.067,
    .150, -.079,
    .175, -.088,
    .190, -.093,
    .200, -.100,
    .220, -.110,
    .160, -.125,  #useful for mounting holes
#some additional pad sizes without holes (repeat a previous hole size if you just want the pad size):
    .090, -.040,  #want a .090 pad option, but use dummy hole size
    .065, -.040, #.065 x .065 rect pad
    .035, -.040, #.035 x .065 rect pad
#traces:
    .001,  #too thin for real traces; use only for board outlines
    .006,  #minimum real trace width; mainly used for text
    .008,  #mainly used for mid-sized text, not traces
    .010,  #minimum recommended trace width for low-current signals
    .012,
    .015,  #moderate low-voltage current
    .020,  #heavier trace for power, ground (even if a lighter one is adequate)
    .025,
    .030,  #heavy-current traces; be careful with these ones!
    .040,
    .050,
    .060,
    .080,
    .100,
    .120,
);
#Areas larger than the values below will be filled with parallel lines:
#This cuts down on the number of aperture sizes used.
#Set to 0 to always use an aperture or drill, regardless of size.
use constant { MAX_APERTURE => max((TOOL_SIZES)) + .004, MAX_DRILL => -min((TOOL_SIZES)) + .004 }; #max aperture and drill sizes (plus a little tolerance)
#DebugPrint(sprintf("using %d standard tool sizes: %s, max aper %.3f, max drill %.3f\n", scalar((TOOL_SIZES)), join(", ", (TOOL_SIZES)), MAX_APERTURE, MAX_DRILL), 1);

#NOTE: Compare the PDF to the original CAD file to check the accuracy of the PDF rendering and parsing!
#for example, the CAD software I used generated the following circles for holes:
#CAD hole size:   parsed PDF diameter:      error:
#  .014                .016                +.002
#  .020                .02267              +.00267
#  .025                .026                +.001
#  .029                .03167              +.00267
#  .033                .036                +.003
#  .040                .04267              +.00267
#This was usually ~ .002" - .003" too big compared to the hole as displayed in the CAD software.
#To compensate for PDF rendering errors (either during CAD Print function or PDF parsing logic), adjust the values below as needed.
#units are pixels; for example, a value of 2.4 at 600 dpi = .0004 inch, 2 at 600 dpi = .0033"
use constant
{
    HOLE_ADJUST => -0.004 * 600, #-2.6, #holes seemed to be slightly oversized (by .002" - .004"), so shrink them a little
    RNDPAD_ADJUST => -0.003 * 600, #-2, #-2.4, #round pads seemed to be slightly oversized, so shrink them a little
    SQRPAD_ADJUST => +0.001 * 600, #+.5, #square pads are sometimes too small by .00067, so bump them up a little
    RECTPAD_ADJUST => 0, #(pixels) rectangular pads seem to be okay? (not tested much)
    TRACE_ADJUST => 0, #(pixels) traces seemed to be okay?
    REDUCE_TOLERANCE => .001, #(inches) allow this much variation when reducing circles and rects
};

#Also, my CAD's Print function or the PDF print driver I used was a little off for circles, so define some additional adjustment values here:
#Values are added to X/Y coordinates; units are pixels; for example, a value of 1 at 600 dpi would be ~= .002 inch
use constant
{
    CIRCLE_ADJUST_MINX => 0,
    CIRCLE_ADJUST_MINY => -0.001 * 600, #-1, #circles were a little too high, so nudge them a little lower
    CIRCLE_ADJUST_MAXX => +0.001 * 600, #+1, #circles were a little too far to the left, so nudge them a little to the right
    CIRCLE_ADJUST_MAXY => 0,
    SUBST_CIRCLE_CLIPRECT => FALSE, #generate circle and substitute for clip rects (to compensate for the way some CAD software draws circles)
    WANT_CLIPRECT => TRUE, #FALSE, #AI doesn't need clip rect at all? should be on normally?
    RECT_COMPLETION => FALSE, #TRUE, #fill in 4th side of rect when 3 sides found
};

#allow .012 clearance around pads for solder mask:
#This value effectively adjusts pad sizes in the TOOL_SIZES list above (only for solder mask layers).
use constant SOLDER_MARGIN => +.012; #units are inches

#line join/cap styles:
use constant
{
    CAP_NONE => 0, #butt (none); line is exact length
    CAP_ROUND => 1, #round cap/join; line overhangs by a semi-circle at either end
    CAP_SQUARE => 2, #square cap/join; line overhangs by a half square on either end
    CAP_OVERRIDE => FALSE, #cap style overrides drawing logic
};
    
#number of elements in each shape type:
use constant
{
    RECT_SHAPELEN => 6, #x0, y0, x1, y1, count, "rect" (start, end corners)
    LINE_SHAPELEN => 6, #x0, y0, x1, y1, count, "line" (line seg)
    CURVE_SHAPELEN => 10, #xstart, ystart, x0, y0, x1, y1, xend, yend, count, "curve" (bezier 2 points)
    CIRCLE_SHAPELEN => 5, #x, y, 5, count, "circle" (center + radius)
};
#const my %SHAPELEN =
#Readonly my %SHAPELEN =>
our %SHAPELEN =
(
    rect => RECT_SHAPELEN,
    line => LINE_SHAPELEN,
    curve => CURVE_SHAPELEN,
    circle => CIRCLE_SHAPELEN,
);

#panelization:
#This will repeat the entire body the number of times indicated along the X or Y axes (files grow accordingly).
#Display elements that overhang PCB boundary can be squashed or left as-is (typically text or other silk screen markings).
#Set "overhangs" TRUE to allow overhangs, FALSE to truncate them.
#xpad and ypad allow margins to be added around outer edge of panelized PCB.
use constant PANELIZE => {'x' => 1, 'y' => 1, 'xpad' => 0, 'ypad' => 0, 'overhangs' => TRUE}; #number of times to repeat in X and Y directions

# Set this to 1 if you need TurboCAD support.
#$turboCAD = FALSE; #is this still needed as an option?

#CIRCAD pad generation uses an appropriate aperture, then moves it (stroke) "a little" - we use this to find pads and distinguish them from PCB holes. 
use constant PAD_STROKE => 0.3; #0.0005 * 600; #units are pixels
#convert very short traces to pads or holes:
use constant TRACE_MINLEN => .001; #units are inches
#use constant ALWAYS_XY => TRUE; #FALSE; #force XY even if X or Y doesn't change; NOTE: needs to be TRUE for all pads to show in FlatCAM and ViewPlot
use constant REMOVE_POLARITY => FALSE; #TRUE; #set to remove subtractive (negative) polarity; NOTE: must be FALSE for ground planes

#PDF uses "points", each point = 1/72 inch
#combined with a PDF scale factor of .12, this gives 600 dpi resolution (1/72 * .12 = 600 dpi)
use constant INCHES_PER_POINT => 1/72; #0.0138888889; #multiply point-size by this to get inches

# The precision used when computing a bezier curve. Higher numbers are more precise but slower (and generate larger files).
#$bezierPrecision = 100;
use constant BEZIER_PRECISION => 36; #100; #use const; reduced for faster rendering (mainly used for silk screen and thermal pads)

# Ground planes and silk screen or larger copper rectangles or circles are filled line-by-line using this resolution.
use constant FILL_WIDTH => .01; #fill at most 0.01 inch at a time

# The max number of characters to read into memory
use constant MAX_BYTES => 10 * M; #bumped up to 10 MB, use const

use constant DUP_DRILL1 => TRUE; #FALSE; #kludge: ViewPlot doesn't load drill files that are too small so duplicate first tool

my $runtime = time(); #Time::HiRes::gettimeofday(); #measure my execution time

print STDERR "Loaded config settings from '${\(__FILE__)}'.\n";
1; #last value must be truthful to indicate successful load


#############################################################################################
#junk/experiment:

#use Package::Constants;
#use Exporter qw(import); #https://perldoc.perl.org/Exporter.html

#my $caller = "pdf2gerb::";

#sub cfg
#{
#    my $proto = shift;
#    my $class = ref($proto) || $proto;
#    my $settings =
#    {
#        $WANT_DEBUG => 990, #10; #level of debug wanted; higher == more, lower == less, 0 == none
#    };
#    bless($settings, $class);
#    return $settings;
#}

#use constant HELLO => "hi there2"; #"main::HELLO" => "hi there";
#use constant GOODBYE => 14; #"main::GOODBYE" => 12;

#print STDERR "read cfg file\n";

#our @EXPORT_OK = Package::Constants->list(__PACKAGE__); #https://www.perlmonks.org/?node_id=1072691; NOTE: "_OK" skips short/common names

#print STDERR scalar(@EXPORT_OK) . " consts exported:\n";
#foreach(@EXPORT_OK) { print STDERR "$_\n"; }
#my $val = main::thing("xyz");
#print STDERR "caller gave me $val\n";
#foreach my $arg (@ARGV) { print STDERR "arg $arg\n"; }

Download Details:

Author: swannman
Source Code: https://github.com/swannman/pdf2gerb

License: GPL-3.0 license

#perl 

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