Búsqueda de sitios web

typescript - Enrutamiento no funciona correctamente en angular 6

Estoy desarrollando un pequeño proyecto en Angular con tres componentes. En ese proyecto tengo un submódulo llamado component.module y he añadido enrutamiento en ese módulo y component.module está incluido en App.module.

Se está compilando sin ningún error, pero no se muestra nada en la pantalla (ver imagen abajo).

La estructura de mi carpeta de proyecto es así.

componentes/app-routing.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";

import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentListComponent, IntentCreateComponent } from "./intent";

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: MainLayoutComponent,
    children: [
      { path: "list", component: IntentListComponent },
      { path: "create", component: IntentCreateComponent }
    ]
  } 
];

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

componentes/componente.modulo.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentCreateComponent, IntentListComponent } from "./intent";

import { ProjectCreateComponent } from "./project";

@NgModule({
  declarations: [
    MainLayoutComponent,
    IntentCreateComponent,
    IntentListComponent,
    ProjectCreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: []
})
export class ComponentModule {}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ComponentModule } from "./components/component.module";



@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    ComponentModule,

  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {}

app.component.html

<app-main-layout></app-main-layout>

app/componentes/disposición-principal/disposición-principal.component.html

<div class="side-bar">
</div>
  
<div class="content-wrapper">
  <router-outlet></router-outlet>
</div>

Respuesta #1

Si no exportas nada de tu módulo ComponentModule, entonces importarlo en tu AppModule no le dará nada del ComponentModule.

Dado que estás usando Routing y MainLayoutComponent de tu ComponentModule en tu AppModule, tendrás que agregar estos también al array exports del ComponentModule.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentCreateComponent, IntentListComponent } from "./intent";

import { ProjectCreateComponent } from "./project";

@NgModule({
  declarations: [
    MainLayoutComponent,
    IntentCreateComponent,
    IntentListComponent,
    ProjectCreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [],
  exports: [AppRoutingModule, MainLayoutComponent]
})
export class ComponentModule {}

PD: Si quieres usar algo de tu ComponentModule en tu AppModule, tendrás que exportarlo desde tu ComponentModule agregándolo al arreglo exports de tu ComponentModule.

Respuesta #2

Solo agrega <router-outlet></router-outlet> en app.component.html y después de configurar el enrutamiento como se explicó arriba

Artículos relacionados