formularios - tablas dinamicas angular 4
No se puede encontrar el nombre ''require'' después de actualizar a Angular4 (8)
Quiero usar Chart.js dentro de mi proyecto Angular. En versiones anteriores de Angular2, he estado haciendo esto bien usando un ''chart.loader.ts'' que tiene:
export const { Chart } = require(''chart.js'');
Luego, en el código del componente, acabo de
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 ''require''".
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 serve
En mi ''tsconfig.json'', tengo
"typeRoots": [
"node_modules/@types"
],
Y en ''node_modules/@types/node/index.d.ts'' hay:
declare var require: NodeRequire;
Entonces estoy confundido.
Por cierto, constantemente encuentro 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?
Funcionará en Angular 7+
Estaba enfrentando el mismo problema, estaba agregando
"types": ["node"]
a tsconfig.json de la carpeta raíz.
Hubo un tsconfig.app.json más en la carpeta src y resolví esto 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"
]
}
Agregue la siguiente línea en la parte superior del archivo que da el error:
declare var require: any
El problema (como se describe en el error de escritura TS2304: no se puede encontrar el nombre ''requerir'' ) es que las definiciones de tipo para nodo no están instaladas.
Con un genérico proyectado
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": []
vacíos
"types": []
, que ya deberían estar allí:
...
"types": [ "node" ],
"typeRoots": [ "../node_modules/@types" ]
...
Si me he perdido algo, escriba un comentario y editaré mi respuesta.
En cuanto a mí, usando VSCode y Angular 5, solo tuve que agregar "nodo" a los tipos en tsconfig.app.json. Guarde y reinicie el servidor.
{
"compilerOptions": {
..
"types": [
"node"
]
}
..
}
Una cosa curiosa es que este problema "no puede encontrar require (", no ocurre cuando se excita con ts-node
Todavía no estoy seguro de la respuesta, pero una posible solución es
import * as Chart from ''chart.js'';
yo añadí
"types": [
"node"
]
en mi archivo tsconfig y funcionó para mí el archivo tsconfig.json parece
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": [
"node",
"underscore"
]
},
tsconfig.json
archivo
tsconfig.json
a una nueva carpeta para reestructurar mi proyecto.
Por lo tanto, no pudo resolver la ruta a la carpeta node_modules / @ types dentro de la propiedad typeRoots de tsconfig.json
Así que solo actualiza la ruta desde
"typeRoots": [
"../node_modules/@types"
]
a
"typeRoots": [
"../../node_modules/@types"
]
Para garantizar que la ruta a node_modules se resuelva desde la nueva ubicación de tsconfig.json
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