Question

我已经在堆栈here上阅读了该问题，但我再次要求对我的问题进行更多描述。

我尝试在登录成功后加载管理模块，并使用延迟加载加载管理模块。我的项目结构如下。

我尝试使用延迟加载加载AdminModule。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from  '@angular/router';
import { LoginComponent } from "./login/login.component";

@NgModule({
    imports:[
        RouterModule.forRoot([
            { path:'', component:LoginComponent },
            { path:'admin',loadChildren:'app/admin/admin.module#AdminModule'}
        ])
    ],
    exports:[
        RouterModule
    ]
})
export class AppRouterModule{
    constructor(){
        console.log("App Router Module call");
    }
}

管理-routing.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AdminComponent } from "./admin.component";
import { DashboardComponent } from "./dashboard/dashboard.component";

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: '',
                component: AdminComponent,
                children: [
                    {
                        path: '',
                        component: DashboardComponent,
                        pathMatch: 'full'
                    }
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class AdminRoutingModule {

}

如果我去默认路由它工作正常，但当我去管理员我得到错误。 找不到模块。和webpackEmptyContext

如果使用官方方式使用angular-cli，那么这是有效的对我来说很好，但对于某些人来说，使用有错误的Jhipster生成器必须使用Jhipster。

webpack.dev.js

const webpack = require('webpack');
const path = require('path');
const commonConfig = require('./webpack.common.js');
const writeFilePlugin = require('write-file-webpack-plugin');
const webpackMerge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const ENV = 'dev';
const execSync = require('child_process').execSync;
const fs = require('fs');
const ddlPath = './build/www/vendor.json';

if (!fs.existsSync(ddlPath)) {
    execSync('webpack --config webpack/webpack.vendor.js');
}

module.exports = webpackMerge(commonConfig({ env: ENV }), {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './build/www',
        proxy: [{
            context: [
                /* jhipster-needle-add-entity-to-webpack - JHipster will add entity api paths here */
                '/api',
                '/management',
                '/swagger-resources',
                '/v2/api-docs',
                '/h2-console'
            ],
            target: 'http://127.0.0.1:8080',
            secure: false
        }]
    },
    output: {
        path: path.resolve('build/www'),
        filename: 'app/[name].bundle.js',
        chunkFilename: 'app/[id].chunk.js'
    },
    module: {
        rules: [{
            test: /\.ts$/,
            loaders: [
                'tslint-loader'
            ],
            exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
        }]
    },
    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 9000,
            proxy: {
                target: 'http://localhost:9060'
            }
        }, {
            reload: false
        }),
        new ExtractTextPlugin('styles.css'),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.NamedModulesPlugin(),
        new writeFilePlugin(),
        new webpack.WatchIgnorePlugin([
            path.resolve('./src/test'),
        ])
    ]
});

Answer 1

我有一个类似的问题，能够通过更改 tsconfig-aot

中的值来解决

必须将complierOptions.module设置为"commonjs"

Jhipster Angular懒惰加载支持与否？

1 个答案: