Do not load view in Angular 6

Question

Do not load view in Angular 6

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Create two components inside Angular so I have two modules files the app.module file I call the pages.module file that has the rest of the modules.

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

But I do not know what I'm missing so that I can load the view of the component in just how much organization I have:

And the navigation file that is in charge of giving the route of the hyperlinks to the left

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'
        }
    ]
}

];

When I upload the application it appears like this

But when I select any of the pages, it does not direct me, it stays there in that one.

typescript angular angular6 component

asked by lARAPRO 26.09.2018 в 21:48

source

2 answers

Problems when viewing my report.jasper in a Jpanel Android sqlite INNER JOIN that returns an array

score 0 · Answer 1

0

I do not see that you have added the module "PagesModule" in app.module.ts so I understand that angular does not have visibility on that module and that is why you do not see it, understanding that this is your problem.

answered by 27.09.2018 в 00:21

score 0 · Answer 2

I hope it's not too late. It is applying routes to modules and must have their routes to components or other modules.

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 RECORD

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