Angular 2, 4 and 5 must have extensions for Visual Studio Code

 

You decided to develop with Angular 4 with TypeScript in Visual Studio Code ?

Good Choice ! ūüôā

Here are the must have extensions !

For any installation : Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

1- Angular v4 TypeScript Snippets

Installation : 
ext install Angular v4 TypeScript Snippets

Usage :

  • TypeScript Angular Snippets
a-component                 // component
a-component-root            // root app component
a-directive                 // directive
a-guard-can-activate        // CanActivate guard
a-guard-can-activate-child  // CanActivateChild guard
a-guard-can-deactivate      // CanDeactivate guard
a-guard-can-load            // CanLoad guard
a-http-get                  // http.get with Rx Observable
a-httpclient-get            // httpClient.get with Rx Observable
a-module                    // module
a-module-root               // root app module
a-module-routing            // routing module file (forChild)
a-output-event              // @Output event and emitter
a-pipe                      // pipe
a-route-path-404            // 404 route path
a-route-path-default        // default route path
a-route-path-eager          // eager route path
a-route-path-lazy           // lazy route path
a-service                   // service
a-service-http              // service with Http
a-service-httpclient        // service with HttpClient
a-ctor-skip-self            // angular ngmodule's skipself constructor
a-subscribe                 // Rx Observable subscription
  • TypeScript RxJS Snippets

rx-observable               // Rx Observable import
rx-subject                  // Rx Subject import
rx-replay-subject           // Rx ReplaySubject import
rx-behavior-subject         // Rx BehaviorSubject import
rx-add-operator             // Rx add operator import
rx-add-observable           // Rx add observable import
  • HTML Snippets

a-class                     // [class] binding
a-select                    // <select> control
a-style                     // [style] binding
a-ngClass                   // ngClass
a-ngFor                     // *ngFor
a-ngForAsync                // *ngFor with async
a-ngIf                      // *ngIf
a-ngIfElse                  // *ngIf with else
a-ngModel                   // ngModel
a-routerLink                // routerLink
a-routerLink-param          // routerLink with a route parameter
a-ngStyle                   // ngStyle
a-ngSwitch                  // ngSwitch
a-prej                      // <pre>{{model | json}}</pre>
a-preja                     // <pre>{{model | async | json}}</pre>
Demo :

2- Auto Import

Installation :

ext install auto import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

Demo :

3- Debugger for Chrome

Installation :

ext install debugger-for-chrome

Supported features :

  • Setting breakpoints, including in source files when source maps are enabled
  • Stepping, including with the buttons on the Chrome page
  • The Locals pane
  • Debugging eval scripts, script tags, and scripts that are added dynamically
  • Watches
  • Console

Unsupported scenarios :

  • Debugging web workers
  • Any features that aren’t script debugging.

Demo :

4- Path Intellisense

A Visual Studio Code plugin that autocompletes filenames.

Installation :

ext install path-intellisense

Demo :

5- sort-imports

Sort ES6 imports for JavaScript and TypeScript automatically.

Installation :

ext install sort-imports

Demo :

6- Visual Studio Team Services

This extension allows you to connect to Team Services and Team Foundation Server and provides support for Team Foundation Version Control (TFVC). It allows you to monitor your builds and manage your pull requests and work items for your TFVC or Git source repositories. The extension uses your local repository information to connect to either Team Services or Team Foundation Server 2015 Update 2 (and later).

Installation :

ext install team

For configuration tutorial, please check my previous article here : http://anthonygiretti.com/2017/05/29/how-to-configure-visual-studio-code-with-visual-studio-team-services/

7- vsc-angular-cli

This extension allows to run angular-cli commands from command panel

Installation :

ext install vsc-angular-cli

Supported commands (by now):

  • ng new
  • ng doc
  • ng lint
  • ng serve
  • ng versio
  • ng format
  • ng e2e
  • ng completion
  • ng generate
  • ng test
  • ng help

8- VSCode simpler Icons with Angular

This extension is a simpler icon pack than the big pack of icons vscode-great-icons.
Personnal icon theme, to group javascript style (typescript, coffee…) into one only icon, css style (less, sass …) into on only icon etc …

Installation :

ext install vscode-great-icons

Demo :

 

Are you ready to ;ake your fiest Angular 4 app with Visual Studio Code ? ūüėČ

 

I’m using Angular CLI beta, how to update to Angular CLI RC and Angular 4 ?

Like many developers, you were impatient to try and adopt Angular 2 with Typescript.
Just like me you probably used Angular CLI, but it was in beta version.
For a few days Angular CLI RC has¬†been released and Angular 4 with it and you want to migrate …..

Here’s how.

In this whole article i’m using Visual Studio Code.

First check your version like this :

ng -v

ng-v

 

Scenario 1, you are using angular-cli-1.0.0-beta.28 or earlier

You need to uninstall it (angular-cli package) before  and to scenario 2 after :

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

 

Scenario 2, you are using a more recent version than angular-cli-1.0.0-beta.28 (like beta.32)

1- You need to upgrade you global and local packages :

