Error adding lazy loading
Any help is welcome because I'm new to the angle.
Do I need to set up any files for this to work?
app.module.ts
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' }
]
travel-value / travel-value.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)