web-dev-qa-db-fra.com

'routeur-prise' n'est pas un élément connu

J'ai un projet MVC 5 avec une interface angular. Je voulais ajouter le routage comme décrit dans ce tutoriel https://angular.io/guide/router . Donc, dans mon _Layout.cshtml, j'ai ajouté un

<base href="/">

et créé mon routage dans mon app.module. Mais quand je lance ceci, j'obtiens l'erreur suivante:

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

Dans mon app.component la ligne

<router-outlet></router-outlet>

donne une erreur en me disant que Visual studio ne peut pas résoudre le tag 'routeur-prise'. Des suggestions comment je peux corriger cette erreur? Est-ce que je manque une référence ou une importation ou juste un oubli?

Ci-dessous, mon package.json, app.component et 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:

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:

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

}
angularasp.net-mvc-5angular2-routing
52
Molo

Essayez avec:

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

}

Il n'est pas nécessaire de configurer les exportations dans AppModule, car AppModule ne sera pas importé par d'autres modules de votre application.

40
Jota.Toledo

Essayez ceci:

Importer RouterModule dans votre app.module.ts

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

Ajoutez RouterModule dans votre imports []

comme ceci:

 imports: [    RouterModule,  ]
34
Shubham Verma

Si vous effectuez des tests unitaires et obtenez cette erreur, importez RouterTestingModule dans votre app.component.spec.ts ou dans les spécifications de vos composants présentés.

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

Add RouterTestingModule into your imports [] like 

describe('AppComponent', () => {

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

En supposant que vous utilisez Angular 6 avec angular-cli et que vous avez créé un module de routage distinct chargé des activités de routage, configurez vos itinéraires dans le tableau Routes. Assurez-vous de déclarer RouterModule dans le tableau exports. Le code ressemblerait à ceci:

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

Cela fonctionne pour moi, quand j'ajoute le code suivant dans app.module.ts

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

Merci exemple Hero Editor, où j'ai trouvé la définition correcte:

Lorsque je génère un module de routage d'application:

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

et mettez à jour le fichier app-routing.ts pour ajouter:

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

Voici l'exemple complet:

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

et ajoutez AppRoutingModule aux importations app.module.ts:

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

Il est simplement préférable de créer un composant de routage capable de gérer tous vos itinéraires! De la angular documentation du site! C'est une bonne pratique!

génère le module app-routing --flat --module = app

La CLI ci-dessus génère un module de routage et ajoute à votre module d'application. Tout ce que vous devez faire à partir du composant généré consiste à déclarer vos itinéraires. N'oubliez pas d'ajouter ceci:

exports: [
    RouterModule
  ],

à votre décorateur de ng-module car il ne vient pas avec le module de routage d'application généré par défaut!

1
Seyi Daniels

Ce problème était avec moi aussi. Astuce simple pour cela.

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

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

utilisez-le comme ci-dessus order.first importe ensuite les déclarations.Il a fonctionné pour moi.

1
Susampath

Dans votre fichier 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 {

}

Ajoutez ce code. Bonne codage.

0
Vinayak Savale

Voici la solution simple et rapide si quelqu'un obtient l'erreur:

"'routeur-outlet' n'est pas un élément connu" dans angular projet,

Ensuite,

Allez simplement dans le fichier "app.module.ts" et ajoutez la ligne suivante:

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

Et aussi 'AppRoutingModule' dans les imports.

0
Akash T.