Angular PreloadAllModules для ленивых модулей не работает

Question

Я успешно реализовал отложенную загрузку для своих модулей Продукты и Клиенты, и я могу видеть фрагменты, когда перехожу к соответствующей маршрутизации.

Теперь я хочу, чтобы указанные выше модули были предварительно загружены, что можно сделать, просто добавив

{ preloadingStrategy: PreloadAllModules }

Но это не работает. Вышеупомянутые модули все еще загружаются лениво (фрагменты загружаются, когда я перехожу к соответствующим модулям вместо начальной загрузки).

---

Вот как реализовано

app.module.ts

@NgModule({
 imports: [LazyLoadModule]
})

ленивый-load.module.ts

@NgModule({
    imports: [RouterModule.forRoot([{
        path: 'products',
        data: {
            preload: false
        },
        loadChildren: './entities/products/products.module#ProductsModule',
    },
    {
        path: 'customers',
        data: {
            preload: true
        },
        loadChildren: './entities/customers/customers.module#CustomersModule',
    }], { useHash: true, preloadingStrategy: PreloadAllModules })]
})

Однако, если я добавлю конфигурацию прямо в app.module.ts, то кажется, что он работает (при начальной загрузке я вижу отдельные фрагменты), но мои пути маршрутизации не работают.

---

Обновить

Сначала я попробовал использовать такую стратегию предварительной загрузки.

preloading-strategy.service.ts

@Injectable()
export class PreloadingStrategyService implements PreloadingStrategy {

    preload(route: Route, load: () => Observable<any>) {
        console.log('Preloading called');
        return route.data && route.data.preload ? load() : of(null);
    }
}

ленивый-load.module.ts

{ preloadingStrategy: PreloadingStrategyService }

Но метод предварительной загрузки никогда не вызывается (журнал консоли не печатается), поэтому для целей тестирования я добавил PreloadAllModules. Это тоже не работает, как я уже объяснил выше.

Answer 1

Проблема вызвана module: "commonjs"в tsconfig.json должно быть module: "ESNext".

Найдено здесь

Answer 2

Измените свой lazy-load.module.ts на

@NgModule({
    imports: [RouterModule.forRoot([{
        path: 'products',
        data: {
            preload: false
        },
        loadChildren: './entities/products/products.module#ProductsModule',
    },
    {
        path: 'customers',
        data: {
            preload: true
        },
        loadChildren: './entities/customers/customers.module#CustomersModule',
    }], { useHash: true, preloadingStrategy: PreloadAllModules })],
    exports: [RoutingModule]
})