कोणीय 2 आरसी 5> घटक लोड नहीं होता

Question

मैं हाल ही में आरसी 4 से एंगुलर 2 आरसी 5 में स्थानांतरित हो गया हूं। तब से मुझे कुछ समस्याएं आई हैं। मुझे यकीन नहीं है कि क्या ये समस्याएं गलती या संक्रमण के कारण हैं। मेरा ऐप घटक इस तरह दिखता है:

import {Component, OnInit} from "@angular/core"; 
import {SetLocationService} from "./auth/set-location.service"; 

@Component({ 
    selector : "my-app", 
    template: ` 
    <app-header></app-header> 
    <router-outlet></router-outlet> 
    <app-footer></app-footer> 
    ` 
}) 

export class AppComponent implements OnInit{ 
    constructor(
    private _setLocationService : SetLocationService 
){} 

    ngOnInit() { 
    this._setLocationService.setLocation(); 
    } 
} 

मार्ग:

import {Routes, RouterModule} from '@angular/router'; 
import {SearchBoxComponent} from "./search/searchBox.component"; 
import {SearchResultComponent} from "./search/search-result.component"; 
import {LoginComponent} from "./auth/login.component"; 
import {SignupComponent} from "./auth/signup.component"; 
import {LogoutComponent} from "./auth/logout.component"; 
import {RecoverPasswordComponent} from "./auth/recover-password.component"; 
import {ProfileComponent} from "./auth/profile.component" 
import {AccountComponent} from "./auth/account.component" 

const appRoutes: Routes = [ 
    {path : '', component: SearchBoxComponent}, 
    {path : 'login', component: LoginComponent}, 
    {path : 'signup', component: SignupComponent}, 
    {path : 'logout', component: LogoutComponent}, 
    {path : 'profile', component: ProfileComponent}, 
    {path : 'account', component: AccountComponent}, 
    {path : 'user/:uname', component: SearchBoxComponent}, 
    {path : 'recover-password', component: RecoverPasswordComponent}, 
    {path : 'search/:params', component: SearchResultComponent}, 
    {path : '**', component : SearchBoxComponent} 
]; 

export const routing = RouterModule.forRoot(appRoutes); 

एप्लिकेशन मॉड्यूल:

// @Modules -> Modules 
import {BrowserModule} from '@angular/platform-browser'; 
import {FormsModule} from '@angular/forms'; 
import {HttpModule} from '@angular/http'; 
import {LocationStrategy, HashLocationStrategy} from '@angular/common'; 
import {NgModule} from '@angular/core'; 
// import {RouterModule} from '@angular/router'; 

// @Routes -> routes 
import {routing} from "./app.routes"; 

// @Components - > Components 
import {AccountComponent} from "./auth/account.component"; 
import {AppComponent} from './app.component'; 
import {ChatBoxComponent} from "./chat/chat-box.component"; 
import {ChatBoxDirective} from "./chat/chat-box.directive"; 
import {FooterComponent} from "./layout/footer.component"; 
import {HeaderComponent} from "./layout/header.component"; 
import {LoginComponent} from "./auth/login.component"; 
import {LogoutComponent} from "./auth/logout.component"; 
import {ProfileComponent} from "./auth/profile.component"; 
import {RecoverPasswordComponent} from "./auth/recover-password.component"; 
import {SearchBoxComponent} from "./search/searchBox.component"; 
import {SearchResultComponent} from "./search/search-result.component"; 
import {SignupComponent} from "./auth/signup.component"; 


// @providers - > services 
import {AuthService} from "./auth/auth.service"; 
import {SetLocationService} from "./auth/set-location.service"; 
import {SearchService} from "./search/search.service"; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing 
    ], 
    declarations: [ 
    AccountComponent, 
    AppComponent, 
    ChatBoxComponent, 
    ChatBoxDirective, 
    FooterComponent, 
    HeaderComponent, 
    LoginComponent, 
    LogoutComponent, 
    ProfileComponent, 
    RecoverPasswordComponent, 
    SearchBoxComponent, 
    SearchResultComponent, 
    SignupComponent 
    ], 
    providers : [ 
    AuthService, 
    SetLocationService, 
    SearchService, 
    {provide: LocationStrategy, useClass: HashLocationStrategy} 
    ], 
    bootstrap: [ 
    AppComponent, 
    HeaderComponent, 
    FooterComponent 
    ] 
}) 

export class AppModule {} 

मेरी पहली समस्या अगर मैं में 1.HeaderComponent, 2.FooterComponent जोड़ने नहीं है app.module का बूटस्ट्रैप, उनमें से कोई भी नहीं (1.HeaderComponent, 2.FooterComponent) रूट रूट सक्रिय होने पर लोड हो जाता है (localhost: 3000), लेकिन SearchBoxComponent। मैं उलझन में हूं, क्योंकि मैंने आधिकारिक दस्तावेज़ में बूटस्ट्रैप में कई घटकों को जोड़ने को नहीं देखा।

