meaning - angularjs tutorial pdf
त्रुटि: मॉड्यूल द्वारा आयातित अप्रत्याशित मान 'अपरिभाषित' (20)
अप्रयुक्त " निजी http: Http " का तर्क app.component.ts के निर्माता में मुझे एक ही त्रुटि के कारण हुआ और इसने निर्माणकर्ता के अप्रयुक्त तर्क को हटाने पर हल किया
मुझे यह त्रुटि NgModule के लिए माइग्रेट करने के बाद मिल रही है, त्रुटि बहुत अधिक मदद नहीं करती है, कोई सलाह कृपया?
Error: Error: Unexpected value 'undefined' imported by the module 'AppModule'
at new BaseException (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:5116:27)
at eval (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:13231:35)
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:13215:48)
at RuntimeCompiler._compileComponents (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15845:51)
at RuntimeCompiler._compileModuleAndComponents (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15769:41)
at RuntimeCompiler.compileModuleAsync (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15746:25)
at PlatformRef_._bootstrapModuleWithZone (http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:9991:29)
at PlatformRef_.bootstrapModule (http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:9984:25)
at Object.eval (http://localhost:5555/app/main.js:8:53)
Evaluating http://localhost:5555/app/main.js
Error loading http://localhost:5555/app/main.js "Report this error at https://github.com/mgechev/angular2-seed/issues"(anonymous function) @ contracts:142ZoneDelegate.invoke @ zone.js?1472711930202:332Zone.run @ zone.js?1472711930202:225(anonymous function) @ zone.js?1472711930202:586ZoneDelegate.invokeTask @ zone.js?1472711930202:365Zone.runTask @ zone.js?1472711930202:265drainMicroTaskQueue @ zone.js?1472711930202:491ZoneTask.invoke @ zone.js?1472711930202:435
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routes } from './app.routes';
import { provide } from '@angular/core';
//dgf ng2-translate
import { TRANSLATE_PROVIDERS, TranslateLoader, TranslateStaticLoader, MissingTranslationHandler } from 'ng2-translate/ng2-translate';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { TranslationNotFoundHandler } from './shared/common/TranslationNotFoundHandler';
//dgf ng2-translate END
import {CalendarModule,DataTableModule,DialogModule,PanelModule} from 'primeng/primeng';
import {TranslateModule} from 'ng2-translate/ng2-translate';
import { AuthGuard,AppConfigService,AppConfig,DateHelper,ThemeComponent,ToolbarComponent, RemoveHostTagDirective } from './index';
import { HomeComponent,MessagesExampleComponent,PrimeNgHomeComponent,CalendarComponent,Ng2BootstrapExamplesComponent,DatepickerDemoComponent,UserListComponent,UserEditComponent,ContractListComponent,AboutComponent } from './index';
@NgModule({
imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), /* AboutModule, HomeModule, SharedModule.forRoot()*/
FormsModule,
ReactiveFormsModule,
//third-party
,TranslateModule.forRoot() //,
//third-party PRIMENG
,CalendarModule,DataTableModule,DialogModule,PanelModule
],
declarations: [
AppComponent,ThemeComponent, ToolbarComponent, RemoveHostTagDirective,
HomeComponent,MessagesExampleComponent,PrimeNgHomeComponent,CalendarComponent,Ng2BootstrapExamplesComponent,DatepickerDemoComponent,UserListComponent,UserEditComponent,ContractListComponent,AboutComponent
],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
},
FormsModule,
ReactiveFormsModule,
provide(TranslateLoader, { //DGF ng2-translate
useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [Http]
}),
provide(MissingTranslationHandler, { useClass: TranslationNotFoundHandler }), //DGF ng2-translate
AuthGuard,AppConfigService,AppConfig,
DateHelper
],
bootstrap: [AppComponent]
})
export class AppModule { }
आपको
import { provide } from '@angular/core';
लाइन
import { provide } from '@angular/core';
को हटाना होगा
import { provide } from '@angular/core';
app.module.ts
से
provide
रूप में अब हटा दिया गया है।
आपको प्रदाताओं के रूप में नीचे दिए गए उपयोग का उपयोग
provide
:
providers: [
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
},
FormsModule,
ReactiveFormsModule,
// disableDeprecatedForms(),
// provideForms(),
// HTTP_PROVIDERS, //DGF needed for ng2-translate
// TRANSLATE_PROVIDERS, //DGF ng2-translate (not required, but recommended to have 1 unique instance of your service)
{
provide : TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [Http]
},
{
provide : MissingTranslationHandler,
useClass: TranslationNotFoundHandler
},
AuthGuard,AppConfigService,AppConfig,
DateHelper
]
उपरोक्त समाधानों में से किसी ने भी मेरे लिए काम नहीं किया, लेकिन बस फिर से "एनजी सर्व" को रोकना और चलाना।
उसी त्रुटि का सामना करने वाले किसी व्यक्ति के लिए, मेरी स्थिति यह थी कि आयात अनुभाग में मेरे पास दोहरे कॉमा हैं
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot(appRoutes), , // <-- this was the error
// ....
],
एक और कारण इस तरह से कुछ कोड हो सकता है:
import { NgModule } from '@angular/core';
import { SharedModule } from 'app/shared/shared.module';
import { CoreModule } from 'app/core/core.module';
import { RouterModule } from '@angular/router';
import { COMPANY_ROUTES } from 'app/company/company.routing';
import { CompanyService } from 'app/company/services/company.service';
import { CompanyListComponent } from 'app/company/components/company-list/company-list.component';
@NgModule({
imports: [
CoreModule,
SharedModule,
RouterModule.forChild(COMPANY_ROUTES)
],
declarations: [
CompanyListComponent
],
providers: [
CompanyService
],
exports: [
]
})
export class CompanyModule { }
क्योंकि निर्यात खाली सरणी है और इसके पहले, इसे हटा दिया जाना चाहिए।
एक ही अपवाद था जब एक कोणीय 5 अनुप्रयोग को संकलित करने की कोशिश की गई थी।
Unexpected value 'undefined' imported by the module 'DemoAppModule'
मेरे मामले में यह पता चला कि यह एक परिपत्र निर्भरता थी जो मुझे एक टूल madge का उपयोग करके मिली थी। फ़ाइलों को चलाने के द्वारा परिपत्र निर्भरता पाया
npx madge --circular --extensions ts src/
जब तक आप सुनिश्चित हैं कि आप कुछ भी गलत नहीं कर रहे हैं, कृपया "एनजी सर्व" को समाप्त करें और इसे पुनरारंभ करें। ऐसा करने से, कंपाइलर अपना सारा काम करता है और ऐप उम्मीद के मुताबिक काम करता है। मॉड्यूल के साथ पहले के अनुभवों ने मुझे सिखाया है कि "एनजी सर्व" न होने पर या टर्मिनल को फिर से शुरू करने के बाद उन्हें बनाने के लिए मुझे बनाया जाए।
जब आप किसी अन्य घटक के लिए एक नया घटक उत्सर्जित कर रहे हैं तो "एनजी सर्व" पर भी काम करता है, यह संभव है कि कंपाइलर ने आपके नए घटक को मान्यता नहीं दी हो, बस "एनजी सर्व" को पुनः आरंभ
यह मेरे लिए सिर्फ कुछ मिनट पहले काम किया।
दो मॉड्यूल की परिपत्र निर्भरता का यह मुद्दा
मॉड्यूल 1: आयात मॉड्यूल 2
मॉड्यूल 2: आयात मॉड्यूल 1
मुद्दा यह है कि स्रोत फ़ाइल गायब है जिसके लिए कम से कम एक आयात है।
उदाहरण के लिए मुझे वही त्रुटि मिली जब मैं उपयोग कर रहा था
import { AppRoutingModule } from './app-routing.module';
लेकिन फ़ाइल './app-rout.module' दिए गए पथ में नहीं थी।
मैंने यह आयात हटा दिया और त्रुटि चली गई।
मेरी समस्या दो बार index.ts में निर्यात हो रही थी
उनमें से एक को हटाने से समस्या हल हो गई।
मेरे पास एक ही त्रुटि थी, उपरोक्त सुझावों में से कोई भी मदद नहीं करता था।
मेरे मामले में, यह वेबस्टॉर्म के कारण हुआ, दो आयातों को एक में मिला दिया।
import { ComponentOne, ComponentTwo } from '../component-dir';
मैंने इसे दो अलग-अलग आयातों में निकाला
import { ComponentOne } from '../component-dir/component-one.service';
import { ComponentTwo } from '../component-dir/component-two.model';
इसके बाद यह बिना किसी त्रुटि के काम करता है।
मेरे पास यह त्रुटि थी क्योंकि मेरे पास मेरे ऐप की जड़ में एक
index.ts
फ़ाइल थी जो मेरे
app.component.ts
को निर्यात कर
app.component.ts
।
इसलिए मैंने सोचा कि मैं निम्नलिखित कर सकता हूं:
import { AppComponent } from './';
यह काम किया और मुझे कोई लाल स्क्वीजीली लाइनें नहीं दी और यहां तक कि जब आप इसे टाइप करना शुरू करते हैं तो इंटेलीजेंस भी AppComponent लाता है। लेकिन यह पता लगाने के लिए आया कि यह इस त्रुटि का कारण था। मैं इसे बदलने के बाद:
import { AppComponent } from './app.component';
त्रुटि दूर हो गई।
मेरे लिए समस्या को आयात अनुक्रम को बदलकर हल किया गया था:
मेरे साथ एक त्रुटि हुई:
imports: [
BrowserModule, HttpClientModule, AppRoutingModule,
CommonModule
],
इसे बदल दिया गया:
imports: [
BrowserModule, CommonModule, HttpClientModule,
AppRoutingModule
],
मेरे लिए, यह त्रुटि सिर्फ अप्रयुक्त आयात के कारण हुई थी:
import { NgModule, Input } from '@angular/core';
परिणामी त्रुटि:
इनपुट घोषित किया गया है, लेकिन यह मूल्य कभी पढ़ा नहीं गया है
यह टिप्पणी करें, और त्रुटि उत्पन्न नहीं होती है:
import { NgModule/*, Input*/ } from '@angular/core';
मैं इसे सभी अनुक्रमणिका निर्यात फ़ाइल हटाकर ठीक करता हूं, जिसमें पाइप, सेवा शामिल है। फिर सभी फ़ाइल आयात पथ विशिष्ट पथ है। जैसे।
import { AuthService } from './_common/services/auth.service';
बदलने के
import { AuthService } from './_common/services';
इसके अलावा, डिफ़ॉल्ट वर्ग निर्यात न करें।
मैं एक घटक पुस्तकालय का निर्माण कर रहा हूँ और मेरे अनुप्रयोग में यह त्रुटि मिलने लगी है कि उक्त पुस्तकालय आयात कर रहा है।
जब
ng build --prod
या
ng serve --aot
में चल रहा हो तो मुझे मिलेगा:
Unexpected value 'undefined' imported by the module 'ɵm in node_modules/<library-name>/<library-name>.d.ts'
ng serve
का उपयोग
ng serve
या पुस्तकालय में मॉड्यूल का परीक्षण
ng serve
समय भी कोई त्रुटि नहीं होती है - निर्माण में।
मुझे पता है कि मैं भी intellisense द्वारा गुमराह किया गया था। मेरे कुछ मॉड्यूलों के लिए मैंने एक बहन मॉड्यूल को आयात किया था
import { DesignModule } from '../../design';
के बजाय
import { DesignModule } from '../../design/design.module';
यह मेरे द्वारा बताए गए को छोड़कर सभी बिल्ड में ठीक काम करता है।
यह नीचे पिन करने के लिए भयानक था और मैं भाग्यशाली था कि यह मुझे इससे ज्यादा समय नहीं लगा। आशा है कि यह किसी की मदद करेंगे।
मैंने इस समस्या को इस स्थिति में पूरा किया:
- app-module --- app-routing // app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module // sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!
क्योंकि केवल एक
root
।
संभवत: त्रुटि AppModule.ts फ़ाइल से संबंधित होगी।
इस समस्या को हल करने के लिए कि क्या प्रत्येक घटक घोषित किया गया है और प्रत्येक सेवा जिसे हम घोषित करते हैं, उसे प्रदाताओं आदि में डाल दिया जाता है।
और यहां तक कि अगर AppModule फ़ाइल में सब कुछ सही लगता है और आपको अभी भी त्रुटि मिलती है, तो अपने चल रहे कोणीय उदाहरण को रोक दें और इसे एक बार फिर से शुरू करें। यदि मॉड्यूल फ़ाइल में सब कुछ सही है और यदि आपको अभी भी त्रुटि मिल रही है तो आपकी समस्या का समाधान हो सकता है।
सुनिश्चित करें कि आपको इस तरह एक मॉड्यूल / घटक आयात नहीं करना चाहिए:
import { YOUR_COMPONENT } from './';
लेकिन यह होना चाहिए
import { YOUR_COMPONENT } from './YOUR_COMPONENT.ts';