3

cree dos componentes dentro de Angular entonces tengo dos archivos de modulos el archivo app.module llamo al archivo pages.module que tiene el resto de modulos.

app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-        browser/animations';
       import { RouterModule, Routes } from '@angular/router';
  import { MatMomentDateModule } from '@angular/material-moment-adapter';
  import { MatButtonModule, MatIconModule } from '@angular/material';
  import { TranslateModule } from '@ngx-translate/core';
  import 'hammerjs';
  import { FuseModule } from '@fuse/fuse.module';
  import { FuseSharedModule } from '@fuse/shared.module';
  import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } 
 from '@fuse/components';
 import { fuseConfig } from 'app/fuse-config';
 import { AppComponent } from 'app/app.component';
 import { LayoutModule } from 'app/layout/layout.module';
 import { SampleModule } from 'app/main/sample/sample.module';
 const appRoutes: Routes = [
{
    path      : '**',
    redirectTo: 'sample'
},
{
    path        : 'pages',
    loadChildren: './main/pages/pages.module#PagesModule' 
}

];

 @NgModule({
     declarations: [
    AppComponent
],
imports     : [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),

    TranslateModule.forRoot(),

    // Material moment date module
    MatMomentDateModule,

    // Material
    MatButtonModule,
    MatIconModule,

    // Fuse modules
    FuseModule.forRoot(fuseConfig),
    FuseProgressBarModule,
    FuseSharedModule,
    FuseSidebarModule,
    FuseThemeOptionsModule,

    // App modules
    LayoutModule,
    SampleModule
],
bootstrap   : [
    AppComponent
]
 })
 export class AppModule
 {
 }

pages.module.ts

import { NgModule } from '@angular/core';
  import { ProfileModule } from 'app/main/pages/profile/profile.module';
  import { CrudexpedienteModule } from './expedientes/crud-expediente/crud-expediente.module';
  @NgModule({
imports: [
    // Profile
    ProfileModule,
    CrudexpedienteModule
     ]
   })
   export class PagesModule
     {
     }

Pero no se que me falta para que me cargue la vista del componente en cuta organizacion la tengo asi:
introducir la descripción de la imagen aquí

Y el archivo navigation que es el encargado de dar la ruta de los hipervinculos a la izquierda

import { FuseNavigation } from '@fuse/types';

export const navigation: FuseNavigation[] = [
{
    id       : 'applications',
    title    : 'Applications',
    translate: 'NAV.APPLICATIONS',
    type     : 'group',
    children : [
        {
            id       : 'sample',
            title    : 'Sample',
            translate: 'NAV.SAMPLE.TITLE',
            type     : 'item',
            icon     : 'email',
            url      : '/sample',
            badge    : {
                title    : '25',
                translate: 'NAV.SAMPLE.BADGE',
                bg       : '#F44336',
                fg       : '#FFFFFF'
            }
        },
        {
            id   : 'profile',
            title: 'Profile',
            type : 'item',
            icon : 'person',
            url  : '/pages/profile'
        },
        {
            id   : 'crud-expediente',
            title: 'Expedientes',
            type : 'item',
            icon : 'person',
            url  : '/pages/expedientes/crud-expediente'
        }
    ]
}

];

Cuando cargo el aplicattivo aparece asi

introducir la descripción de la imagen aquí

Pero cuando selecciono cualquiera de las paginas no me direcciona se queda ahi en esa.

6
  • ¿Qué es lo que sucede actualmente? ¿Página en blanco? ¿Errores en consola? Provee más detalles.
    – gugadev
    Commented el 26 sept. 2018 a las 20:06
  • @IARAPRO de que parte de colombia eres :D
    – zerokira
    Commented el 26 sept. 2018 a las 20:10
  • Ya hay mas detalles
    – lARAPRO
    Commented el 26 sept. 2018 a las 20:11
  • ¿Has importado en el módulo del sidebar el módulo RouterModule? Así mismo, asegúrate que los elementos <a> tengan el atributo routerLink.
    – gugadev
    Commented el 26 sept. 2018 a las 20:17
  • si porque se supone que en el archivo app.module.ts al RouterModule le paso un arreglo donde esta el pagesModule
    – lARAPRO
    Commented el 26 sept. 2018 a las 20:20

2 respuestas 2

2

Espero no sea tarde. Esta aplicando rutas a módulos y deben tener sus rutas a componentes o a otros módulos.

PAGES MODULE

import { NgModule } from '@angular/core';
import { ProfileModule } from 'app/main/pages/profile/profile.module';
import { CrudexpedienteModule } from './expedientes/crud-expediente/crud-expediente.module';

const appRoutes: Routes = [
    {
        path        : 'profile',
        loadChildren: './directorio del archivo/profile.module#ProfileModule'
    },
    {
        path        : 'expedientes',
        loadChildren: './directorio del archivo/crud-expediente.module#CrudExpedienteModule'
    }
];

@NgModule({
    imports: [
    RouterModule.forRoot(appRoutes),
    ProfileModule,
    CrudexpedienteModule
    ]
})
export class PagesModule {}

PROFILE MODULE

import { NgModule } from '@angular/core';
import { ProfileComponent } from './profile.component';

const appRoutes: Routes = [
    {
        path        : '',
        loadChildren: './directorio del archivo/profile.component'
    }
];

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

CRUD EXPEDIENTE

import { NgModule } from '@angular/core';
import { CrudExpedienteComponent } from './crud-expediente.component';

const appRoutes: Routes = [
    {
        path        : 'crud-expediente',
        loadChildren: './directorio del archivo/crud-expediente.component'
    }
];

@NgModule({
    imports: [
    RouterModule.forRoot(appRoutes),
    CrudExpedienteComponent
    ]
})
export class CrudExpedienteModule {}
0

no veo que hayas añadido el modulo "PagesModule" en app.module.ts por lo que entiendo que angular no tiene visibilidad soobre ese modulo y es por eso que no lo ves, entendiendo que ese sea tu problema.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.