Angular2 - 'राउटर-आउटलेट' एक ज्ञात तत्व नहीं है

Question

मैंने गहरे बाल पथ वाले मार्ग बनाए। मैं जोड़ा <router-outlet>को AdminComponent घटक है जो मैं NgModule में लपेटा। लेकिन पृष्ठ को ताज़ा करने के बाद मुझे यह त्रुटि मिली:

'router-outlet' is not a known element

शायद यह इसलिए हुआ क्योंकि मैं कुछ मॉड्यूल को admin.module.ts में आयात करना भूल गया था

कृपया मदद करे। धन्यवाद।

app.routes.ts

export const routes: Routes = [
    {
        path: '',
        component: AppComponent,
        children: [
            {
                path: '',
                component: LoginComponent
            },
            {
                path: 'admin',
                component: AdminComponent
            },
            {
                path: 'user',
                component: UserComponent
            },
            {
                path: 'there',
                component: ThereComponent
            }
        ]
    }
]

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        AppRoutes,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        RouterModule,
        TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => {
                return new TranslateStaticLoader(http, './src/assets/i18n', '.json')
            },
            deps: [Http]
        }),
        UserComponentModule,
        AdminComponentModule,
        LoginComponentModule,
        ThereComponentModule,
        DashboardComponentModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        FormBuilder
    ],
    bootstrap: [AppComponent]
})

admin.component.ts और admin.module.ts

//  admin.component.ts
import {Component} from "@angular/core";

@Component({
    selector: 'admin',
    template: "<router-outlet></router-outlet>",
})

export class AdminComponent {
    constructor() {

    }
}

//  admin.module.ts
const ADMIN_DECLARATION = [
    AdminComponent
];

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        ADMIN_DECLARATION
    ],
    exports: [
        ADMIN_DECLARATION
    ],
    providers: [
        TranslateService,
        FormBuilder
    ]
})

export class AdminComponentModule {

}

Comments

मुझे बस एक याद आ रही थी;

— मेहराज मलिक

Answer 1

AdminComponentका हिस्सा है AdminComponentModuleऔर आपने मॉड्यूल के RouterModuleअंदर आयात नहीं किया है AdminComponentModule:

//  admin.component.ts
import {Component} from "@angular/core";

@Component({
    selector: 'admin',
    template: "<router-outlet></router-outlet>",
})

export class AdminComponent {
    constructor() {

    }
}

//  admin.module.ts
const ADMIN_DECLARATION = [
    AdminComponent
];

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule,
        RouterModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        ADMIN_DECLARATION
    ],
    exports: [
        ADMIN_DECLARATION
    ],
    providers: [
        TranslateService,
        FormBuilder
    ]
})

export class AdminComponentModule {

}

Comments

हाय @yankee मैं आलसी मॉड्यूल सुविधा का उपयोग कर रहा हूं और मैंने app.rout.module.ts फ़ाइल को अलग कर दिया है। अगर मैं 'आयात। AppRoutModule} को' ./app-rout.module 'शामिल करता हूं; और app.module.ts में आयात करें तो फिर से मुझे stackoverflow.com/questions/49670232/… समस्या का सामना करना पड़ता है । आपसे अनुरोध है कि यदि संभव हो तो मदद करें '

— स्वप्निल येवले

Answer 2

आपने RouterModule का निर्यात नहीं किया।

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

Comments

जी श्रीमान। धन्यवाद!

— जोन्का 33

Answer 3

इस कोड को जोड़ें

import { provideRoutes} from '@angular/router';

आपके app.module.ts

मेरे लिए काम किया।

Comments

मेरी खुशी सर :)

— pulkit219

धन्यवाद यह मेरी मदद की .... आम तौर पर पूछ रहे हैं कि यू लोग वेबसाइटों से सभी डॉक्स पढ़ते हैं या केवल अनुभव से चीजों को जानते हैं ????

— Gvs अखिल

@ अकील मेरी खुशी नहीं, मैं सिर्फ तुम्हारी तरह लग रहा था और कुछ टिप्पणी ने मेरी मदद की। सिर्फ दस्तावेजीकरण पढ़ना मेरे लिए कभी आसान नहीं रहा!

— पुलकित 219

Answer 4

अपने app.module.ts फ़ाइल में

import { routing } from './app-routing.module';

//and then write within imports
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    **routing**,
    EmployeeModule
  ],

Answer 5

यह मेरे लिए काम करता है:

[NO_ERRORS_SCHEMA]AppModule में स्कीमा जोड़ें ।

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

@NgModule({
  schemas : [NO_ERRORS_SCHEMA]  
})

Answer 6

app.module.ts

import { MyRoutingModule } from './MyRoutingModulePath';

  @NgModule({
  imports: [
    MyRoutingModule
  ])

Comments

हालांकि यह लेखकों के सवाल का जवाब दे सकता है, लेकिन इसमें कुछ स्पष्ट शब्दों और प्रलेखन के लिंक का अभाव है। इसके आसपास कुछ वाक्यांशों के बिना रॉ कोड स्निपेट्स बहुत उपयोगी नहीं हैं। आप यह भी पा सकते हैं कि कैसे एक अच्छा उत्तर लिखने में बहुत मददगार है। कृपया अपना उत्तर संपादित करें।

— नरक

मेरे देर से जवाब में कुछ भी मूल नहीं है। मैंने इंटरनेट पर पाए जाने वाले समाधानों को लागू करने के लिए संघर्ष किया। मेरे वास्तु विशेष की वजह से उत्साह, भ्रमित और समय महंगा। मैं मुझे प्रक्रिया सिखाने के बजाय हल करने के लिए एक संक्षिप्त उत्तर की तलाश में था। आखिरकार मैंने इसे प्रबंधित किया, मेरे लिए यह स्पष्ट हो गया कि पूरे उदाहरणों में यह देखना मुश्किल है। निश्चित रूप से, असफल होने के कई तरीके हैं। लेकिन कई मेरे जैसे ही असफल हो जाएंगे। यह उत्तर उन लोगों के लिए है जो इसे ठीक करने के करीब हैं लेकिन इसे सही होने से बहुत दूर हैं।

— profimedica