升级到Angular4后找不到名称“ require”

我想在我的Angular项目中使用Chart.js。在以前的Angular2版本中，我一直使用'chart.loader.ts'来做到这一点，它具有：

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

然后在组件代码中，我只是

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

但是升级到cli 1.0.0和Angular 4之后，出现错误：“找不到名称'require'”。

重现该错误：

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_modules/@types/node/index.d.ts”中有：

declare var require: NodeRequire;

所以我很困惑。

顺便说一句，我不断遇到警告：

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

虽然我在'.angular-cli.json'中设置了“ prefix”：“”。是因为从'angular-cli.json'更改为'.angular-cli.json'是原因吗？

问题（如在获取错误TS2304的打字稿中概述的那样：找不到名称'require'）是未安装节点的类型定义。

使用gengen时with @angular/cli 1.x，具体步骤应为：

第一步：

@types/node使用以下任一方法安装：

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

第2步：编辑src / tsconfig.app.json文件，并添加以下内容代替Empty（"types": []应该已经存在）：

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

如果有任何遗漏，请写下评论，然后编辑答案。

最后，我得到了解决方案，请检查我的App模块文件：

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;上面的代码。

将在Angular 7+中运行

我遇到了同样的问题，我在添加

"types": ["node"]

到根文件夹的tsconfig.json。

src文件夹下还有一个tsconfig.app.json，我通过添加解决了这个问题

"types": ["node"]

到tsconfig.app.json文件compilerOptions

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

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

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

奇怪的是，使用ts-node执行此问题“不会找到require（”）

仍然不确定答案，但是可能的解决方法是

import * as Chart from 'chart.js';

我加了

"types": [ 
   "node"
]

在我的tsconfig中文件中，它对我有用tsconfig.json文件看起来像

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

在出现错误的文件顶部添加以下行：

declare var require: any

我搬了 tsconfig.json文件移到新文件夹中以重组项目。

因此无法解析到其中的node_modules / @ types文件夹的路径 typeRoots属性的路径

因此，只需更新路径即可

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

至

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

仅确保从tsconfig.json的新位置解析到node_modules的路径