Não é possível encontrar o nome ‘require’ após a atualização para o Angular4

Eu quero usar Chart.js dentro do meu projeto Angular. Nas versões anteriores do Angular2, eu tenho feito isso bem usando um ‘chart.loader.ts’ que tem:

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

Então no código do componente eu só

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

Mas depois de atualizar para o cli 1.0.0 e Angular 4, eu recebo o erro: “Não é possível encontrar o nome ‘require'”.

Para reproduzir o erro:

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

No meu ‘tsconfig.json’, eu tenho

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

E em ‘node_modules/@types/node/index.d.ts’ existe:

 declare var require: NodeRequire; 

Então estou confuso.

BTW, eu constantemente encontro o aviso:

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

Embora eu tenha definido o “prefixo”: “” no meu ‘.angular-cli.json’. Poderia isso porque mudar de ‘angular-cli.json’ para ‘.angular-cli.json’ a causa?

O problema (conforme descrito no typescript recebendo erro TS2304: não é possível encontrar o nome ‘require’ ) é que as definições de tipo para o nó não estão instaladas.

Com um genned projetado com @ angular / cli 1.x, as etapas específicas devem ser:

Etapa 1 : instalar @ types / node com um dos seguintes:

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

Passo 2 : – edite seu arquivo src / tsconfig.app.json e adicione o seguinte no lugar dos "types": [] vazios "types": [] , que já deveria estar lá:

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

Se eu perdi alguma coisa, faça um comentário e eu vou editar minha resposta.

Ainda não tenho certeza da resposta, mas uma solução possível é

 import * as Chart from 'chart.js'; 

Finalmente eu tenho solução para isso, verifique meu arquivo de módulo 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 { } 

Observe declare var require: any; no código acima.

Quanto a mim, usando VSCode e Angular 5, só tive que adicionar “node” aos tipos em tsconfig.app.json. Salve e reinicie o servidor.

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

Mudei o arquivo tsconfig.json para uma nova pasta para reestruturar meu projeto.

Por isso, não foi possível resolver o caminho para a pasta node_modules / @ types dentro da propriedade typeRoots do tsconfig.json

Então, basta atualizar o caminho de

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

para

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

Para apenas garantir que o caminho para node_modules seja resolvido a partir do novo local do tsconfig.json

 I added "types": [ "node" ] in my ts.config file and its worked for me ts.config file look like "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "module": "es2015", "types": [ "node", "underscore" ] },