时间戳

首页 > 解决方案 > Angular 6 Dev express 模块找不到名称“未知”

angular - Angular 6 Dev express 模块找不到名称“未知”

问题描述

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

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

然后我devExpress在我的应用程序 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，它给出了以下错误，我确认 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"
  }
}

标签： angulardevexpressdevextremedevextreme-angular

解决方案

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

您应该考虑将您的打字稿版本升级到 3.xx

例如使用：

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，而对于 typescript 3.x，你需要 angular version >= 7

所以这是我使用的 package.json ，它适用于您要使用的模块：

包.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

如果您仍然想使用 angular 6，那么您必须使用：devextreme@19.2 和 devextreme-angular@19.2因为devextreme@20.2只能与 angular 版本 >= 7 一起使用。

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

在此处输入图像描述

推荐阅读