Global package

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Local project folder

rmdir node_modules
npm install --save-dev @angular/cli@latest
npm install

2- You need to modify angular-cli.json file :

  • Rename the file to .angular-cli.json (with a dot)
  • Add $schema property before project property :
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  • Depending your version you need or not to add an entry for polyfills between main and test :
    "polyfills": "polyfills.ts",
  • You need to modify environments entry :
    Before :

    "environments": {
      "source": "environments/environment.ts",
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }

    After:

    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  • You have to create these 3 files :
    src/tsconfig.app.json:

    {
      "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
          "es2016",
          "dom"
        ],
        "outDir": "../out-tsc/app",
        "target": "es5",
        "module": "es2015",
        "baseUrl": "",
        "types": []
      },
      "exclude": [
        "test.ts",
        "**/*.spec.ts"
      ]
    }

    src/tsconfig.spec.json:

    {
      "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
          "es2016"
        ],
        "outDir": "../out-tsc/spec",
        "module": "commonjs",
        "target": "es6",
        "baseUrl": "",
        "types": [
          "jasmine",
          "node"
        ]
      },
      "files": [
        "test.ts"
      ],
      "include": [
        "**/*.spec.ts"
      ]
    }

    e2e/tsconfig.e2e.json:

    {
      "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
          "es2016"
        ],
        "outDir": "../dist/out-tsc-e2e",
        "module": "commonjs",
        "target": "es6",
        "types":[
          "jasmine",
          "node"
        ]
      }
    }
  • You need to modify also the lint entry :
    "lint": [
      {
        "project": "src/tsconfig.app.json"
      },
      {
        "project": "src/tsconfig.spec.json"
      },
      {
        "project": "e2e/tsconfig.e2e.json"
      }
    ],
  • You need to replace defaults and spec entries :
    Before :

    "defaults": {
      "styleExt": "css",
      "prefixInterfaces": false,
      "inline": {
        "style": false,
        "template": false
      },
      "spec": {
        "class": false,
        "component": true,
        "directive": true,
        "module": false,
        "pipe": true,
        "service": true
      }
    }

    After :

    "defaults": {
      "styleExt": "css",
      "component": {
        "inlineTemplate": false,
        "spec": true
      }
    }
    
  • You have to delete these files : e2e/tsconfig.json and src/tsconfig.json and put this into apps entry :
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
  • Finally, update protractor.conf.js file :
    beforeLaunch: function() {
      require('ts-node').register({
        project: 'e2e'
      });
    },
    

3- You need to modify package.json file :

  • Add these entries :
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    

4- You need to modify karma.conf.js file :

  • Replace the frameworks entry
    frameworks: ['jasmine', 'angular-cli']

    by

    frameworks: ['jasmine', '@angular/cli'],
  • Replace the plugins entry by this :
    plugins: [
          require('karma-jasmine'),
          require('karma-chrome-launcher'),
          require('@angular/cli/plugins/karma'),
          require('karma-jasmine-html-reporter'),
          require('karma-coverage-istanbul-reporter')
        ]
  • Add client before files entry :
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    
  • Replace preprocessors entry by this :
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    
  • Replace remapIstanbulReporter entry by this one :
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    
  • Remove config property from angularCli entry :
    angularCli: {
      environment: 'dev'
    },
    
  • Replace the whole reporters entry by this :
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul']
              : ['progress', 'kjhtml'],
    

5- You need to modify protractor.conf.js file :

  • Replace this line
    var SpecReporter = require('jasmine-spec-reporter');

    by this one :

    const { SpecReporter } = require('jasmine-spec-reporter');
  • Remove useAllAngular2AppRoots entry
  • Update beforeLaunch entry by this :
    beforeLaunch: function() {
      require('ts-node').register({
        project: 'e2e'
      });
    },
    
  • Update onPrepare like this :
    onPrepare() {
      jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    }
    

6- Finally you need to modify tslint.json file :

  • Add this entries :
    "callable-types": true,
    "import-blacklist": [true, "rxjs"],
    "import-spacing": true,
    "interface-over-type-literal": true,
    "no-empty-interface": true,
    "no-string-throw": true,
    "prefer-const": true,
    "typeof-compare": true,
    "unified-signatures": true,
    
  • Update no-inferrable-types with this :
    "no-inferrable-types": [true, "ignore-params"]
    

 

Now you can try to build and check your current version :

angular-cli updated

As you can see , you sucessfully upgraded your Angular CLI version !

Note that your current app is still using Angular2 version, i will show after how to upgrade your app to Angular4.

For the new apps that you will create (by using g new my-new-app), the default version used of Angular is 4.0.0!

 

To finish,  as I said the migration to Angular CLI 1.0.0 did not upgrade my app to Angular4, what to do now ?

Just do this into your local project :

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

Now your app is also upgraded :

updated to angular4

Nice isn’it ? ūüôā

If you have issues with the upgrade of your app, check this Url : https://angular-update-guide.firebaseapp.com/

 

Source of this tutorial : https://github.com/angular/angular-cli/wiki/stories-rc-update