Angular2 रूटर त्रुटि: 'HomePage' लोड करने के लिए प्राथमिक आउटलेट नहीं मिल रहा है

Question 1

मैंने अभी नई रूटिंग लाइब्रेरी (@ कोणीय / राउटर v3.0.0-Alpha.7) का उपयोग करना शुरू किया है, लेकिन आधिकारिक डॉक्स का अनुसरण करने से नीचे त्रुटि होती है:

browser_adapter.ts:74: EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomePage'

प्रश्न है - मैं त्रुटि से कैसे छुटकारा पाऊंगा और राउटर को उम्मीद के मुताबिक व्यवहार करना चाहिए? क्या मैं एक सेटिंग चूक गया हूं?

(अल्फ़ा .6 संस्करण का उपयोग करते समय एक ही त्रुटि दिखाई देती है।)

app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'app',
    template: `
        <p>Angular 2 is running...</p>
        <!-- Routed views go here -->
        <router-outlet></router-outlet>
    `,
    providers: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { HomePage } from './pages/home/home';

export const routes: RouterConfig = [
    { path: '', component: HomePage }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

घर

import { Component } from '@angular/core';

@Component({
    template: '<h1>Home Page</h1>'
})
export class HomePage {
}

मुख्य

/* Avoid: 'error TS2304: Cannot find name <type>' during compilation */
///<reference path="../../typings/index.d.ts" />

import { bootstrap } from "@angular/platform-browser-dynamic";
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from "./app.component";

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
]).catch(err => console.error(err));

Question 2

आपके app.component.ts लुक में एक त्रुटि है, जैसे आपने प्रोवाइडर एरे में एक निर्देश घोषित किया है।

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'app',
    template: `
        <p>Angular 2 is running...</p>
        <!-- Routed views go here -->
        <router-outlet></router-outlet>
        `,
     directives: [ROUTER_DIRECTIVES] //here
})
export class AppComponent {
}

Question 3

हालांकि @JS_astronauts ने पहले ही एक समाधान प्रदान कर दिया है, मुझे लगता है कि यह त्रुटि को समझाने के लिए शिक्षाप्रद होगा ...

प्राथमिक आउटलेट तब सेट होता है जब कोणीय एक HTML टेम्पलेट को पार्स करता है और RouterOutlet के चयनकर्ता को खोजने पर डायरेक्टिव राउटरऑउटलेट प्राप्त करता है , अर्थात <router-outlet></router-outlet>।

हालाँकि आपका टेम्पलेट सम्‍मिलित नहीं है <router-outlet></router-outlet>, आपके घटक में सम्‍मिलित नहीं है directives: [ROUTER_DIRECTIVES], इसलिए कोणीय उस निर्देश द्वारा परिभाषित किसी भी निर्देश को नहीं देखेगा:

export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, 
 RouterLinkActive];

इसलिए जब Angular AppComponent के HTML टेम्पलेट्स को पार्स करता है, अगर यह नहीं पहचानता है <router-outlet></router-outlet>तो यह इसे अनदेखा कर देता है। बाद में, जब कोणीय डिफ़ॉल्ट मार्ग घटक (होमपेज) को रेंडर करने की कोशिश करता है, तो यह शिकायत करता है क्योंकि यह नहीं जानता कि इसे कहां रखा जाए।

यह त्रुटि तब भी हो सकती है जब आपके पास अपने तत्व चयनकर्ता में टाइपो हो, जैसे:

<roter-outlet></roter-outlet>

इस स्थिति में, भले ही आपका directivesसरणी सही ढंग से सेट किया गया हो, कोणीय को आवश्यक <router-outlet>तत्व कभी नहीं मिलेगा ।

Question 4

इसके directives metadataबजाय होना चाहिएproviders ,

directives: [ROUTER_DIRECTIVES]

Question 5

मैं इस त्रुटि को बेतरतीब ढंग से अनुभव कर रहा हूं और केवल तभी जब मैं लाइव सर्वर पर प्रकाशित करता हूं। स्थानीय स्तर पर काम करने के दौरान मैंने कभी इसका अनुभव नहीं किया। जब मैं बेतरतीब ढंग से कहता हूं, तो कभी-कभी यह ठीक काम करता है, जब मैं उदाहरण के लिए ताज़ा करता हूं, तो यह उस त्रुटि को ऊपर उल्लिखित करता है और स्क्रीन पर सिर्फ प्रतीक दिखा रहा है। मैं कोणीय 2 पर काम कर रहा हूं।

किसी भी मार्गदर्शन / मदद की बहुत सराहना की जाएगी।