मेरी दूसरी समस्या लगभग पहले की तरह ही है। यदि मैं किसी अन्य घटक में एक घटक (seachBoxConmponent) एम्बेड करता हूं जैसे कि निम्न कोड, seachBoxConmponent घटक लोड नहीं होता है लेकिन अन्य भागों।

@Component({ 
    selector: "search-result", 
    template : ` 
      <seachBox></searchBox> 
    <div class="tag_list"> 
     <p *ngFor = "let tag of result.obj.tags" class = "tag-li" > 
     <a [routerLink] = "['/search', tag]" (click) = "onSearchCliked($event, tag)"> {{tag}} </a> 
     </p> 
    </div> 
` 
}) 

मैं सोच रहा था, किसी को भी कृपया मेरी मदद कर सकते हैं, मैं पिछले कुछ दिनों के लिए इस समस्या पर काम कर रहा है, फिर भी मैं यहाँ अटक कर रहा हूँ।

Answer 1

मुझे आरसी 5 में माइग्रेट करने में भी सभी प्रकार की परेशानी हो रही है, लेकिन केवल AppComponent आपके बूटस्ट्रैप में होना चाहिए। यदि आप केवल राउटर के माध्यम से एक घटक प्राप्त करते हैं, तो वह घटक घोषणाओं में नहीं होना चाहिए। लेकिन उस घटक को निर्यात डिफ़ॉल्ट वर्ग घटक नाम का उपयोग करना चाहिए।

जिस तरह से मैं इस पर हमला कर रहा हूं, सब कुछ टिप्पणी कर रहा है और एक समय में घटकों और सेवाओं को जोड़ रहा है।

Answer 2

सुनिश्चित करें कि एक घटक निर्यात करता है जो मॉड्यूल निर्यात करता है। अन्यथा यह घटक इसका उपयोग करने की कोशिश कर रहे अन्य घटकों के लिए दृश्यमान नहीं होगा।

मैं खोज, साइनअप, चैट इत्यादि जैसी अलग-अलग चिंताओं के लिए अलग-अलग मॉड्यूल बनाने और उनके घटकों को साझा करने के लिए नीचे दिए गए पैटर्न का पालन करने का सुझाव दूंगा।

मैंने देखा है कि अंगुलर 2 चुपचाप विफल रहता है जब एक घटक का उपयोग किया जा रहा है। आप टेम्पलेट में एक घटक जोड़ देंगे और यह केवल प्रस्तुत नहीं करेगा, कोई त्रुटि नहीं। आरसी 5 से पहले आमतौर पर इसका मतलब था कि आपने निर्देशों में वांछित घटक निर्दिष्ट नहीं किया है: [] सरणी। आरसी 5 के साथ, इसका मतलब है कि आप मॉड्यूल से घटक निर्यात नहीं कर रहे हैं जो इसे घोषित करता है और/या मॉड्यूल में इसे आयात करना चाहता है जो इसका उपयोग करना चाहता है।

FooModule वाणी और निर्यात FooComponent, अन्य घटकों (संभवत: अन्य मॉड्यूल में) द्वारा उपयोग के लिए यह उजागर:

@NgModule({ 
    declarations: [FooComponent], 
    imports: [BrowserModule, FormsModule], 
    exports: [FooComponent] 

}) 
export class FooModule {} 

FooComponent:

@Component({ 
    selector: 'foo', 
    template: `FOO` 
}) 
export class FooComponent {} 

BarModule आयात FooModule, घटकों के लिए उपयोग हो रहा यह खुलासा (अर्थात् FooComponent):

@NgModule({ 
    declarations: [BarComponent], 
    imports: [FooModule, FormsModule], 
    exports: [BarComponent] 

}) 
export class BarModule {} 

बा rComponent FooComponent तक पहुंच सकता है और इसे टेम्पलेट में उपयोग कर सकता है:

@Component({ 
    selector: 'bar', 
    template: `<foo></foo>BAR` 
}) 
export class BarComponent {} 

Answer 3

मेरी मदद करने के लिए धन्यवाद दोस्तों। अंत में, मैंने समस्या हल की। मैं वास्तव में हेडर कॉम्पोनेंट और फ़ूटर कॉम्पोननेट में ROUTER_DIRECTIVES सहित था। ये वे जगह हैं जहां संघर्ष होते हैं। ऐसा इसलिए है क्योंकि "राउटर मॉड्यूल" पूरी तरह से ROUTER_DIRECTIVES प्रदान करता है। इसलिए, हमें किसी भी घटक में फिर से निर्देश शामिल करने की आवश्यकता नहीं है। मैंने इस निर्देश को हटा दिया और लगभग एक हफ्ते बाद मेरी समस्या ठीक कर दी। मुझे दस्तावेज़ों के अनुसार पुरानी शैली वाली राउटर की तरह शैली बदलनी पड़ी।

@ एलेक्स सार्टन: समस्या के ब्योरे को समझाने के लिए बहुत बहुत धन्यवाद। मैं अलग-अलग चिंताओं के लिए अलग मॉड्यूल बनाने के बिना समस्या को ठीक करता हूं। लेकिन सभी चिंताओं को अलग रखना बेहतर है। तुम्हारी सहायता सराहनीय है।