angulardevexpressdevextremedevextreme-angular

Angular 6 Dev express module Cannot find name 'unknown'


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"
  }
}

Solution

  • 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/

    enter image description here