Whats New in Angular 7.x

Most awaited Angular 7.0 is out and looks to be in stable mode ( In fact stable version 7.1.2 is already available !!!). Lets See Whats New there.

Angular CLI Prompt

Start forgetting CLI Options. CLI offers interactive prompts on several commands.

For Example, while creating new project one can see below options:

E:\ng new myProject 
?What name would you like to use for the project?
? Would you like to add Angular routing? y/N
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS
  SCSS   [ http://sass-lang.com   ]
  SASS   [ http://sass-lang.com   ]
  LESS   [ http://lesscss.org     ]
  Stylus [ http://stylus-lang.com ]

One can set CSS pre-processor from CSS, SCSS, SASS, LESS and Stylus by moving arrow keys.

Note: All these options were available as flags (ng new myProject --style=scss), but one has to remember it.

Custom schematic can also be added for example in ng new.

New Flags

ng serve

A new flag added --verbose for ng server and ng build, that gives information about how much time each task took.

ng build

A new flag added --profile, that helps to improve build times. It generates two files

• chrome-profiler-events.json - Profile Events for Chrome Profiler using Dev Tools.
• speed-measure-plugin.json - Speed Measure WebPack Plugin provides information about each plugin time.
• CPU Profiling - Helper plugin created for v-8 profiler.

ng generate component

A new flag added --viewEncapsulation = (Emulated|Native|None|ShadowDom)

ng new

A new flag added --minimal which generates a workspace with a project, but with the bare minimum: no unit tests or e2e tests, no TSLint either, and it uses inline styles and templates in components. Useful for proof of concept purpose.

A new flag added --no-create-application, which creates a workspace with the NPM, TypeScript, TSLint and Angular CLI configurations, but with no application (so no src and e2e directories).

ng test

A new flag added --reporter, to allow which reporter you want Karma to use.

ng xi18n

You can now turn off the progress of the build when extracting the i18n messages with: ng xi18n --no-progress.

Budgets

New section called "budgets" defined in angular.json.

One can emit error and warning if bundle file is more than specified size.

"budgets": {

"type": "bundle",

"name": "app",

"maximumWarning": "2mb", // Warning if > 2mb and < 5mb

"maximumError": "5mb" // Bundle failes if bundle size > 5mb

}

Configurations

One can ignore certain files in assets using angular.json. On the polyfill side, the reflect-metadata polyfill (core-js/es7/reflect) is now only included in JiT mode, as it is not needed in AoT (production) mode. 

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "ignore": ["**/*.svg"],
    "output": "/assets/"
  },
],

.npmrc per project

One can now define separate .npmrc file per project in your workspace, making it easier to deploy artifacts to Nexus or Artifactory repository.

Angular Console

A user interface for Angular CLI, helpful for beginners and expert, which removes need to remember cli commands. Its independent package which can be downloaded, works better on Mac and Windows, experimental mode in Linux.

Drag and Drop Support in CDK

Angular CDK now has Drag and Drop directive support. Example over here.

Virtual Scroll Support in CDK

Angular CDK now has virual scrolling viewport support. Example over here.

TypeScript 3.1 Support

Angular 7.x now requires Typescript 3.1. One can look at TypeScript 3.1 release notes.

Terser instead of UglifyJS

As uglify-es is no longer maintained and uglify-js does not support ES6+, the CLI team has moved to Terser for the minification phase of the build. Terser is a fork of uglify-es that retains API and CLI compatibility with uglify-es and uglify-js@3. It shouldn’t really change the results, but it fixes a few long standing issues with UglifyJS, like production builds that weren’t working in old Firefox ESR versions.

Stay tuned for next blog for Upgrade existing Angular Project from Angular 6.x to Angular 7.x.