What’s new in Angular 7?

<strong style="color: rgb(118, 131, 143);">Exploring what's new with Angular 7 and how to go about upgrading your apps from Angular 6 to Angular 7</strong>

Exploring what's new with Angular 7 and how to go about upgrading your apps from Angular 6 to Angular 7

JavaScript has proved over and over again it is going nowhere soon and that statement is even made much truer by the recent release of Angular 7. Angular is a framework used to build mobile and web applications. Its first version was released by Google in 2012 and it has seen tremendous growth ever since. Six years after, it is getting its 7th release.

While previous major versions have introduced a lot of changes to the framework itself, this version prides itself more on performance and improved developer experiences. In the rest of this post, I would be showing you the most interesting changes this release brings.

The latest and shiniest tools

Angular stands on the shoulder of other awesome projects and its 7th version have been updated to be compatible with the latest versions of those projects. The most interesting ones on this list have:

  • Node 10.
  • Typescript 3.1
  • RxJS 6.3
CLI improvements

This is probably one of the first places where developers would notice the available changes. The ng tool has received a major upgrade in the sense that it now helps developers to speed up the process of starting a new project. For example, while starting a new project, you will be prompted for your preferred way of writing CSS (SCSS, SASS, LESS ) and if you would like to add routing to your app.

It even gets much more interesting when you try to add some other packages like @angular/material via ng add @angular/material. The ng tool would prompt the user to answer some questions to help it scaffold some changes. As at the time of writing this article, it would ask the following:

  • Enter a prebuilt theme name, or “custom” for a custom theme:
  • Set up HammerJS for gesture recognition? (Y/n)
  • Set up browser animations for Angular Material? (Y/n)

This is possible via a tool called Schematics. Schematics is basically a way to apply changes to a project. This change might include the creation of a new component. So what about Schematics? The ng cli now supports Schematics out of the box. This would allow any package that publishes Schematics to include prompts such as the above. Just add an x-prompt key to a Schematics collection and all is good.

You can read more on Schematics here.

Application budgets

Budgets are one of the lesser known features of the framework. A budget is basically telling Angular “I know I am building this cool nifty app, but I don’t ever want to ship an X MB file to production”.

Budgets are not a new feature but they are getting more pronounced in this version as they are automatically set up in projects started by ng new projectName.

Here is an example budget

    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "1mb",
        "maximumError": "3mb"
      }
    ]

With the above setup, a warning would be generated when the initial build size is greater than 1MB and an error when greater than 3MB. This is not the end of it all, you can configure the size of a specific bundle, the entire app e.t.c. Take a look at the available options here.

Application performance

A common mistake made by developers is the inclusion of the reflect-metadata polyfill in the production build. And in all honesty, that is wrong since reflect-metadata is basically runtime reflection on types – obviously better for development, not production, it increases the size of the generated bundle and reduces performance. While it can be documented to make sure to remove reflect-metadata from the build, developers can still make such a mistake and since Angular 7 is extremely focused on speed and performance, it has gone ahead to automatically include them only when needed. The interesting part is how does Angular decide when to include or exclude it? It does that based on the build context. If making a JIT compilation – ng build or ng serve-, it includes them since this context is for development. But if making an AOT compilation – ng build –prod-, it doesn’t as this is a production bundle.

You can learn more about the available compilation types provided by Angular in its documentation.

DoModule lifecycle interface

Lifecycle hooks are a major part of Angular’s module and components. And this update makes that extremely clear for modules. Angular 7 adds a DoBootstrap interface so as to compliment the already existing ngDoBootstrapmethod that allows for manual bootstrapping. While this might pass as a trivial thing, it makes the ngBootstrapcompatible with other lifecycle events that do have backing interfaces. You can look through the motivation for this on the issue that requested this functionality.

Material design

The material design specification received major updates this year and it is just the right thing to adopt the changes for newer projects – except you have specific reasons not to. That is what Angular offers in this new release.

