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

Question

मैं एक कोणीय दृश्यपटल के साथ एक mvc 5 परियोजना है। मैं इस ट्यूटोरियल https://angular.io/guide/router में वर्णित रूटिंग जोड़ना चाहता था । तो मेरे में _Layout.cshtmlमैंने एक जोड़ा

<base href="/">

और मेरे app.module में मेरी रूटिंग बनाई। लेकिन जब मैं इसे चलाता हूं तो मुझे निम्नलिखित त्रुटि मिलती है:

Error: Template parse errors:
    'router-outlet' is not a known element:
    1. If 'router-outlet' is an Angular component, then verify that it is part       of this module.
    2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA'   to the '@NgModule.schemas' of this component to suppress this message. ("
    <a routerLink="/dashboard">dashboard</a>
    </nav>
    [ERROR ->]<router-outlet></router-outlet>
     "): ng:///AppModule/AppComponent.html@5:0

मेरे app.com में लाइन

<router-outlet></router-outlet>

मुझे यह बताने में त्रुटि देता है कि विज़ुअल स्टूडियो 'राउटर-आउटलेट' टैग को हल नहीं कर सकता है। किसी भी सुझाव मैं इस त्रुटि को कैसे ठीक कर सकते हैं? मैं एक संदर्भ या एक आयात या कुछ अनदेखी कर रहा हूँ याद आ रही है?

नीचे मेरे पैकेज हैं। json, app.component और app.module

package.json:

{
    "version": "1.0.0",
    "name": "app",
    "private": true,
    "scripts": {},
    "dependencies": {
    "@angular/common": "^4.2.2",
    "@angular/compiler": "^4.2.2",
    "@angular/core": "^4.2.2",
    "@angular/forms": "^4.2.2",
    "@angular/http": "^4.2.2",
    "@angular/platform-browser": "^4.2.2",
    "@angular/platform-browser-dynamic": "^4.2.2",
    "@angular/router": "^4.2.2",
    "@types/core-js": "^0.9.41",
    "angular-in-memory-web-api": "^0.3.2",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "graceful-fs": "^4.0.0",
    "ie-shim": "^0.1.0",
    "minimatch": "^3.0.4",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.0.1",
    "systemjs": "^0.20.12",
    "zone.js": "^0.8.12"
    },
    "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-tsc": "^1.3.2",
    "gulp-typescript": "^3.1.7",
    "path": "^0.12.7",
    "typescript": "^2.3.3"
    }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import {DashboardComponent} from "./dashboard/dashboard.component"    

const appRoutes: Routes = [
{
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full',
    component: DashboardComponent
},  
{
    path: 'dashboard',
    component: DashboardComponent
}
];
@NgModule({
imports: [
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule               
],
exports: [RouterModule],
declarations: [
    AppComponent,  
    DashboardComponent      
],
bootstrap: [AppComponent]
})
export class AppModule {

}

app.component.ts:

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

@Component({
selector: 'my-app',
template: `
          <h1>{{title}}</h1>
          <nav>
          <a routerLink="/dashboard">dashboard</a>
          </nav>
          <router-outlet></router-outlet>
          `
})
export class AppComponent {
    title = 'app Loaded';

}

Answer 1

इसके साथ प्रयास करें:

@NgModule({
  imports: [
      BrowserModule,
      RouterModule.forRoot(appRoutes),
      FormsModule               
  ],
  declarations: [
      AppComponent,  
      DashboardComponent      
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

में निर्यात को कॉन्फ़िगर करने की आवश्यकता नहीं है AppModule, क्योंकि AppModuleआपके आवेदन में अन्य मॉड्यूल द्वारा आयात नहीं किया जाएगा।

Comments

मुझे समझ में नहीं आया कि आपका क्या मतलब है

— Jota.Toledo

@ Jota.Toledo मैंने रूटिंग के लिए एक अलग मॉड्यूल फ़ाइल बनाई है जहाँ मेरे पास परिभाषित मार्ग हैं। इसके अलावा, मैं BrowserModule, app.module आयातों में FormsModule और रूटिंग-मॉड्यूल फ़ाइल में तीनों हूं। लेकिन मुझे अभी भी यह त्रुटि प्राप्त हो रही है। कोई सलाह?

— निंजा_मद

@ninja_md क्या आपने अपनी रूटिंग-मॉड्यूल फ़ाइल में निर्यात घोषणा को जोड़ा? नीचे की तरह। @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] }) मुझे वही त्रुटि मिल रही थी और इससे मेरी समस्या ठीक हो गई।

— मिहिर कागराना

Answer 2

इसे इस्तेमाल करे:

RouterModuleअपने में आयात करेंapp.module.ts

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

RouterModuleअपने में जोड़ेंimports []

इस तरह:

 imports: [    RouterModule,  ]

Comments

महान, इससे मेरी 'router-outlet' is not a known elementसमस्या हल हो गई। के लिए Angular CLI version: 6.0.8औरAngular version: 6.0.5

— शम्स

Answer 3

यदि आप इकाई परीक्षण कर रहे हैं और यह त्रुटि मिलती है तो RouterTestingModuleअपने app.component.spec.tsया अपने चित्रित घटकों के अंदर आयात करें spec.ts:

import { RouterTestingModule } from '@angular/router/testing';

RouterTestingModuleअपनी imports: []पसंद में जोड़ें

