Khởi tạo thành phần Vòng lặp vô hạn - Góc 2 JSPM

Question

Đây là lỗi đầy đủ.

RangeError: Maximum call stack size exceeded 
at Injector._instantiate (http://localhost:8000/build.js:36366:63) 
at Injector._instantiateProvider (http://localhost:8000/build.js:36244:23) 
at Injector._new (http://localhost:8000/build.js:36234:21) 
at InjectorInlineStrategy.instantiateProvider (http://localhost:8000/build.js:35998:30) 
at ElementDirectiveInlineStrategy.init (http://localhost:8000/build.js:35106:20) 
at new AppElement (http://localhost:8000/build.js:34800:24) 
at viewFactory_constructor0 (viewFactory_constructor:74:26) 
at viewFactory_constructor0 (viewFactory_constructor:76:1) 
at viewFactory_constructor0 (viewFactory_constructor:76:1) 
at viewFactory_constructor0 (viewFactory_constructor:76:1) <app id="NG2_UPGRADE_0_app_c0"> 

Đây là tệp nguồn của tôi.

import 'reflect-metadata' 

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser' 

console.log('Files have started being compiled and infinite loop has begun'); 

var TodoCmpTest = 
Component({ 
    selector: 'todo-cmp' 
}) 
.View({ 
    template: `<h1>TodoCmpTest</h1>` 
}) 
.Class({ 
    constructor: function(){ 
    console.log('hello'); 
    } 
}); 


var AppComponent = 
Component({ 
    selector: 'app', 
}) 
.View({ 
    template: ` 
    <div> 
    <h1> Hello World </h1> 
    <todo-cmp></todo-cmp> 
    </div> 
    `, 
    directives: [TodoCmpTest] 
// directives: [] 
}) 
.Class({ 
    constructor: function() {} 
}); 

bootstrap(AppComponent); 

Việc khôi phục lại TodoCmpTest lặp đi lặp lại.

Nếu bạn trao đổi hai dòng này, nó hoạt động nhưng không tải TodoCmpTest. directives: [TodoCmpTest] // directives: []

Bạn có thể tái sản xuất lỗi này bằng cách làm như sau ...

1. git clone https://github.com/danielrasmuson/Angular2HelloWorld-StackOverflow 2. use node v5.4.0 3. jspm install 4. npm install 5. npm start

Answer 1

Có vẻ như đó là một vấn đề 2 góc trong các phiên bản beta 1, tôi đã cố gắng repo của bạn với góc 2 beta 0 và nó hoạt động tốt, không có vòng lặp. Tôi đề nghị bạn nên gắn bó với bản beta 0, cho đến khi họ sửa nó. Tôi không biết jspm, vì vậy đây là những gì tôi đã làm để kiểm tra: (không phải mọi thứ ở đây đều cần nhưng chỉ chỉnh sửa package.json -> remove -> và cài đặt lại tiếp tục cài đặt cho tôi phiên bản beta angular 1)

chỉnh sửa phụ thuộc angular2 package.json tới:

"jspm": { 
    "dependencies": { 
     "angular2": "npm:angular2@2.0.0-beta.0", 
     "reflect-metadata": "npm:reflect-metadata@^0.1.3" 
    }, 

sau đó tôi chạy

rm -rf jspm_packages/npm/angular2@2.0.0-beta.1 
jspm install npm:angular2@2.0.0-beta.0 
npm start 

Answer 2

Nếu đây là là nguyên nhân gây ra bởi một vòng lặp không dừng lại sau đó sử dụng break; trên dòng dưới đây directives: [TodoCmpTest] sẽ ngừng vòng lặp này.

Bạn không chắc chắn điều này có hiệu quả hay không nhưng hãy thử.

Answer 3

Tôi gặp phải sự cố tương tự. Tôi đã sử dụng gói webpack và cài đặt trước babel + es2015 để gói mã của mình. Tôi nhận ra rằng nếu trong bó tôi có mã tiếp theo tất cả hoạt động tốt:

Component({ 
    ... 
    directives: [SuperComponent] 
}).Class({ 
    constructor: function() {} 
}); 

nhưng nếu tôi có hôm sau tôi nhận được vòng lặp inifinity:

Component({ 
    ... 
    //Important: reproduces only with not empty directives that used in template 
    directives: [SuperComponent] 
}).Class({ 
    constructor: function costructor() {} 
}); 

tôi đã không điều tra lý do tại sao nó xảy ra, nhưng tôi tin rằng một số vấn đề góc bên trong2 của nó. Như cách giải quyết khác, tôi đã tạo cài đặt trước es2015 mà không có plugin chức năng gây ra sự chuyển đổi này: https://github.com/DontRelaX/babel-preset-es2015-without-function-name

Hy vọng nó sẽ giúp bạn tiết kiệm một hoặc hai giờ. Sẽ tạo ra vấn đề trong repular angular2.