web-dev-qa-db-ja.com

Angular 7バージョンの遅延読み込みが機能しない

angular 6バージョンをangular 7バージョンに更新しました。現在、 ' http：// localhost：4200/pages '。アプリケーションで遅延ロードルートの概念を使用しています。

エラー：-

core.js：12584エラーエラー：キャッチされていません（約束されています）：エラー：モジュール './Pages/Test/Test.module'が見つかりませんエラー：モジュール './Pages/Test/Test.module'が$ _lazy_route_resource lazyで見つかりません名前空間オブジェクト：5 at ZoneDelegate.Push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke（zone.js：388）at Object.onInvoke（core.js：14143）at ZoneDelegate.Push .. /node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke（zone.js：387）at Zone.Push ../ node_modules/zone.js/dist/zone.js.Zone.run（zone.js： 138）zone.js：872 at ZoneDelegate.Push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask（zone.js：421）at Object.onInvokeTask（core.js：14134）at ZoneDelegate .Push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask（zone.js：420）at Zone.Push ../ node_modules/zone.js/dist/zone.js.Zone.runTask（ zone.js：188）at $ _lazy_route_resource lazy namespace object：5 at ZoneDelegate.Push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke（zone.js：388）at Object.onInvoke（core。 js：14143）ZoneDele gate.Push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke（zone.js：387）at Zone.Push ../ node_modules/zone.js/dist/zone.js.Zone.run （zone.js：138）

app-routing.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes} from '@angular/router';

export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: './Pages/test/test.module#TestModule'
 }      
]

このエラーの解決方法を教えてください。

webpackangular-routingangular-routerangular7
4
Harleen Kaur Arora

多くの変更を試みた後、私のapp.routing.tsは次のようになるはずです：-

import { TestModule } from './Pages/test/test.module';

 export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: () =>  TestModule
 }      
]

変更後、これは完璧に機能します。

8
Harleen Kaur Arora

受け入れられた回答は誤りであり、誤解を招く可能性があるため実際には削除する必要があり、採用すると予期しない動作やパフォーマンスの問題が発生する可能性があります。問題は、import { TestModule } from './Pages/test/test.module';のようなモジュール（コードの最初の行）をインポートするとすぐに、モジュールが直接（熱心に）読み込まれることです。 loadChildrenに何を提供するかに関係なく。

以下の正しいアプローチをご覧ください。

 export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: '/test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: () => import('./Pages/test/test.module').then(mod => mod.TestModule)
  }      
]

このように、モジュールは、loadChildrenで提供される関数が呼び出されたときにのみインポート（ロード）されます。これは、/testに移動したときにのみ発生します。ご覧のとおり、コードの先頭から最初のインポートimport { TestModule } from './Pages/test/test.module';を削除しました。

お役に立てれば！

-イワン

2
ieggel

https://stackoverflow.com/a/53128336/536046 を使用していますが、本番モードではこのエラーが発生します

関数式をエクスポートされた関数に変更することを検討してください。

そして、私はコードをこれに変更します

import { TestModule } from './Pages/test/test.module';

export function getTestModule() {
  return TestModule;
}

 export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 },
 {
  path: 'test',
  loadChildren: getTestModule
 }      
]
0
behroozbc

はじめに常にする必要があります最も制限的なパスを最初にで始まるパスを配置し、最終的にはデフォルトのパスを配置します...次に、モジュールコードを共有しませんでした。そのモジュールのパスが呼び出された/一致したときにロードするコンポーネントを正しく定義するtest-routing.module.tsファイルがあることを前提としています。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes} from '@angular/router';

export const AppRoutes : Routes = [
 {
  path: 'test',
  loadChildren: './Pages/test/test.module#TestModule'
 }, {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }      
]

test-routing.module.ts

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

import { TestComponent } from "./test/test.component";

const routes: Routes = [
  {
    path: "",
    component: TestComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TestRoutingModule {}
0
EdNdee

Angular 7に対してAOTが有効になっているときに関数参照を使用してモジュールを熱心にロードするには、このPRからわかるように、NgFactoryモジュールを作成する必要があります- https：// github .com/angular/angular/pull/13909 。

私にとって有効な解決策は、モジュールのクローンを作成し、.ngfactory postfixをファイル名に追加し、NgFactory postfixをモジュールクラス名に追加します。

import { FirstPageModuleNgFactory } from '../pages/first-page.module.ngfactory';
import { SecondPageModuleNgFactory } from '../pages/second-page.module.ngfactory';

export function loadFirstPageModule() {
    return FirstPageModuleNgFactory;
}

export function loadSecondPageModule() {
    return SecondPageModuleNgFactory;
}

const routes: Routes = [
    {
        path: '',
        component: HomePageComponent,
        children: [
            {
                path: '',
                redirectTo: 'first',
                pathMatch: 'full',
            },
            {
                path: 'first',
                loadChildren: loadFirstPageModule,
            },
            {
                path: 'second',
                loadChildren: loadSecondPageModule,
            },
        ],
    },
];
0
Önder Ceylan