सवाल कोणीय 2 राउटर त्रुटि: 'होमपेज' लोड करने के लिए प्राथमिक आउटलेट नहीं मिल सकता


मैंने बस नई रूटिंग लाइब्रेरी (@ कोणीय / राउटर 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)
];

home.ts

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

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

main.ts

/* 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));

76
2018-06-21 16:59


मूल


मुझे अनुपलब्ध टेम्पलेट के कारण एक ही त्रुटि हो रही थी '<router-outlet></router-outlet>' यह टाइपो त्रुटि के कारण भी हो सकता है '<router-outlet></router-outlet>' - Rajiv Bhardwaj


जवाब:


आपके पास एक त्रुटि है 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 {
}

71
2018-06-21 17:59



बस! मैं स्पष्ट रूप से बहुत लंबे समय तक इस पर घूर रहा हूं। @Micronyks भी धन्यवाद! - David
यह सिर्फ मेरे दिन बचाया! - cholewa1992
जैसा कि मैंने जोड़ा, मेरी त्रुटि हल हो गई <router-outlet></router-outlet> । जब मेरे पास नहीं है तब भी त्रुटि नहीं मिल रही है directives: [ROUTER_DIRECTIVES] @ कॉम्पोनेंट सेक्शन में। - Rajiv Bhardwaj
ROUTER_DIRECTIVES कोणीय 2 के लिए अधिक प्रासंगिक नहीं है। angular.io/docs/ts/latest/guide/router.html - Dipendu Paul


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

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

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

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

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


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

<roter-outlet></roter-outlet>

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


85
2017-07-09 16:55



बाद के संस्करणों का उपयोग करने वाले किसी के लिए बस एक नोट: @Component की 'निर्देश' संपत्ति आरसी 6 में हटा दी गई है। stackoverflow.com/questions/39658186/... - Will
अपने तत्व चयनकर्ता में टाइप करें: या यदि आपका टेम्पलेट बस टैग को सभी को याद कर रहा है ... - Joshua Drake
एक और नोट: यदि आप कॉपी और पेस्ट कर रहे हैं, तो यह कहना चाहिए <router-outlet></router-outlet> । यह गायब है u शुरुआत और अंत टैग में - ntgCleaner
शर्मिंदा है कि घुमाव से राउटर में सुधार न्यूनतम चरित्र परिवर्तन आवश्यकताओं को कम नहीं करता है - aland


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

directives: [ROUTER_DIRECTIVES]

7
2018-06-21 18:02