Question

我正在使用asp-net core和angular 2一个web项目。我想在我当前的应用程序中实现模块延迟加载概念，但它不适合我尝试了几乎所有可用的解决方案。

ClientApp \应用\部件\家\ 的 home.routing.module.ts

const routes: Routes = [
    {
        path: 'home', component: HomeComponent,
        children: [
            { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
            { path: 'dashboard', component: DashboardComponent }
        ]
    }
]

export const routableComponents = [DashboardComponent]
@NgModule({
    imports: [CommonModule, RouterModule.forChild(routes)],
    exports: [RouterModule],
    declarations: [routableComponents]
})
export class HomeRoutingModule {
}

应用路由-module.ts

const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'register-user', component: RegisterUserComponent },
    { path: 'home', loadChildren: "./components/home/home.routing.module#HomeRoutingModule" },
    { path: '**', redirectTo: 'login' }

我收到上述代码

的错误

EXCEPTION：未捕获（在承诺中）：TypeError： webpack_require .i（...）不是函数TypeError： webpack_require .i（...）不是函数

也按照建议的here

使用此包

"angular2-router-loader": "0.3.4"

webpack.config.js

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: ['awesome-typescript-loader?silent=true', 'angular2-template-loader',
                    'angular2-router-loader']
                },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    }

请说明我做错了什么。

Answer 1

检查你的webpack配置应该是这样的，可能你错过了webpack的加载器

    // Configuration in common to both client-side and server-side bundles
var sharedConfig = {
    context: __dirname,
    resolve: { extensions: [ '', '.js', '.ts' ] },
    output: {
        filename: '[name].js',
        publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        loaders: [
            { test: /\.ts$/, include: /ClientApp/, loaders: ['ts-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] },
            { test: /\.html$/, loader: 'html-loader?minimize=false' },
            { test: /\.css$/, loader: 'to-string-loader!css-loader' },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } },
            { test: /\.json$/, loader: 'json-loader' }
        ]
    }

Answer 2

它对我有用。

重新启动服务器：ng serve --aot

在路径中添加延迟加载的模块时，需要重新加载

。

https://github.com/angular/angular-cli/issues/9825

延迟加载模块angular 2和asp-net core

2 个答案: