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