Angular 6 Dev express 模块找不到名称 'unknown'

Question

我尝试在 Angular 6 中创建一个新项目，然后使用以下命令安装 devexpress：

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

然后我在我的应用程序 appModule

中添加了 devExpress 模块

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

在 ng build 上，出现以下错误，我确认 dev express 模块在 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'.

下面是我的package.json文件，请推荐

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

您遇到的问题是因为您的 Typescript 版本："typescript": "~2.9.2"

你应该考虑将你的 typescript 版本升级到 3.x.x

例如使用：

npm i -D typescript@3

但是这次升级后你又会报错：

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

但是从这个错误你应该明白你也必须升级你的 angular 版本，因为 angular 6 只能使用 typescript 2.7.x 或 typescript 2.9.x，对于打字稿 3.x 你需要 angular version >= 7

所以这是我使用的 package.json 与您要使用的模块一起使用的：

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

在此之后，ng build 将成功：

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]

你可以查看Angular CLI, Angular, Node.js and TypeScript compatibility. 这里： https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3

如果你还想用angular6，那你得用： devextreme@19.2 和 devextreme-angular@19.2 因为 devextreme@20.2 只能用于 angular 版本 >= 7.

在官网查看angular与devextreme的兼容性： https://js.devexpress.com/Documentation/Guide/Angular_Components/Supported_Versions/

Angular 6 Dev express 模块找不到名称 'unknown'

Angular 6 Dev express module Cannot find name 'unknown'

devexpress

devextreme

angular

devextreme-angular