describe('AppComponent', () => {

  beforeEach(async(() => {    
    TestBed.configureTestingModule({    
      imports: [    
        RouterTestingModule    
      ],
      declarations: [    
        AppComponent    
      ],    
    }).compileComponents();    
  }));

Comments

धन्यवाद दोस्त आपने मेरा दिन बचा लिया।

— बेटो सिल्वा

Answer 4

मान लें कि आप कोणीय 6 का उपयोग कोणीय-सीएलआई के साथ कर रहे हैं और आपने एक अलग रूटिंग मॉड्यूल बनाया है जो रूटिंग गतिविधियों के लिए जिम्मेदार है - रूट मार्गों में अपने मार्गों को कॉन्फ़िगर करें। सुनिश्चित करें कि आप निर्यात सरणी में RouterModule घोषित कर रहे हैं। कोड इस तरह दिखेगा:

@NgModule({
      imports: [
      RouterModule,
      RouterModule.forRoot(appRoutes)
     // other imports here
     ],
     exports: [RouterModule]
})
export class AppRoutingModule { }

Comments

मैंने आपके उत्तर में उल्लिखित मार्ग के लिए एक अलग मॉड्यूल फ़ाइल बनाई है। इसके अलावा, मैं BrowserModule, App.module आयातों में FormsModule और AppRout फ़ाइल में RouterModule हूं। लेकिन मुझे अभी भी यह त्रुटि प्राप्त हो रही है। क्या आप मदद कर सकते हैं?

— निन्जा_मद

थोड़ा सा कोड मदद करेगा - राउटिंग मॉड्यूल पार्ट और एप मॉड्यूल पार्ट।

— मैनिट

Ninja_md अपने रूटिंग मॉड्यूल को app.module आयात सरणी में आयात करें। दूसरा बदलाव यह होगा कि निर्यात सरणी में @NgModule के तहत राउटिंग मॉड्यूल में आपके मॉड्यूल फ़ाइल का नाम दिया गया है जिसे आपने फ्रॉस्टिंग बनाया है। मुझे उम्मीद है कि इससे आपकी समस्या दूर हो जाएगी।

— एम। शर्मा

Answer 5

यह मेरे लिए काम करता है, जब मैं app.module.ts में निम्नलिखित कोड जोड़ देता हूं

@NgModule({
...,
   imports: [
     AppRoutingModule
    ],
...
})

Answer 6

शुक्रिया, हीरो एडिटर का उदाहरण, जहाँ मुझे सही परिभाषा मिली:

जब मैं एप्लिकेशन रूटिंग मॉड्यूल उत्पन्न करता हूं:

ng generate module app-routing --flat --module=app

और जोड़ने के लिए app-routing.ts फ़ाइल को अपडेट करें:

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

यहाँ पूर्ण उदाहरण हैं:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent }   from './dashboard/dashboard.component';
import { HeroesComponent }      from './heroes/heroes.component';
import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent }
];

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

और AppRoutModule को app.module.ts आयात में जोड़ें:

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

Answer 7

रूटिंग कंपोनेंट बनाने के लिए यह बेहतर है कि आपके सभी मार्गों को संभाल लिया जाए! कोणीय वेबसाइट प्रलेखन से! यह अच्छा अभ्यास है!

एनजी उत्पन्न मॉड्यूल ऐप-रूटिंग --flat --module = ऐप

उपरोक्त सीएलआई एक रूटिंग मॉड्यूल उत्पन्न करता है और आपके ऐप मॉड्यूल में जोड़ता है, आपको उत्पन्न घटक से केवल अपने मार्गों को घोषित करना है, इसे जोड़ना भी न भूलें:

exports: [
    RouterModule
  ],

अपने एनजी-मॉड्यूल डेकोरेटर के रूप में यह डिफ़ॉल्ट रूप से उत्पन्न ऐप-रूटिंग मॉड्यूल के साथ नहीं आता है!

Answer 8

इसके दो तरीके हैं। 1. यदि आप app.module.tsफ़ाइल को लागू करना चाहते हैं तो:

import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'user', component: UserComponent },
  { path: 'server', component: ServerComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppModule { }

2. यदि आप app-routing.module.ts(अलग रूटिंग मॉड्यूल) फ़ाइल को लागू करना चाहते हैं तो:

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'servers', component: ServersComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

//................................................................

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

@NgModule({
  imports: [
    AppRoutingModule
  ]
})
export class AppModule { }

Answer 9

मेरे मामले में ऐसा इसलिए हुआ क्योंकि RouterModule आयात में चूक गया था।

Answer 10

यह मुद्दा मेरे साथ भी था। इसके लिए सरल ट्रिक।

 @NgModule({
  imports: [
   .....       
  ],
 declarations: [
  ......
 ],

 providers: [...],
 bootstrap: [...]
 })

उपर्युक्त क्रम में इसका उपयोग करें। फिर आयात करें। घोषणाएं। यह मेरे लिए काम करता है।

Answer 11

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

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
{
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full',
    component: DashboardComponent
},  
{
    path: 'dashboard',
    component: DashboardComponent
}
];

@NgModule({
imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule               
],
declarations: [
    AppComponent,  
    DashboardComponent      
],
bootstrap: [AppComponent]
})
export class AppModule {

}

इस कोड को जोड़ें। हैप्पी कोडिंग।

Answer 12

यहाँ त्वरित और सरल समाधान है अगर किसी को त्रुटि हो रही है:

"" राउटर-आउटलेट 'कोणीय परियोजना में एक ज्ञात तत्व नहीं है "

फिर,

बस "app.module.ts" फ़ाइल पर जाएं और निम्नलिखित पंक्ति जोड़ें:

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

और आयात में 'AppRoutModule' भी।