Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular2 Webpack lazyload TypeError:无法将undefined或null转换为object大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我遇到角度路由器加载器的问题,
我想懒惰加载一个模块,我遵循我看到的每个指南,
并且我不断收到此错误:TypeError:无法将undefined或null转换为object:

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

这是我的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);

这是仪表板/仪表板.模块:

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"
  }

我做错了什么?

解决方法

尝试导入

import { RouterModule } from '@angular/router';
import { <children routes of dashboard> } from '<path of dashboard child routes>';

在您的仪表板/ dashboard.module中,然后将其放在DashboardModule的NgModule导入区域中

@NgModule({
    imports: [
        CommonModule,imports: [
        RouterModule.forChild(<children routes of dashboard>)
    ]
})
export class DashboardModule {}

请替换<>部分有必要的细节.

大佬总结

以上是大佬教程为你收集整理的Angular2 Webpack lazyload TypeError:无法将undefined或null转换为object全部内容,希望文章能够帮你解决Angular2 Webpack lazyload TypeError:无法将undefined或null转换为object所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。