Cannot find name require after upgrading to Angular4

Question

I want to use Chart js within my Angular project  In previous Angular2 versions  I have been doing this well by using a  chart loader ts  which has   export const   Chart     require  chart js      Then in the component code I just  import   Chart   from    chart loader     But after upgrading to cli 1 0 0 and Angular 4  I get the error   Cannot find name  require     To reproduce the error   ng new newapp cd newapp npm install chart js --save echo  export const   Chart     require  chart js      gt  gt  src app chart loader ts ng serve   In my  tsconfig json   I have   typeRoots        node modules  types       And in  node modules  types node index d ts  there is   declare var require  NodeRequire    So I m confused   BTW  I constantly encounter the warning     tslint  The selector of the component  OverviewComponent  should have prefix  app  component-selector    Though I have set the  prefix      in my   angular-cli json   Could it because changing from  angular-cli json  to   angular-cli json  the cause

User · Answer

Will work in Angular 7     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    ---------------------- lt  added node to the array         exclude          test ts             spec ts

User · Answer

I moved the tsconfig json file into a new folder to restructure my project   So it wasn t able to resolve the path to node modules  types folder inside typeRoots property of tsconfig json  So just update the path from    typeRoots           node modules  types      to   typeRoots              node modules  types      To just ensure that the path to node modules is resolved from the new location of the tsconfig json

User · Answer

Still not sure the answer  but a possible workaround is  import   as Chart from  chart js

User · Answer

As for me  using VSCode and Angular 5  only had to add  node  to types in tsconfig app json  Save  and restart the server    x000D   x000D    x000D       compilerOptions     x000D         x000D       types     x000D         node  x000D        x000D      x000D       x000D    x000D   x000D   x000D    One curious thing  is that this problem  cannot find require     does not happen when excuting with ts-node

User · Answer

Add the following line at the top of the file that gives the error   declare var require  any

User · Answer

I added    types          node      in my tsconfig file and its worked for me tsconfig json file look like     extends       tsconfig json      compilerOptions          outDir       out-tsc app        baseUrl              module    es2015        types             node          underscore

User · Answer

The problem  as outlined in typescript getting error TS2304  cannot find name   39  require  39   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

User · Answer

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

[angular] Cannot find name 'require' after upgrading to Angular4

Will work in Angular 7+

Examples related to angular

Examples related to angular-cli