Why do I get this error when running ng test on angular5?

Question

I am updating my angular4 app to angular5 and I get this error when I run ng test. I did not get this on angular4, so I feel like it has something to do with the installation process. Any thoughts as to why this is happening would be greatly appreciated

...
    s/@angular/platform-browser/src/dom/dom_adapter.d.ts(80,58): error TS2304: Cannot find name 'HTMLStyleElement'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(84,44): error TS2304: Cannot find name 'Node'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(85,26): error TS2304: Cannot find name 'Node'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(85,33): error TS2304: Cannot find name 'Node'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(86,66): error TS2304: Cannot find name 'HTMLElement'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(87,64): error TS2304: Cannot find name 'HTMLElement'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(107,36): error TS2304: Cannot find name 'HTMLDocument'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(108,36): error TS2304: Cannot find name 'Document'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(110,28): error TS2304: Cannot find name 'Document'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(111,28): error TS2304: Cannot find name 'Document'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(119,34): error TS2304: Cannot find name 'Node'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(119,41): error TS2304: Cannot find name 'Node'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(120,30): error TS2304: Cannot find name 'Node'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(120,37): error TS2304: Cannot find name 'Node'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(126,40): error TS2304: Cannot find name 'Document'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(127,28): error TS2304: Cannot find name 'History'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(128,29): error TS2304: Cannot find name 'Location'.
    node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(129,31): error TS2304: Cannot find name 'Document'.
    node_modules/@angular/platform-browser/src/dom/dom_tokens.d.ts(10,47): error TS2304: Cannot find name 'Document'.
    node_modules/@angular/platform-browser/src/dom/events/dom_events.d.ts(14,31): error TS2304: Cannot find name 'HTMLElement'.
    node_modules/@angular/platform-browser/src/dom/events/event_manager.d.ts(21,31): error TS2304: Cannot find name 'HTMLElement'.
    node_modules/@angular/platform-browser/src/dom/events/event_manager.d.ts(30,40): error TS2304: Cannot find name 'HTMLElement'.
    node_modules/@angular/platform-browser/src/dom/events/hammer_gestures.d.ts(29,26): error TS2304: Cannot find name 'HTMLElement'.
    node_modules/@angular/platform-browser/src/dom/events/hammer_gestures.d.ts(35,31): error TS2304: Cannot find name 'HTMLElement'.
    node_modules/@angular/platform-browser/src/dom/events/key_events.d.ts(16,31): error TS2304: Cannot find name 'HTMLElement'.
    node_modules/@angular/platform-browser/src/dom/events/key_events.d.ts(20,35): error TS2304: Cannot find name 'KeyboardEvent'.
    node_modules/@angular/platform-browser/src/dom/shared_styles_host.d.ts(20,23): error TS2304: Cannot find name 'Node'.
    node_modules/@angular/platform-browser/src/dom/shared_styles_host.d.ts(21,26): error TS2304: Cannot find name 'Node'.

my ts.config file looks like this

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types/"
    ],
    "lib": [
      "dom",
      "es2016"
    ]
  },
  "types": [
    "node",
    "jasmine",
    "core-js"
  ]
}

I have also tried installing typings. And I keep getting it. What causes this?

Answer 1

Try changing the tsconfig.app.json and tsconfig.spec.json files as follows:

tsconfig.spec.json:

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

tsconfig.spec.json:

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

Then finally ensure your e2e/tsconfig.e2e.json has entries as follows:

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2017"
    ],
    "outDir": "../out-tsc/e2e",
    "module": "commonjs",
    "target": "es5",
    "types":[
      "jasmine",
      "node"
    ]
  }
}

Answer 2

This is because of the typings you have defined in your tsconfig.json in the root of your src path (or root folder if you are using that as your base).

There is a property called types in compilerOptions which is an array of ambient types defined in your typeRoots that your code makes use of. To include all installed types just remove this all together. If you want to include only the specific types then add each installed ambient type that the code makes use of.

As for Document and other browser types you should make sure your lib is set correctly and that dom is included.

Here is an example:

{
  "compileOnSave": false,
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "types": [
      "node",
      "additional ambient type roots"
    ]
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Or to include all installed types

{
  "compileOnSave": false,
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "lib": [
      "es2017",
      "dom"
    ]
  }
}