Angular 6 Dev express module Cannot find name 'unknown'

Question

I have tried with a new project in Angular 6 and then install the devexpress using the command:

npm install devextreme@20.2 devextreme-angular@20.2 --save --save-exact

Then I added the devExpress module in my application appModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DxButtonModule } from 'devextreme-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
   DxButtonModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

on ng build, it is giving the below error and I conformed the dev express module is available in node_modules

ERROR in node_modules/devextreme/core/component.d.ts(89,47): error TS2304: Cannot find name 'unknown'.
node_modules/devextreme/core/dom_component.d.ts(81,28): error TS2304: Cannot find name 'unknown'.
node_modules/devextreme/core/templates/function_template.d.ts(14,16): error TS2304: Cannot find name
'unknown'.

below is my package.json file, please suggest

{
  "name": "demo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "devextreme": "20.2.3",
    "devextreme-angular": "20.2.3",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.9",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

Answer 1

The problem you have is because of the version of Typescript you have: "typescript": "~2.9.2"

You should consider upgrading your typescript version to 3.x.x

for example using:

npm i -D typescript@3

But after this upgrade you will have another error:

ERROR in The Angular Compiler requires TypeScript >=2.7.2 and <2.10.0 but 3.9.7 was found instead.

But from this error you should understand that you have to upgrade your angular version as well, because angular 6 can use only typescript 2.7.x or typescript 2.9.x, and for typescript 3.x you need angular version >= 7

So here is the package.json I used that works with the module you want to use:

Package.json:

{
  "name": "project1",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.0.7",
    "@angular/common": "^7.0.7",
    "@angular/compiler": "^7.0.7",
    "@angular/core": "^7.0.7",
    "@angular/forms": "^7.0.7",
    "@angular/http": "^7.0.7",
    "@angular/platform-browser": "^7.0.7",
    "@angular/platform-browser-dynamic": "^7.0.7",
    "@angular/router": "^7.0.7",
    "core-js": "^2.5.4",
    "devextreme": "20.2.4",
    "devextreme-angular": "20.2.4",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~7.0.7",
    "@angular/compiler-cli": "^7.0.7",
    "@angular/language-service": "^7.0.7",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DxButtonModule } from 'devextreme-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DxButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

After this, ng build will succeed:

ng build   
Your global Angular CLI version (8.3.8) is greater than your local
version (7.0.7). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
                                                                                          
Date: 2020-12-24T13:37:54.354Z
Hash: 952a139495c07f5137b1
Time: 61758ms
chunk {main} main.js, main.js.map (main) 9.68 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 241 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 24.9 MB [initial] [rendered]

You can check Angular CLI, Angular, Node.js and TypeScript compatibility. here: https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3

If you still want to use angular 6, then you have to use: devextreme@19.2 and devextreme-angular@19.2 because devextreme@20.2 can only be used with angular version >= 7.

check the angular compatibility with devextreme in the official website: https://js.devexpress.com/Documentation/Guide/Angular_Components/Supported_Versions/