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

2017-06-10 by anthonygiretti

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']

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 :

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 :

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

Anthony Giretti's .NET blog