Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 2 Lazy Loading:RangeError:超出最大调用堆栈大小大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我是Angular 2的新手,正在尝试延迟加载.我收到错误“RangeError:超出最大调用堆栈大小”

我尝试了很多其他类似的问题,但对我没什么用.以下是我的代码供您参.让我知道这个问题.

// App Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { httpR_799_11845@odule } from '@angular/http';
import { AppComponent } from './app.component';
import { ROUTER_CONfig } from './app.routIng';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    BrowserModule,FormsModule,httpR_799_11845@odule,ROUTER_CONfig
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }


// App RoutIng

import { RouterModule,Routes } from '@angular/router';
import { AppComponent } from './app.component';

const ROUTER_DATA: Routes = [
    { path:'home',component: AppComponent },{ path:'lazy',loadChildren: './lazy/lazy.module#Lazymodule' },{ path:'',redirectTo:'home',pathMatch: 'full'}
];

export const ROUTER_CONfig = RouterModule.forRoot(ROUTER_DATA);

//App Component

import { Component } from '@angular/core';

@Component({
  SELEctor: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}


// Lazy module


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyComponent } from './lazy.component';
import { ROUTER_CONfig } from './lazy.routIng';

@NgModule({
  declarations: [
    LazyComponent
  ],imports: [
    CommonModule
  ],bootstrap: [LazyComponent]
})
export class Lazymodule { }


// lazy RoutIng

import { RouterModule,Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';

const ROUTER_DATA: Routes = [
    { path:'',component: LazyComponent }
];

export const ROUTER_CONfig = RouterModule.forRoot(ROUTER_DATA);

// lazy component

import { Component,OnInit } from '@angular/core';

@Component({
  SELEctor: 'app-lazy',templateUrl: './lazy.component.html',styleUrls: ['./lazy.component.css']
})
export class LazyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
<!-- App HTML -->

<div [routerLink]="['/home']">Home</div>
<div [routerLink]="['/lazy']">Lazy</div>
<router-outlet></router-outlet>

<!-- lazy html -->

<p>
  lazy works!
</p>

解决方法

您忘记配置子路由

lazy.routIng.ts

export const ROUTER_CONfig = RouterModule.forRoot(ROUTER_DATA);

export const ROUTER_CONfig = RouterModule.forChild(ROUTER_DATA);

lazy.module.ts

import { ROUTER_CONfig } from './lazy.routIng';
... 

imports: [
    ROUTER_CONfig
  ]
})
export class Lazymodule { }

大佬总结

以上是大佬教程为你收集整理的Angular 2 Lazy Loading:RangeError:超出最大调用堆栈大小全部内容,希望文章能够帮你解决Angular 2 Lazy Loading:RangeError:超出最大调用堆栈大小所遇到的程序开发问题。

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

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