Angular4 में अपग्रेड करने के बाद नाम की आवश्यकता नहीं पा सकते हैं

Question

मैं अपने कोणीय प्रोजेक्ट के भीतर चार्ट.जे का उपयोग करना चाहता हूं। पिछले Angular2 संस्करणों में, मैंने एक 'chart.loader.ts' का उपयोग करके यह अच्छा किया है:

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

फिर घटक कोड में मैं बस

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

लेकिन cli 1.0.0 और कोणीय 4 में अपग्रेड करने के बाद, मुझे त्रुटि मिलती है: "नाम की आवश्यकता नहीं है"।

त्रुटि को पुन: उत्पन्न करने के लिए:

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

मेरे 'tsconfig.json' में, मेरे पास है

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

और 'node_modules/@types/node/index.d.ts' में है:

declare var require: NodeRequire;

इसलिए मैं उलझन में हूं।

BTW, मैं लगातार चेतावनी का सामना:

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

हालांकि मैंने "पूर्वसर्ग": "" को अपने '.नंगुलर-क्ली.जसन' में सेट किया है। क्या इसका कारण यह हो सकता है कि 'कोणीय-क्ले.जसन' से '।

Comments

समस्या आपकी tsconfig.json फ़ाइल में है। समाधान यहाँ देखें: stackoverflow.com/questions/31173738/…

— IndyWill

@ IndyWill धन्यवाद, वास्तव में यह src / tsconfig.app.json में होना चाहिए। क्या आप इसे उत्तर के रूप में लिख सकते हैं?

— थॉमस वांग

इलेक्ट्रॉन + कोणीय 2/4 के लिए देखें: stackoverflow.com/a/47364843/5248229

— mihaa123

Answer 1

समस्या (जैसा कि टाइपस्क्रिप्ट त्रुटि TS2304 में उल्लिखित है : नाम 'आवश्यकता' नहीं मिल सकता है ) यह है कि नोड के लिए टाइप परिभाषाएँ स्थापित नहीं हैं।

एक अनुमानित genned के साथ with @angular/cli 1.x, विशिष्ट कदम होना चाहिए:

चरण 1 :

@types/nodeनिम्न में से किसी एक के साथ स्थापित करें :

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

चरण 2 : अपनी src / tsconfig.app.json फ़ाइल को संपादित करें और खाली के स्थान पर निम्नलिखित जोड़ें "types": [], जो पहले से ही होना चाहिए:

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

अगर मुझे कुछ याद आया है, तो एक टिप्पणी करें और मैं अपना उत्तर संपादित करूंगा।

Comments

मेरे लिए अच्छा काम नहीं किया ... क्या मुझे कुछ और स्थापित करना है?

मेरे लिए भी यह काम नहीं करता है। यहाँ विवरण: stackoverflow.com/questions/44421367/types-not-found

— user3471528

नोट: आपको फ़ोल्डर को जोड़ने के tsconfig.app.jsonतहत बदलना होगा , यह रूट tsconfig में नहीं हैsrc"types": ["node"]

— ब्रूनो एलएम

मेरे लिए भी काम नहीं किया। केवल declare var require: any;आश्चर्यजनक रूप से मदद करने का सुझाव देने वाला एक और उत्तर ।

— परितोष

मैं चरण 2 से चूक गया। धन्यवाद !!

— रॉबी स्मिथ

Answer 2

अंत में मुझे इसके लिए समाधान मिल गया, मेरे ऐप मॉड्यूल फ़ाइल की जांच करें:

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 { }

declare var require: any;उपरोक्त कोड में सूचना ।

Comments

मैं इस मुद्दे को polyfills.ts फ़ाइल में था, लेकिन आपके "var var की आवश्यकता है: कोई भी;" ठीक कर दिया। धन्यवाद

— आंद्रे

Answer 3

कोणीय 7+ में काम करेगा

---

मैं उसी मुद्दे का सामना कर रहा था, मैं जोड़ रहा था

"types": ["node"]

जड़ फ़ोल्डर के tsconfig.json के लिए ।

Src फोल्डर के अंतर्गत एक और tsconfig.app.json था और मुझे इसे जोड़कर हल किया गया

"types": ["node"]

के तहत tsconfig.app.json फ़ाइलcompilerOptions

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["node"]  ----------------------< added node to the array
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Answer 4

मेरे लिए, VSCode और Angular 5 का उपयोग करके, केवल tsconfig.app.json के प्रकारों में "नोड" जोड़ना था। सर्वर को सहेजें, और पुनरारंभ करें।

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

एक जिज्ञासु बात यह है कि यह समस्या "ts- नोड के साथ एक्सुलेट करते समय नहीं मिल सकती है" () की आवश्यकता होती है

Comments

मेरे लिए कोणीय 6 में एक आकर्षण की तरह काम किया।

— पिक मिकेल

इस समाधान ने मेरे लिए एक कोणीय 6 पुस्तकालय में काम किया। मैं हालांकि "types": [ "node" ],करने के लिए जोड़ने की जरूरत है tsconfig.lib.json।

— गस

और रेस्टार्ट सर्वर। मेरी अच्छाई, यह सब साथ था। कोणीय 9. 👍 पर काम करना

— एंडर्स 8

Answer 5

अभी भी उत्तर पर यकीन नहीं है, लेकिन एक संभावित समाधान है

import * as Chart from 'chart.js';

Answer 6

मैंने कहा

"types": [ 
   "node"
]

मेरे tsconfig फ़ाइल में और इसके लिए मेरे tsconfig.json फ़ाइल की तरह काम किया

  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [ 
      "node",
      "underscore"
    ]
  },  

Comments

हालांकि यह कोड उस प्रश्न का उत्तर दे सकता है जो आप अभी भी कुछ व्याख्यात्मक वाक्य जोड़ने पर विचार कर सकते हैं क्योंकि इससे अन्य उपयोगकर्ताओं के लिए आपके उत्तर का मूल्य बढ़ जाता है।

— एमबीटी

Answer 7

त्रुटि देने वाली फ़ाइल के शीर्ष पर निम्न पंक्ति जोड़ें:

declare var require: any

Answer 8

मैंने tsconfig.jsonअपनी परियोजना के पुनर्गठन के लिए फ़ाइल को एक नए फ़ोल्डर में स्थानांतरित कर दिया।

इसलिए यह tsconfig.json की typeRootsसंपत्ति के अंदर node_modules / @ प्रकार फ़ोल्डर के लिए पथ को हल करने में सक्षम नहीं था

तो बस से पथ को अद्यतन करें

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

सेवा

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

बस यह सुनिश्चित करने के लिए कि tsconfig.json के नए स्थान से नोड_मॉड्यूल्स का मार्ग हल किया गया है