Ленивая загрузка не работает в Angular 6

Question

Я получаю эту ошибку при попытке перейти к 'http://localhost:4200/dashboard' ленивый маршрут загрузки в angualr, angualr-cli 6.0.0

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается найти модуль "Приложение / панель / dashboard.module". Ошибка: не удается найти модуль "Приложение / панель / dashboard.module". на ленивом объекте пространства имен $ _lazy_route_resource: 5

const routes: Routes = [
    {
        path: 'login',
        loadChildren: 'app/login/login.module#LoginModule',

    },
    {
        path: '',
        component: MasterComponent,
        children: [
            {
                path: 'dashboard',
                loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
            }
        ],
    },
    {
        path: '**',
        redirectTo: 'login
    }
];


@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule {
}

Answer 1

с использованием угловых 7

это работает для меня

loadChildren = 'src/app/layout/waay/lazy.module.ts#LazyModule';

и

angular.json

...
"lazyModules": [
            "src/app/layout/waay/lazy.module.ts",
]

---

возможно, это поможет кому-то отладить ленивые пути загрузки ->

(это может быть изменено в следующих угловых версиях)

в хроме

• открыть инструменты разработчика F12

• нажмите ctrl + O (буква O)

• (открывается окно поиска)

• на клавиатуре, наберите "lazyroute"

• (следует перечислить $_lazy_route_resource lazy namespace object)

• нажмите Введите

теперь он должен показать вам содержимое карты, которую angular / webpack использует для искать ленивые маршруты

$ _ lazy_route_resource ленивый объект пространства имен (начало файла)

var map = {
    "src/app/layout/waay/lazy.module.ts": [
        "./src/app/layout/waay/lazy.module.ts"
    ],
    "src/app/pages/even/more-lazy.module.ts": [
        "./src/app/pages/even/more-lazy.module.ts",
        "default~src-app-pages-even-more-lazy-module-ts~src-app-pages-some-page-module-ts~sr~2cb20cb3",
        "default~src-app-pages-even-more-lazy-module-ts~src-app-pages-counter-page-module~7852bff4",
        "common",
        "src-app-pages-even-more-lazy-module-ts"
    ],
    "src/app/pages/too/lazy-to-be-true.module.ts": [
        "./src/app/pages/too/lazy-to-be-true.module.ts",
        "default~src-app-pages-too-lazy-to-be-true-module-ts~src-app-pages-some-page-modu~c179459d",
        "default~src-app-pages-too-lazy-to-be-true-module-ts~src-app-pages-home-home-page-module-ts~src-app-~50ff7d88",
        "default~src-app-pages-too-lazy-to-be-true-module-ts~src-app-pages-home-home-page-module-ts",
        "common",
        "src-app-pages-too-lazy-to-be-true-module-ts"
    ],
    ...
};

карта дает вам соотношение между module path и modules to be loaded для данного пути модуля.

Посмотрев на эту карту, вы можете узнать, почему некоторые пути не могут быть разрешены.

Вы также можете поставить точку останова в следующей строке, чтобы пройти через нее через отладчик и получить четкое представление о том, где она может потерпеть неудачу при поиске.

$ _ lazy_route_resource ленивый объект пространства имен (далее по файлу)

function webpackAsyncContext(req) {
    var ids = map[req];           // <-- put a breakpoint there, lookup in the map happens here
    if(!ids) {
        return Promise.resolve().then(function() {
            var e = new Error("Cannot find module '" + req + "'");
            e.code = 'MODULE_NOT_FOUND';
            throw e;
        });
    }
    ...
}

надеюсь, это кому-нибудь поможет, у меня получилось

Answer 2

Для меня это изменение

loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule',

Для

loadChildren: () => AdminLayoutModule,

Сработало и не забудьте импортировать файл модуля.

Надеюсь, это поможет!

Answer 3

Фактически, существует три возможных обходных пути :

• Использовать относительный путь loadChildren: './dashboard...
• Абсолютный путь, но начиная с / src: loadChildren: 'src/app/dashboard...
• Вкл tsconfig.json, установите BaseUrl: "./src"

Вы можете следить за ходом этой проблемы в репо Angular

Answer 4

У меня та же проблема, но в Angular 6 кажется, что каждый модуль, загруженный с «отложенной загрузкой», должен быть удален из объявления imports в корневом модуле (app.module.ts). По крайней мере, для меня это работает.

Answer 5

В предыдущих версиях поддержка пути loadChildren с помощью 'app / path / to / module # Module', но больше не работает, вместо этого используйте относительный путь './path/to/module#Module'

угловой / AIO / содержание / примеры / ленивая-погрузочная-ngmodules пример также был изменен 3 дня назад с выпуском Angular 6

https://github.com/angular/angular/commit/f44a2c730a84cd86695d1851395ad28423704bd0

Сообщество Angular отвечает на вопрос, который я поднял. Пожалуйста, найдите ответы ниже.

https://github.com/angular/angular-cli/issues/10673#issuecomment-391786453

Согласно ответам углового сообщества они обновят документ.

использование нужно изменить с

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: 'app/customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: 'app/orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

до

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

Еще один совет:

Вопросы порядка импорта модулей https://angular.io/guide/router#module-import-order-matters