升级到 Angular4后找不到“需要”的名称

我想在 Angular 项目中使用 Chart.js。 在以前的 Angular2版本中，我通过使用‘ chart.loader.ts’做得很好，它具有:

export const { Chart } = require('chart.js');

然后在组件代码中

import { Chart } from './chart.loader';

但是在升级到 cli 1.0.0和 Angular 4之后，我得到了这样的错误: “无法找到名称‘ need’”。

重现错误:

ng new newapp
cd newapp
npm install chart.js --save
echo "export const { Chart } = require('chart.js');" >> src/app/chart.loader.ts
ng serve

在我的‘ tsconfig.json’中，我有

"typeRoots": [
"node_modules/@types"
],

在‘ node _ module/@types/node/index.d.ts’中有:

declare var require: NodeRequire;

所以我很困惑。

顺便说一句，我经常遇到这样的警告:

[tslint] The selector of the component "OverviewComponent" should have prefix "app"(component-selector)

虽然我已经在我的“ . angle-cli. json”中设置了“前缀”: “”，但是是否是因为从“ angle-cli. json”变为“ . angle-cli. json”的原因呢？

134017 次浏览
小开

虽然还不确定答案，但可能的解决办法是

import * as Chart from 'chart.js';
小开
最佳答案

问题(如 输入脚本得到错误 TS2304: 无法找到名称 & # 39; 要求 & # 39;所示)是没有安装节点的类型定义。

对于预测的基因 with @angular/cli 1.x，具体步骤应该是:

第一步 :

安装 @types/node时使用以下任一选项:

- npm install --save @types/node
- yarn add @types/node -D

第二步 : 编辑您的 Src/tsconfig.app.json文件并添加以下代码以取代应该已经存在的空 "types": []:

...
"types": [ "node" ],
"typeRoots": [ "../node_modules/@types" ]
...

如果我遗漏了什么，写下评论，我会编辑我的答案。

小开

最后，我得到了解决方案，检查我的应用程序模块文件:

import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '@angular/material';
import 'hammerjs';
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';


import { AppRouting } from './app.routing';
import { AppComponent } from './app.component';


declare var require: any;




export function highchartsFactory() {
const hc = require('highcharts');
const dd = require('highcharts/modules/drilldown');
dd(hc);


return hc;
}


@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRouting,
BrowserAnimationsModule,
MaterialModule,
ChartModule
],
providers: [{
provide: HighchartsStatic,
useFactory: highchartsFactory
}],
bootstrap: [AppComponent]
})
export class AppModule { }

注意上面代码中的 declare var require: any;。

小开

我将 tsconfig.json文件移动到一个新的文件夹中，以重新构建我的项目。

因此，它无法解析 tsconfig.json 的 typeRoots属性中 node _ module/@types 文件夹的路径

所以只需更新

"typeRoots": [
"../node_modules/@types"
]

到

"typeRoots": [
"../../node_modules/@types"
]

只需确保从 tsconfig.json 的新位置解析 node _ module 的路径

小开

对于我来说，使用 VSCode 和 Angular 5，只需要在服务器 tsconfig.app.json. 保存，然后重新启动中的类型中添加“ node”。

{
"compilerOptions": {
..
"types": [
"node"
]
}
..
}

一件奇怪的事情是，这个问题“无法找到 request (”，在使用 t- 节点执行时不会发生

小开

我加了一句

"types": [
"node"
]

在我的 Tsconfig文件和它的工作为我的 Tsconfig.json文件看起来像

  "extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": [
"node",
"underscore"
]
},
小开

将工作在角度7 +

我也面临着同样的问题

"types": ["node"]

到根文件夹的 Tsconfig.json。

在 Src文件夹下还有一个 Json，我通过添加来解决这个问题

"types": ["node"]

到 compilerOptions下的 Json文件

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["node"]  ----------------------< added node to the array
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
小开

在文件的顶部添加下面一行，显示错误:

declare var require: any

提交答案