To solve the "Cannot find name require" error, install the node types by running npm i -D @types/node . If the error is not resolved, you can use declare var require: any to declare require as a global variable in your project. The first thing you need to do is make sure you have typings for Node. js installed.
require() is internal to NodeJS and not available to users of Angular CLI if I am not mistaken. I cannot use this code as it fails.
The problem (as outlined in typescript getting error TS2304: cannot find name ' require') is that the type definitions for node are not installed.
With a projected genned with @angular/cli 1.x
, the specific steps should be:
Step 1:
Install @types/node
with either of the following:
- npm install --save @types/node
- yarn add @types/node -D
Step 2:
Edit your src/tsconfig.app.json file and add the following in place of the empty "types": []
, which should already be there:
...
"types": [ "node" ],
"typeRoots": [ "../node_modules/@types" ]
...
If I've missed anything, jot a comment and I'll edit my answer.
I was facing the same issue, I was adding
"types": ["node"]
to tsconfig.json of root folder.
There was one more tsconfig.app.json under src folder and I got solved this by adding
"types": ["node"]
to tsconfig.app.json file under compilerOptions
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["node"] ----------------------< added node to the array
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
Finally I got solution for this, check my App module file :
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 { }
Notice declare var require: any;
in the above code.
Still not sure the answer, but a possible workaround is
import * as Chart from 'chart.js';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With