'রাউটার-আউটলেট' কোনও পরিচিত উপাদান নয়

Question 1

আমার একটি কৌণিক ফ্রন্টএন্ড সহ একটি এমভিসি 5 প্রকল্প রয়েছে। এই টিউটোরিয়াল https://angular.io/guide/router এ বর্ণিত হিসাবে আমি রাউটিং যুক্ত করতে চেয়েছিলাম । তাই আমার মধ্যে _Layout.cshtmlআমি একটি যোগ

<base href="/">

এবং আমার অ্যাপ্লিকেশনটিতে আমার রাউটিং তৈরি করেছে mod তবে আমি এটি চালানোর সময় আমি নিম্নলিখিত ত্রুটিটি পেয়েছি:

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>

আমাকে বলে একটি ত্রুটি দেয় যে ভিজ্যুয়াল স্টুডিও 'রাউটার-আউটলেট' ট্যাগটি সমাধান করতে পারে না। আমি কীভাবে এই ত্রুটিটি ঠিক করতে পারি কোনও পরামর্শ? আমি কি একটি রেফারেন্স বা আমদানি মিস করছি বা কিছু উপেক্ষা করছি?

নীচে আমার প্যাকেজ.জসন, অ্যাপ.কম অংশ এবং অ্যাপ্লিকেশন.মডিউল রয়েছে

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';

}

Question 2

সাথে চেষ্টা করুন:

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

রফতানিগুলিতে কনফিগার করার দরকার নেই AppModule, কারণ AppModuleআপনার অ্যাপ্লিকেশনটিতে অন্য মডিউল দ্বারা আমদানি করা হবে না।

Question 3

এটা চেষ্টা কর:

RouterModuleআপনার মধ্যে আমদানি করুনapp.module.ts

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

RouterModuleআপনার মধ্যে যোগ করুনimports []

এটার মত:

 imports: [    RouterModule,  ]

Question 4

আপনি ইউনিট টেস্টিং এবং এই ত্রুটি তারপর আমদানি পেতে করছেন তাহলে 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();    
  }));

Question 5

ধরে নিই যে আপনি কৌণিক-ক্লাইমের সাথে কৌণিক 6 ব্যবহার করছেন এবং আপনি একটি পৃথক রাউটিং মডিউল তৈরি করেছেন যা রাউটিং ক্রিয়াকলাপগুলির জন্য দায়ী - রুটস অ্যারেতে আপনার রুটগুলি কনফিগার করুন sure নিশ্চিত করুন যে আপনি রফটার অ্যারেতে রাউটারমডুল ঘোষণা করছেন। কোডটি এর মতো দেখায়:

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

Question 6

এটি আমার জন্য কাজ করে, যখন আমি app.module.ts এ নিম্নলিখিত কোডগুলি যুক্ত করি

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

Question 7

ধন্যবাদ হিরো সম্পাদক উদাহরণ, যেখানে আমি সঠিক সংজ্ঞা পেয়েছি:

আমি যখন অ্যাপ্লিকেশন রাউটিং মডিউল তৈরি করি:

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

এবং যুক্ত করতে অ্যাপ-রাউটিং.টি ফাইল আপডেট করুন:

@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 {}

এবং app.module.ts আমদানিতে AppRoutingModule যুক্ত করুন:

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

Question 8

আপনার সমস্ত রুটগুলি পরিচালনা করতে পারে এমন একটি রাউটিং উপাদান তৈরি করা কেবল আরও ভাল! কৌনিক ওয়েবসাইটের ডকুমেন্টেশন থেকে! এটা ভাল অনুশীলন!

এনজি মডিউল অ্যাপ্লিকেশন-রাউটিং জেনারেট করে - ফ্ল্যাট - মডুল = অ্যাপ্লিকেশন

উপরের সিএলআই একটি রাউটিং মডিউল উত্পন্ন করে এবং আপনার অ্যাপ্লিকেশন মডিউলে যোগ করে, উত্পন্ন উপাদান থেকে আপনাকে যা করতে হবে তা হ'ল আপনার রুটগুলি ঘোষণা করা, এটি যুক্ত করতে ভুলবেন না:

exports: [
    RouterModule
  ],

আপনার এনজি-মডিউল ডেকরেটারে এটি ডিফল্টরূপে উত্পন্ন অ্যাপ-রাউটিং মডিউলটির সাথে আসে না!

Question 9

দুটি উপায় আছে। আপনি যদি 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 { }

স্নিপেট প্রসারিত করুন

আপনি যদি 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 { }

স্নিপেট প্রসারিত করুন

Question 10

এই বিষয়টি আমার সাথে ছিল। এটির জন্য সহজ কৌশল।

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

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

উপরের ক্রম হিসাবে এটি ব্যবহার করুন। প্রথম আমদানি তারপর ঘোষণাপত্র। এটি আমার জন্য কাজ করেছে।

Question 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 {

}

এই কোড যুক্ত করুন। শুভ কোডিং।

Question 12

যদি কেউ ত্রুটি পেয়ে থাকে তবে দ্রুত এবং সরল সমাধানটি এখানে দেওয়া হল:

কৌণিক প্রকল্পে "'রাউটার-আউটলেট' কোনও পরিচিত উপাদান নয়,

তারপরে,

কেবলমাত্র "app.module.ts" ফাইলটিতে যান এবং নিম্নলিখিত লাইনটি যুক্ত করুন:

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

এবং আমদানিতে 'অ্যাপআর্টিংমোডুল'।