Problems with Lazy Load Angular 5

Question

Error adding Lazy loading

Any help is welcome because I’m new at angular.

I need to set up some file for this to work?

app.modulets.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, PreloadAllModules } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { ApplicationErrorHandler } from './app.error-handler';

import { ROUTES } from './app.routes'

import { SharedModule } from './shared/shared.module';

import { AppComponent } from './app.component';
import { HeaderComponent } from './layout/header/header.component';
import { MenuComponent } from './layout/menu/menu.component';
import { HomeComponent } from './layout/home/home.component';
import { FooterComponent } from './layout/footer/footer.component';
import { ConfigComponent } from './layout/config/config.component';
import { ErrorHandler } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    MenuComponent,
    HomeComponent,
    FooterComponent,
    ConfigComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    SharedModule.forRoot(),
    RouterModule.forRoot(ROUTES, { preloadingStrategy: PreloadAllModules })
  ],
  providers: [{provide: ErrorHandler,useClass:ApplicationErrorHandler}],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routers.ts

import { Routes } from '@angular/router'
import { HomeComponent } from './layout/home/home.component'
// import { ValorViagemComponent } from './valor-viagem/valor-viagem.component'


export const ROUTES: Routes = [
    { path: '', component: HomeComponent },
    { path: 'valor-viagem', loadChildren: './valor-viagem/valor-viagem.module/#ValorViagemModule' },


    { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule' },
    { path: '**', redirectTo: 'not-found', pathMatch: 'full' }
]

value-trip/value-trip.module.ts

import {NgModule} from '@angular/core'
import {RouterModule, Routes} from '@angular/router'

import { ValorViagemComponent } from './valor-viagem.component';


const ROUTES: Routes = [
    {path: '', component:ValorViagemComponent}
]
@NgModule({
    declarations: [
        ValorViagemComponent
    ],
    imports: [
        RouterModule.forChild(ROUTES)
    ]
})
export class ValorViagemModule {}

ERROR:

ERROR in Error: Could not resolve module ./valor-viagem/valor-viagem.module/ relative to /home/kleber/angular/all/src/app/app.module.ts
    at StaticSymbolResolver.getSymbolByModule (/home/kleber/angular/all/node_modules/@angular/compiler/bundles/compiler.umd.js:31884:30)
    at StaticReflector.resolveExternalReference (/home/kleber/angular/all/node_modules/@angular/compiler/bundles/compiler.umd.js:30350:62)
    at parseLazyRoute (/home/kleber/angular/all/node_modules/@angular/compiler/bundles/compiler.umd.js:28616:55)
    at listLazyRoutes (/home/kleber/angular/all/node_modules/@angular/compiler/bundles/compiler.umd.js:28578:36)
    at visitLazyRoute (/home/kleber/angular/all/node_modules/@angular/compiler/bundles/compiler.umd.js:29995:47)
    at AotCompiler.listLazyRoutes (/home/kleber/angular/all/node_modules/@angular/compiler/bundles/compiler.umd.js:29963:20)
    at AngularCompilerProgram.listLazyRoutes (/home/kleber/angular/all/node_modules/@angular/compiler-cli/src/transformers/program.js:157:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/home/kleber/angular/all/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (/home/kleber/angular/all/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:247:66)
    at Promise.resolve.then.then (/home/kleber/angular/all/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:538:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Answer 1

You should not use a relative path to load Lazy, you should use the full path from the folder app.

In place of ./valor-viagem/valor-viagem.module/#ValorViagemModule
Use app/valor-viagem/valor-viagem.module/#ValorViagemModule