Upgraded to Angular 5 : TS6046 and TS5024 errors

Issue

We upgraded our application to Angular 5.0.0 and we’re getting two errors while trying to run the ng serve or ng build command :

error TS6046: Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'.
error TS5024: Compiler option 'lib' requires a value of type Array.

Here is the tsconfig.js file :

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

And the package.json file :

{
  "name": "",
  "version": "",
  "description": "",
  "author": "",
  "url": "",
  "copyright": "",
  "license": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "generate-barrels": "barrelsby --delete"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.1",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@angular/upgrade": "4.3.6",
    "@ngx-translate/core": "^8.0.0",
    "angular2-datatable": "^0.6.0",
    "angular2-moment": "^1.7.0",
    "chart.js": "2.7.0",
    "core-js": "2.5.1",
    "es6-shim": "^0.35.3",
    "moment": "^2.18.1",
    "ng2-charts": "1.6.0",
    "ng2-nouislider": "^1.7.0",
    "ng2-table": "^1.3.2",
    "ng2-toastr": "^4.1.2",
    "ngx-bootstrap": "1.9.3",
    "ngx-webstorage": "^1.8.0",
    "nouislider": "^10.1.0",
    "rxjs": "^5.5.2",
    "serializer.ts": "0.0.12",
    "ts-helpers": "1.1.2",
    "zone.js": "0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@types/jasmine": "2.6.0",
    "@types/node": "8.0.28",
    "barrelsby": "0.0.8",
    "codelyzer": "3.2.0",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.1.2",
    "ts-node": "3.3.0",
    "tslint": "^5.7.0",
    "typescript": "^2.6.0",
    "webpack": "^3.8.1"
  },
  "engines": {
    "node": ">= 6.9.0",
    "npm": ">= 3.0.0"
  }
}

Versions :

ng -v => 1.5.0
npm -v => 5.5.1
node -v => 9.0.0

Using Microsoft PowerShell on Windows 10 to build, run, install, etc.


[Update] : Partial solution #1.

Same error if using @angular/cli": "^1.4.0".

I updated @angular/cli": "1.3.1" and the ng build or serve command work but it doesn’t fix the issue with the ^1.5.0 or ^1.4.0 version of the @angular/cli package.

[Update 2] : Final working code :

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "amd",
    "target": "es2017",
    "baseUrl": "",
    "lib": [
      "es2017"
    ],
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Solution

As workaround, i updated tsconfig.app.json file from
"module": "es2017"
to
"module": "amd"

And it worked for me.
Hope this helps you.

Answered By – Roberto

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.