Quiero usar Chart.js dentro de mi proyecto Angular. En versiones anteriores de Angular2, lo he estado haciendo bien usando un 'chart.loader.ts' que tiene:
export const { Chart } = require('chart.js');Luego, en el código del componente, simplemente
import { Chart } from './chart.loader';Pero después de actualizar a cli 1.0.0 y Angular 4, aparece el error: "No se puede encontrar el nombre 'requerir'".
Para reproducir el error:
ng new newapp cd newapp npm install chart.js --save echo "export const { Chart } = require('chart.js');" >> src/app/chart.loader.ts ng serveEn mi 'tsconfig.json', tengo
"typeRoots": [ "node_modules/@types" ],Y en 'node_modules/@types/node/index.d.ts' hay:
declare var require: NodeRequire;Así que estoy confundido.
Por cierto, constantemente me encuentro con la advertencia:
[tslint] The selector of the component "OverviewComponent" should have prefix "app"(component-selector)Aunque he establecido el "prefijo": "" en mi '.angular-cli.json'. ¿Podría ser porque cambiar de 'angular-cli.json' a '.angular-cli.json' es la causa?
El problema (como se describe en el error de mecanografiado TS2304: no se puede encontrar el nombre 'requerir' ) es que las definiciones de tipo para el nodo no están instaladas.
Con una generación proyectada with @angular/cli 1.x , los pasos específicos deben ser:
Paso 1 :
Instale @types/node con cualquiera de los siguientes:
- npm install --save @types/node - yarn add @types/node -D Paso 2 : edite su archivo src/tsconfig.app.json y agregue lo siguiente en lugar de los "types": [] , que ya debería estar allí:
... "types": [ "node" ], "typeRoots": [ "../node_modules/@types" ] ...Si me he perdido algo, escribe un comentario y editaré mi respuesta.
Estaba enfrentando el mismo problema, estaba agregando
"types": ["node"]a tsconfig.json de la carpeta raíz.
Había uno más tsconfig.app.json en la carpeta src y lo resolví agregando
"types": ["node"] al archivo tsconfig.app.json en compilerOptions
{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": ["node"] ----------------------< added node to the array }, "exclude": [ "test.ts", "**/*.spec.ts" ] }Finalmente obtuve una solución para esto, verifique el archivo del módulo de mi aplicación:
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 { } Aviso declare var require: any; en el código anterior.