Angular2 Webpack lazyload TypeError:无法将undefined或null转换为object

时间:2017-01-15 17:26:43

标签: angular webpack-2

我遇到了angular-router-loader的问题,
我想懒惰加载模块的地方,我遵循我看到的每个指南,
我一直收到这个错误:TypeError: Cannot convert undefined or null to object

The error

这是我的webpack.config.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        'app': './app/main.ts'
    },
    resolve: {
        extensions: ['.js', '.ts']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular-router-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.css$/,
                loader: 'raw-loader'
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            './app' // location of the src
        )
    ]
};

这里是app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full'
    },
    {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
    }
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

以下是dashboard/dashboard.module

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { FormsModule }    from '@angular/forms';

import { DashboardComponent }    from './dashboard.component';

import { dashboardRouting } from './dashboard.routing';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        dashboardRouting
    ],
    declarations: [
        DashboardComponent
    ],
    providers: [
    ]
})
export class DashboardModule {}

以下是我的依赖项:

"devDependencies": {
    "@types/core-js": "^0.9.35",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "^2.5.38",
    "@types/node": "^6.0.53",
    "angular-router-loader": "^0.5.0",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "del-cli": "^0.2.1",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.26.0",
    "lite-server": "^2.2.2",
    "raw-loader": "^0.5.1",
    "webpack": "^2.2.0-rc.4",
    "webpack-dev-server": "^2.2.0-rc.0",
    "webpack-merge": "^2.4.0"
  }

我做错了什么?

1 个答案:

答案 0 :(得分:1)

尝试导入

import { RouterModule } from '@angular/router';
import { <children routes of dashboard> } from '<path of dashboard child routes>';
信息中心/信息中心。模块中的

然后将其放在信息中心模块

的NgModule导入区域中
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        dashboardRouting
    ],
    declarations: [
        DashboardComponent
    ],
    imports: [
        RouterModule.forChild(<children routes of dashboard>)
    ]
})
export class DashboardModule {}

请用必要的详细信息替换&lt;&gt; 部分。