Angular material, the official material design implementation has been updated accordingly to match the specification.

Virtual scrolling

It is a common scenario. You need to build a list that can potentially grow to thousands of items but needs to be displayed, take Tweets or Facebook’s posts as an example. There are multiple approaches to this: pagination, appending items to the list as soon as the user reaches the bottom of the page and virtual scrolling.

The major idea behind virtual scrolling is rendering only visible items that fit the current viewport and replacing them on the fly with newer ones thus building fast users’ experiences. The component dev kit now contains an implementation of virtual scrolling.

    <cdk-virtual-scroll-viewport class="list-container list-group" autosize>
<div *cdkVirtualFor="let size of dataFromComponent; let i = index">
Item {{i}}
</div>
</cdk-virtual-scroll-viewport>

Drag and drop

This is another feature provided by the Angular CDK. This module allows the creation of a drag-drop UI which can be used for dragging, sorting and transferring items. It gives the user an API to interact with the item being dragged such as touch and mouse event detectors.

You can read more about drag and drop here.

Ivy template renderer

While this is not yet officially released as backward compatibility with existing applications is being investigated, it is worth discussing as this would be the third time Angular would change its renderer. In version 4, it switched to a new renderer (View Engine) from the original one.

View engine is awesome, why rewrite it?

  • Speed
  • Smaller
  • Simpler

There should no compatibility issues once this is finally released.

Updating to Version 7?

Updating for most users on version 6 should be ng update @angular/cli @angular/core. But as always, it is best to check if dependencies of your application also include changes that need to be made.

More information and an upgrade guide can be found at the Angular update guide website.

What are the best alternatives for angular js?

<img src="https://moriohcdn.b-cdn.net/193902114c.png">There are numerous frameworks and libraries used across the globe. If not angular, there are platforms like React, Vue, Aurelia and so on for app development.

There are numerous frameworks and libraries used across the globe. If not angular, there are platforms like React, Vue, Aurelia and so on for app development.

Angular 8 Node & Express JS File Upload

Angular 8 Node & Express JS File Upload

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.

We are also going to take the help of Node.js to create the backend server for Image or File uploading demo. Initially, we’ll set up an Angular 8 web app from scratch using Angular CLI. You must have Node.js and Angular CLI installed in your system.

We’ll create the local server using Node.js and multer middleware. Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. Once we are done setting up front-end and backend for our File uploading demo then, we’ll understand step by step how to configure file uploading in Angular 8 app using Node server.

Prerequisite

In order to show you Angular 8 File upload demo, you must have Node.js and Angular CLI installed in your system. If not then check out this tutorial: Set up Node JS

Run following command to install Angular CLI:

npm install @angular/cli -g

Install Angular 8 App

Run command to install Angular 8 project:

ng new angular-node-file-upload

# ? Would you like to add Angular routing? No
# ? Which stylesheet format would you like to use? CSS
cd angular-node-file-upload

Show Alert Messages When File Uploaded

We are going to install and configure ngx-toastr an NPM package which helps in showing the alert message when the file is uploaded on the node server.

npm install ngx-toastr --save

The ngx-toastr NPM module requires @angular/animations dependency:

npm install @angular/animations --save

Then, add the ngx-toastr CSS in angular.json file:

"styles": [
    "src/styles.css",
    "node_modules/ngx-toastr/toastr.css"
]

Import BrowserAnimationsModule and ToastrModule in app.module.ts file:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
 
@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot() // ToastrModule added
  ]
})

export class AppModule { }

Install & Configure ng-file-upload Directive

In this step, we’ll Install and configure ng-file-upload library in Angular 8 app. Run command to install ng-file-upload library.

npm install ng2-file-upload

Once the ng2-file-upload directive is installed, then import the FileSelectDirective and FormsModule in app.module.ts. We need FormsModule service so that we can create the file uploading component in Angular.

import { FileSelectDirective } from 'ng2-file-upload';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    FileSelectDirective
  ],
  imports: [
    FormsModule
  ]
})

