Tidak dapat menemukan nama 'memerlukan' setelah meningkatkan ke Angular4

Saya ingin menggunakan Chart.js dalam proyek Angular saya. Di versi Angular2 sebelumnya, saya telah melakukan ini dengan baik dengan menggunakan 'chart.loader.ts' yang memiliki:

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

Kemudian di kode komponen saya baru saja

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

Tapi setelah mengupgrade ke cli 1.0.0 dan Angular 4, saya mendapatkan error: "Cannot find name 'require'".

Untuk mereproduksi kesalahan:

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

Di 'tsconfig.json' saya, saya punya

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

Dan di 'node_modules/@types/node/index.d.ts' ada:

declare var require: NodeRequire;

Jadi saya bingung.

BTW, saya terus-menerus menemukan peringatan:

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

Meskipun saya telah menyetel "awalan": "" di '.angular-cli.json' saya. Mungkinkah karena perubahan dari 'angular-cli.json' menjadi '.angular-cli.json' penyebabnya?

Masalahnya (seperti diuraikan dalam skrip mendapatkan kesalahan TS2304: tidak dapat menemukan nama 'memerlukan' ) adalah bahwa definisi jenis untuk node tidak diinstal.

Dengan gen yang diproyeksikan with @angular/cli 1.x, langkah spesifiknya harus:

Langkah 1 :

Instal @types/nodedengan salah satu dari berikut ini:

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

Langkah 2 : Edit file src / tsconfig.app.json Anda dan tambahkan yang berikut ini di tempat kosong "types": [], yang seharusnya sudah ada di sana:

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

Jika saya melewatkan sesuatu, tulis komentar dan saya akan mengedit jawaban saya.

Akhirnya saya mendapat solusi untuk ini, periksa file modul Aplikasi saya:

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

Perhatikan declare var require: any;pada kode di atas.

Akan bekerja di Angular 7+

Saya menghadapi masalah yang sama, saya menambahkan

"types": ["node"]

ke tsconfig.json dari folder root.

Ada satu lagi tsconfig.app.json di bawah folder src dan saya menyelesaikannya dengan menambahkan

"types": ["node"]

ke file tsconfig.app.json di bawahcompilerOptions

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

Bagi saya, menggunakan VSCode dan Angular 5, hanya perlu menambahkan "node" ke tipe di tsconfig.app.json. Simpan, dan mulai ulang server.

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

Satu hal yang aneh, adalah bahwa masalah ini "tidak dapat menemukan yang disyaratkan (", tidak terjadi saat mengeksekusi dengan ts-node

Masih belum yakin jawabannya, tetapi kemungkinan solusinya adalah

import * as Chart from 'chart.js';

saya tambahkan

"types": [ 
   "node"
]

di file tsconfig saya dan itu berfungsi untuk saya file tsconfig.json terlihat seperti

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

Tambahkan baris berikut di bagian atas file yang memberikan kesalahan:

declare var require: any

Saya memindahkan tsconfig.jsonfile ke folder baru untuk merestrukturisasi proyek saya.

Jadi itu tidak dapat menyelesaikan jalur ke folder node_modules / @ types di dalam typeRootsproperti tsconfig.json

Jadi perbarui saja jalur dari

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

untuk

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

Untuk memastikan bahwa jalur ke node_modules diselesaikan dari lokasi baru tsconfig.json