How to loadChildren async with angular-router-loader

Question

I have folder structure like:

 - app
   -core
   -vacancy

in core folder I have app.routing.ts where I would like to async add route to vacancy.

I did it like:

export const routing = RouterModule.forRoot([
        {
            path: '',
            component: HomeComponent,
            canActivate: [AuthGuard]
        },
        {
            path: 'vacancy',
            loadChildren: '../vacancy#VacancyModule'
        },
        {
            path: '**',
            component: NotFoundComponent
        }
    ], {useHash: true}
);

i get an error:

Can't resolve '..\vacancy'

dispite the fact there is folder vacancy in folder app and inside of vacancy there is a file vacancy.module.ts which ` looks like:

// some imports here
@NgModule({
    declarations: [
        VacancyBaseComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild(routes),
    ],
})

export class VacancyModule {
    public static routes = routes;
}

Any ideas what I'm doing wrong?

Answer 1

Bit late. In case you haven't figured it out, try this:

loadChildren: 'app/vacancy/vacancy.module#VacancyModule'

Answer 2

UPD: actual time 2022-12-26

In Angular version 8, the string syntax for the loadChildren route specification was deprecated in favor of the import() syntax. You can opt into using string-based lazy loading (loadChildren: './path/to/module#Module') by including the lazy-loaded routes in your tsconfig file, which includes the lazy-loaded files in the compilation.

By default the Angular CLI generates projects with stricter file inclusions intended to be used with the import() syntax.

https://angular.io/guide/lazy-loading-ngmodules#create-a-feature-module-with-routing