export class AppModule { }

Setting Up Node Backend for File Upload Demo

To upload the file on the server, we need to set up a separate backend. In this tutorial, we will be using Node & Express js to create server locally along with multer, express js, body-parser, and dotenv libraries.

Run command to create backend folder in Angular app’s root directory:

mkdir backend && cd backend

In the next step, create a specific package.json file.

npm init

Run command to install required dependencies:

npm install express cors body-parser multer dotenv --save

In order to get rid from starting the server again and again, install nodemon NPM package. Use –-save-dev along with the npm command to register in the devDependencies array. It will make it available for development purpose only.

npm install nodemon --save-dev

Have a look at final pacakge.json file for file upload demo backend:

{
  "name": "angular-node-file-upload",
  "version": "1.0.0",
  "description": "Angualr 8 file upload demo app",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "Digamber Rawat",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.0.0",
    "express": "^4.17.1",
    "multer": "^1.4.1"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  }
}

Create a file by the name of server.js inside backend folder:

Configure Server.js

To configure our backend we need to create a server.js file. In this file we’ll keep our backend server’s settings.

touch server.js

Now, paste the following code in backend > server.js file:

const express = require('express'),
  path = require('path'),
  cors = require('cors'),
  multer = require('multer'),
  bodyParser = require('body-parser');

// File upload settings  
const PATH = './uploads';

let storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, PATH);
  },
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now())
  }
});

let upload = multer({
  storage: storage
});

// Express settings
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

app.get('/api', function (req, res) {
  res.end('File catcher');
});

// POST File
app.post('/api/upload', upload.single('image'), function (req, res) {
  if (!req.file) {
    console.log("No file is available!");
    return res.send({
      success: false
    });

  } else {
    console.log('File is available!');
    return res.send({
      success: true
    })
  }
});

// Create PORT
const PORT = process.env.PORT || 8080;
const server = app.listen(PORT, () => {
  console.log('Connected to port ' + PORT)
})

// Find 404 and hand over to error handler
app.use((req, res, next) => {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  console.error(err.message);
  if (!err.statusCode) err.statusCode = 500;
  res.status(err.statusCode).send(err.message);
});

Now, while staying in the backend folder run the below command to start the backend server:

nodemon server.js

If everything goes fine then you’ll get the following output:

[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server.js`
Connected to port 8080

Create Angular 8 File Upload Component

In this last step, we are going to create a file upload component in Angular 8 app using Express js API.

Get into the app.component.ts file and include the following code:

import { Component, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { ToastrService } from 'ngx-toastr';

const URL = 'http://localhost:8080/api/upload';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  public uploader: FileUploader = new FileUploader({
    url: URL,
    itemAlias: 'image'
  });

  constructor(private toastr: ToastrService) { }

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    };
    this.uploader.onCompleteItem = (item: any, status: any) => {
      console.log('Uploaded File Details:', item);
      this.toastr.success('File successfully uploaded!');
    };
  }

}

Go to app.component.html file and add the given below code:

<div class="wrapper">
  <h2>Angular Image Upload Demo</h2>

  <div class="file-upload">
    <input type="file" name="image" ng2FileSelect [uploader]="uploader" accept="image/x-png,image/gif,image/jpeg" />
    <button type="button" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
      Upload
    </button>
  </div>

</div>

Now, It’s time to start the Angular 8 app to check out the File upload demo in the browser. Run the following command:

ng serve --open

Make sure your NODE server must be running to manage the backend.

When you upload the image from front-end you’ll see your image files are saving inside the backend > uploads folder.

Conclusion

In this Angular 8 tutorial, we barely scratched the surface related to file uploading in a Node application. There are various other methods available on the internet through which you can achieve file uploading task quickly. However, this tutorial is suitable for beginners developers. I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.

Angular JS Development Company

If you’re finding AngularJS Development Company for consultation or Development, your search ends here at Data EximIT 

🔗 Click here to know more: AngularJS Development