webentwicklung-frage-antwort-db.com.de

Angular 5 Lazy Loading Fehler: Modul kann nicht gefunden werden

Ich möchte Lazy Loading verwenden, kann aber nicht verstehen, warum es nicht funktioniert. Es gibt einen Fehler "Modul kann nicht gefunden werden".
Dies ist meine Umgebung:
- Angular 5.2.1
- .NET Core 2
- Webpack 3.10.0
- Winkelrouter-Lader 0.8.2
- @ angle/cli 1.6.5
Ich habe verschiedene Wege in loadChildren immer ohne Erfolg ausprobiert, ich habe auch alle Wächter und das Routing der Kinder vorübergehend deaktiviert. Was habe ich falsch gemacht? 

ORDNER 

ClientApp
  app
    components
      users
        users-routing.module.ts
        users.module.ts
  app-routing.module.ts
  app.module.shared.ts

app-routing.module.ts 

const appRoutes: Routes = [
    {
        path: 'users',
        loadChildren: './components/users/users.module#UsersModule'/* ,
        canLoad: [AuthGuard] */
    },
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: '/login'
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(
            appRoutes,
            { enableTracing: false }
        )
    ],
    exports: [
        RouterModule
    ],
    providers: [
        CanDeactivateGuard
    ]
})
export class AppRoutingModule { }

users-routing.module.ts

const usersRoutes: Routes = [
    {
        path: '',
        component: UsersComponent/* ,
        //canActivate: [AuthGuard],
        children: [
            {
                path: 'detail',
                canActivateChild: [AuthGuard],
                children: [
                    {
                        path: ':id',
                        component: UserViewComponent
                    },
                    {
                        path: 'edit/:id',
                        component: UserFormComponent,
                        canDeactivate: [CanDeactivateGuard],
                        resolve: {
                            user: UsersResolver
                          }
                    },
                    {
                        path: '',
                        component: UserFormComponent,
                        canDeactivate: [CanDeactivateGuard]
                    }
                ]
            },
            {
                path: '',
                component: UsersListComponent
            }
        ] */
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(
            usersRoutes
        )
    ],
    exports: [
        RouterModule
    ]
})
export class UsersRoutingModule { }

users.module.ts 

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        UsersRoutingModule,
        RouterModule
    ],
    declarations: [
        UsersComponent,
        UserFormComponent,
        UsersListComponent,
        UserViewComponent
    ],
    providers: [
        UsersResolver,
        RouterModule
    ]
})
export class UsersModule { }

webpack.config.js 

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-TypeScript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: {
            modules: false
        },
        context: __dirname,
        resolve: {
            extensions: ['.js', '.ts']
        },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [{
                    test: /\.ts$/,
                    include: /ClientApp/,
                    use: isDevBuild ? ['awesome-TypeScript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack'
                },
                {
                    test: /\.html$/,
                    use: 'html-loader?minimize=false'
                },
                {
                    test: /\.css$/,
                    use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize']
                },
                {
                    test: /\.(png|jpg|jpeg|gif|svg)$/,
                    use: 'url-loader?limit=25000'
                }
            ],
            loaders: [
                {
                  test: /\.ts$/,
                  loaders: [
                    'awesome-TypeScript-loader'
                  ]
                },
                {
                  test: /\.(ts|js)$/,
                  loaders: [
                    'angular-router-loader'
                  ]
                }
              ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: {
            'main-client': './ClientApp/boot.browser.ts'
        },
        output: {
            path: path.join(__dirname, clientBundleOutputDir)
        },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new AngularCompilerPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
                exclude: ['./**/*.server.ts']
            })
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: {
            mainFields: ['main']
        },
        entry: {
            'main-server': './ClientApp/boot.server.ts'
        },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            new AngularCompilerPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
                exclude: ['./**/*.browser.ts']
            })
        ]),
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};  

tsconfig.json 

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
    "strict": true,
    "lib": [ "es6", "dom" ],
    "types": [ "webpack-env" ], 
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [ "bin", "node_modules" ],
  "atom": { "rewriteTsconfig": false }
}

FEHLERMELDUNG 

Unbehandelte Versprechung Ablehnung: Modul kann nicht gefunden werden "./ClientApp/app/components/users/users.module". ; Zone: eckig; Aufgabe: Promise.then; Wert: Fehler: Modul kann nicht gefunden werden './ClientApp/app/components/users/users.module'. at vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 34015 at ZoneDelegate.invoke (vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 117428) at Object.onInvoke (vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 5604) at ZoneDelegate.invoke (vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 117427) at Zone.run (vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 117178) at vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 117898 at ZoneDelegate.invokeTask (vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 117461) at Object.onInvokeTask (vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 5595) at ZoneDelegate.invokeTask (vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 117460) at Zone.runTask (vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 117228) Fehler: Modul kann nicht gefunden werden './ClientApp/app/components/users/users.module'. at http: // localhost: 5000/dist/vendor.js? v = AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko: 34015: 9 ... [abgeschnitten] 

EDIT 

Link zum Stackblitz zum Testen

4
Luciano

Ich habe zwei Lösungen gefunden (VIA das OP von edit):

1) Verweis auf das Modul, nachdem es bereits mit einer Importanweisung aufgelöst wurde:

import { UsersModule } from './components/users/users.module';

dann auf diese Weise referenzieren:

{
        path: 'users',
        loadChildren: () => UsersModule,
        canLoad: [AuthGuard]
}

2) Ich habe ng-router-loader zur Anwendung hinzugefügt (npm install ng-router-loader --save-dev) und das Webpack auf folgende Weise eingerichtet: 

        rules: [{
                test: /\.ts$/,
                include: /ClientApp/,
                //use: isDevBuild ? ['awesome-TypeScript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack'
                use: isDevBuild ? [{ loader: 'ng-router-loader' }, 'awesome-TypeScript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack'
            },
            {
                test: /\.html$/,
                use: 'html-loader?minimize=false'
            },
            {
                test: /\.css$/,
                use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: 'url-loader?limit=25000'
            }
        ],

dann referenzieren Sie das Modul über den Pfad:

    {
        path: 'users',
        loadChildren: './components/users/users.module#UsersModule',
        canLoad: [AuthGuard]
    }
11
FrankerZ

Normalerweise ist es ein Fehler mit dem Pfad. Ändern Sie den Pfad.

Zum Beispiel funktioniert diese Lösung für mich:

loadChildren: '../changelog/changelog.module#ChangelogModule'

./folder oder ../folder oder folder

0
Maxim Savin

versuchen Sie es in Ihrer user.module.ts:

import {UserRoutes } from './User.routing'

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        UsersRoutingModule.forChild(UserRoutes), //<-- for child
        RouterModule
    ],
    declarations: [
        UsersComponent,
        UserFormComponent,
        UsersListComponent,
        UserViewComponent
    ],
    providers: [
        UsersResolver,
        RouterModule
    ]
})
export class UsersModule { }
0

Der Typo-Ordnername lautet Users nicht users:

Veränderung

'./components/users/users.module#UsersModule'

zu

'./components/Users/users.module#UsersModule'
0
Vivek Doshi