'router-outlet' no es un elemento conocido


98

Tengo un proyecto mvc 5 con una interfaz angular. Quería agregar enrutamiento como se describe en este tutorial https://angular.io/guide/router . Entonces en mi _Layout.cshtmlagregué un

<base href="/">

y creé mi enrutamiento en mi módulo de aplicación. Pero cuando ejecuto esto, aparece el siguiente error:

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

En mi componente de aplicación, la línea

<router-outlet></router-outlet>

da un error que me dice que Visual Studio no puede resolver la etiqueta 'router-outlet'. ¿Alguna sugerencia de cómo puedo solucionar este error? ¿Me falta una referencia o una importación o simplemente me olvido de algo?

A continuación se muestran mi package.json, app.component y 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';

}

Respuestas:


67

Prueba con:

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

No es necesario configurar las exportaciones en AppModule, porque AppModuleno serán importadas por otros módulos en su aplicación.


1
No entiendo lo que quieres decir
Jota.Toledo

@ Jota.Toledo He creado un archivo de módulo separado para enrutamiento donde he definido rutas. También tengo BrowserModule, FormsModule en las importaciones de app.module y los tres en el archivo del módulo de enrutamiento. Pero sigo recibiendo este error. ¿Algún consejo?
ninja_md

1
@ninja_md ¿Agregó la declaración de exportaciones a su archivo de módulo de enrutamiento? Como abajo. @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] }) Recibí el mismo error y esto solucionó mi problema.
Mihir Kagrana

80

Prueba esto:

Importar RouterModulea tuapp.module.ts

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

Añade RouterModulea tuimports []

Me gusta esto:

 imports: [    RouterModule,  ]

4
Genial, esto resolvió mi 'router-outlet' is not a known elementproblema. para Angular CLI version: 6.0.8yAngular version: 6.0.5
Shams

36

Si está haciendo pruebas unitarias y obtiene este error, entonces importe RouterTestingModuleen su app.component.spec.tso dentro de sus componentes destacados ' spec.ts:

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

Agrega RouterTestingModulea tu Me imports: []gusta

describe('AppComponent', () => {

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

3
Gracias amigo, me salvaste el día.
Beto Silva

12

Suponiendo que está utilizando Angular 6 con angular-cli y ha creado un módulo de enrutamiento por separado que es responsable de las actividades de enrutamiento, configure sus rutas en la matriz de rutas Asegúrese de declarar RouterModule en la matriz de exportaciones. El código se vería así:

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

He creado un archivo de módulo separado para el enrutamiento como se menciona en su respuesta. También tengo BrowserModule, FormsModule en las importaciones de app.module y RouterModule en el archivo AppRouting. Pero sigo recibiendo este error. ¿Puede usted ayudar?
ninja_md

Un poco de código ayudaría: la parte del módulo de enrutamiento y la parte del módulo de la aplicación.
Manit

1
ninja_md Importa tu módulo de enrutamiento en la matriz de importaciones de app.module. El segundo cambio sería que en el módulo de enrutamiento bajo @NgModule en la matriz de exportaciones proporcione el nombre del archivo de su módulo que ha creado para el enrutamiento. Espero que esto resuelva tu problema.
M.Sharma

8

Funciona para mí, cuando agrego el siguiente código en app.module.ts

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

4

Gracias por ejemplo de Hero Editor, donde encontré la definición correcta:

Cuando genero el módulo de enrutamiento de la aplicación:

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

y actualice el archivo app-routing.ts para agregar:

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

Aquí está el ejemplo completo:

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

y agregue AppRoutingModule en las importaciones de app.module.ts:

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

1

¡Es mejor crear un componente de enrutamiento que maneje todas sus rutas! ¡De la documentación del sitio web angular! ¡Esa es una buena práctica!

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

La CLI anterior genera un módulo de enrutamiento y lo agrega a su módulo de aplicación, todo lo que necesita hacer desde el componente generado es declarar sus rutas, también no olvide agregar esto:

exports: [
    RouterModule
  ],

a su decorador ng-module, ya que no viene con el módulo de enrutamiento de aplicaciones generado por defecto.


0

Hay dos maneras. 1. si desea implementar el app.module.tsarchivo, entonces:

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

  1. si desea implementar el app-routing.module.tsarchivo (Módulo de enrutamiento separado), entonces:

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


-1

Este problema también estaba conmigo. Truco simple para ello.

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

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

úselo como en el pedido anterior. Primero las importaciones y luego las declaraciones. Funcionó para mí.


-2

En su archivo 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 {

}

Agrega este código. Codificación feliz.


-3

Aquí está la solución rápida y simple si alguien recibe el error:

"'router-outlet' no es un elemento conocido" en proyecto angular,

Entonces,

Simplemente vaya al archivo "app.module.ts" y agregue la siguiente línea:

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

Y también 'AppRoutingModule' en las importaciones.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.