角2 - 錯誤：（SystemJS）最大調用堆棧大小超過了（...）

Question

我有一個小問題：

錯誤：（SystemJS）最大調用堆棧大小超過了（...）

我有一個分量在這裏我導入另一個模塊： 這裏是videos.module.ts：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { VideosComponent } from './videos.component'; 
import { EditorModule, SharedModule, ButtonModule } from 'primeng/primeng'; 
import { GalleryModule } from '../../components/gallery/gallery.module'; 


@NgModule({ 
    imports: [CommonModule, SharedModule, EditorModule, SharedModule, ButtonModule, GalleryModule], 
    declarations: [VideosComponent], 
    exports: [VideosComponent], 
    providers: [] 
}) 
export class VideosModule { } 

正如你可以看到我導入庫模塊。如果我刪除這個，那麼錯誤就會消失。 讓我們繼續下去兔子洞。

這裏是畫廊gallery.module.ts：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { ViewerComponent } from '../viewer/viewer.component'; 
import { GalleryComponent } from './gallery.component'; 

@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule], 
    declarations: [GalleryComponent, ViewerComponent], 
    exports: [GalleryModule], 
    providers: [] 
}) 
export class GalleryModule { } 

這裏是gallery.component.ts

import {Component, NgZone, ViewChild, ElementRef} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import { ViewerComponent } from '../viewer/viewer.component'; 
import 'rxjs/Rx'; 


interface IImage { 
    url: string; 
    thumbnail: string; 
    date: string; 
    width: number; 
    height: number; 
} 


@Component({ 
    selector: 'sd-gallery', 
    templateUrl: 'gallery.component.html', 
    styleUrls: ['gallery.component.css'] 
}) 
export class GalleryComponent { 

    @ViewChild('galleryContainer') galleryContainer: ElementRef; 
    @ViewChild('asyncLoadingContainer') asyncLoadingContainer: ElementRef; 

    thumbnailBasePath = 'assets/img/gallery/preview_xxs/'; 
    currentIdx: number = 0; 
    galleryBasePath: string = 'assets/img/gallery/'; 
    showBig: boolean = false; 
    images: any[] = [{ url: '' }]; 
    gallery: any[] = []; 
    imgIterations = 1; 
    allImagesLoaded = false; 


    // TypeScript public modifiers 
    constructor(private _ngZone: NgZone, private http: Http) { 

    } 


    private ngAfterContentInit() { 
    this.fetchDataAndRender(); 
    } 

    private fetchDataAndRender() { 
    this.http.get(this.galleryBasePath + 'data.json') 
     .map((res: Response) => res.json()) 
     .subscribe(
     data => { 
     this.images = data; 
     this.render(); 
     }, 
     err => console.error(err), 
    () => undefined); 
    } 

    private render() { 
    let tempRow = [this.images[0]]; 
    let rowIndex = 0; 
    let i = 0; 

    for (i; i < this.imgIterations && i < this.images.length; i++) { 
     while (this.images[i + 1] && this.shouldAddCandidate(tempRow, this.images[i + 1])) { 
     i++; 
     } 
     if (this.images[i + 1]) { 
     tempRow.pop(); 
     } 
     this.gallery[rowIndex++] = tempRow; 

     tempRow = [this.images[i + 1]]; 
    } 

    this.scaleGallery(); 

    if (i >= this.images.length) { 
     this.allImagesLoaded = true; 
    } else { 
     this.checkForAsyncReload(); 
    } 
    } 

    private shouldAddCandidate(imgRow: IImage[], candidate: IImage): boolean { 
    let oldDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow); 
    imgRow.push(candidate); 
    let newDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow); 

    return Math.abs(oldDifference) > Math.abs(newDifference); 
    } 

    private calcRowHeight(imgRow: IImage[]) { 
    let xsum = this.calcOriginalRowWidth(imgRow); 

    let ratio = this.getGalleryWidth()/xsum; 
    let rowHeight = imgRow[0].height * ratio; 

    return rowHeight; 
    } 

    private scaleGallery() { 
    this.gallery.forEach((imgRow) => { 
     let xsum = this.calcOriginalRowWidth(imgRow); 

     if (imgRow !== this.gallery[this.gallery.length - 1]) { 
     let ratio = this.getGalleryWidth()/xsum; 

     imgRow.forEach((img: any) => { 
      img.width = img.width * ratio; 
      img.height = img.height * ratio; 
     }) 
     } 
    }) 
    } 

    private calcOriginalRowWidth(imgRow: IImage[]) { 
    let xsum = 0; 
    imgRow.forEach((img) => { 
     let individualRatio = this.calcIdealHeight()/img.height; 
     img.width = img.width * individualRatio; 
     img.height = this.calcIdealHeight(); 
     xsum += img.width + 1; 
    }); 

    return xsum; 
    } 

    private calcIdealHeight() { 
     return (this.getGalleryWidth()/8) + 70; 
    } 

    private openImageViewer(img: any) { 
    this.showBig = undefined; 
    this.showBig = true; 
    this.currentIdx = this.images.indexOf(img); 
    } 

    private getGalleryWidth() { 
    if (this.galleryContainer.nativeElement.clientWidth === 0) { 
     // IE11 
     return this.galleryContainer.nativeElement.scrollWidth; 
    } 
    return this.galleryContainer.nativeElement.clientWidth; 
    } 

    private checkForAsyncReload() { 
    if (!this.allImagesLoaded) { 
     var loadingDiv: any = this.asyncLoadingContainer.nativeElement; 

     var elmTop = loadingDiv.getBoundingClientRect().top; 
     var elmBottom = loadingDiv.getBoundingClientRect().bottom; 

     var isVisible = (elmTop >= 0) && (elmBottom <= window.innerHeight); 

     if (isVisible) { 
     this.imgIterations += 5; 
     this.fetchDataAndRender(); 
     } 
    } 
    } 

    private onClose() { 
    this.showBig = false; 
    } 

    private onResize() { 
    this.render(); 
    } 


} 

我不會觀察部包括因爲即使我將其刪除從畫廊的HTML /模塊我仍然得到同樣的問題。

謝謝大家！

• 以下是完整的例外的圖像： https://postimg.org/image/fmf7qzksn/

Answer 1

我看到你GalleryModule，其中一人可能是造成你所得到的錯誤了兩個錯誤。

首先

BrowserModule只應根模塊中導入。 （通常這是AppModule）您應該導入CommonModule，因爲這可能是您在GalleryModule中需要的全部內容。 （CommonModule包含像*ngIf和*ngFor共同指令）

二

刪除GalleryModule從出口：

exports: [GalleryModule] 

爲什麼你會從GalleryModule本身出口GalleryModule？這條線已經在做所有的工作：

export class GalleryModule { } 

如果讓我下注，我會說這是什麼造成的錯誤。

Answer 2

當我得到這個錯誤時，它是由我的網頁上包含prototype.js庫引起的。我刪除原型後，我的Angular 2應用程序加載成功。