SHARE:

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

 

Written by

anthonygiretti

Anthony is a specialist in Web technologies (14 years of experience), in particular Microsoft .NET and learns the Cloud Azure platform. He has received twice the Microsoft MVP award and he is also certified Microsoft MCSD and Azure Fundamentals.