Der Name 'require' kann nach dem Upgrade auf Angular4 nicht gefunden werden

Ich möchte Chart.js in meinem Angular-Projekt verwenden. In früheren Angular2-Versionen habe ich dies gut gemacht, indem ich eine 'chart.loader.ts' verwendet habe, die Folgendes enthält:

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

Dann im Komponentencode ich gerade

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

Nach dem Upgrade auf CLI 1.0.0 und Angular 4 wird jedoch die Fehlermeldung "Name 'erforderlich' kann nicht gefunden werden" angezeigt.

So reproduzieren Sie den Fehler:

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

In meiner 'tsconfig.json' habe ich

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

Und in 'node_modules/@types/node/index.d.ts' gibt es:

declare var require: NodeRequire;

Also bin ich verwirrt.

Übrigens stoße ich ständig auf die Warnung:

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

Obwohl ich das "Präfix": "" in meiner '.angular-cli.json' gesetzt habe. Könnte es daran liegen, dass der Wechsel von 'angle-cli.json' zu '.angular-cli.json' die Ursache ist?

Das Problem (wie im Typenskript-Fehler TS2304 beschrieben: Name 'require' kann nicht gefunden werden ) besteht darin, dass die Typdefinitionen für den Knoten nicht installiert sind.

Bei einem projizierten Genned with @angular/cli 1.xsollten die spezifischen Schritte sein:

Schritt 1 :

Installieren Sie @types/nodemit einer der folgenden Optionen :

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

Schritt 2 : Bearbeiten Sie Ihre Datei src / tsconfig.app.json und fügen Sie anstelle der leeren Datei "types": [], die bereits vorhanden sein sollte, Folgendes hinzu :

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

Wenn ich etwas verpasst habe, schreibe einen Kommentar und ich werde meine Antwort bearbeiten.

Endlich habe ich eine Lösung dafür, überprüfe meine App-Moduldatei:

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

Beachten Sie declare var require: any;im obigen Code.

Funktioniert in Angular 7+

Ich hatte das gleiche Problem, fügte ich hinzu

"types": ["node"]

zu tsconfig.json des Stammordners.

Es gab noch eine tsconfig.app.json unter dem Ordner src und ich habe dies durch Hinzufügen gelöst

"types": ["node"]

in die Datei tsconfig.app.json untercompilerOptions

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

Bei Verwendung von VSCode und Angular 5 musste ich nur "Knoten" zu Typen in tsconfig.app.json hinzufügen. Speichern Sie den Server und starten Sie ihn neu .

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

Eine merkwürdige Sache ist, dass dieses Problem "nicht finden kann erforderlich" ("nicht auftritt, wenn mit ts-node ausgeführt wird

Die Antwort ist noch nicht sicher, aber eine mögliche Problemumgehung ist

import * as Chart from 'chart.js';

Ich fügte hinzu

"types": [ 
   "node"
]

in meiner tsconfig- Datei und es hat bei mir funktioniert tsconfig.json Datei sieht es so aus

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

Fügen Sie oben in der Datei die folgende Zeile hinzu, die den Fehler ausgibt:

declare var require: any

Ich habe das bewegt tsconfig.json Datei in einen neuen Ordner , um mein Projekt neu zu strukturieren.

Daher konnte der Pfad zum Ordner "node_modules / @ types" nicht aufgelöst werden typeRoots Eigenschaft von tsconfig.json nicht aufgelöst werden

Aktualisieren Sie einfach den Pfad von

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

zu

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

Um nur sicherzustellen, dass der Pfad zu node_modules vom neuen Speicherort der Datei tsconfig.json aufgelöst wird