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 [email protected] [email protected] --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"
}
}
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:
[email protected] and [email protected] because [email protected] 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/
