Angular2 UpgradeComponent thiếu $ injector

Tôi cố gắng để nâng cấp một thành phần Angular1 và tiêu thụ nó trong ứng dụng Angular2 của tôi bằng cách làm theo the official Angular2 documentation here dưới "Sử dụng góc 1 Component Chỉ thị từ góc 2 Code", nhưng nó mang lại các lỗi sau:

error_handler.js:54 TypeError: Cannot read property 'get' of undefined 
    at ChartDirective.UpgradeComponent (upgrade_component.js:97)

Sau khi kiểm tra chặt chẽ hơn về dòng 97, đây $ thanh tra là undefined:

Mã của tôi rất đơn giản:

import { Directive, ElementRef, Injector } from '@angular/core'; 
import { UpgradeComponent } from '@angular/upgrade/static'; 

export const coolComponent = { 
    template: 'cool', 
    controller: function() { 
    } 
}; 

@Directive({ 
    selector: 'app-chart' 
}) 
export class ChartDirective extends UpgradeComponent { 

    constructor(elementRef: ElementRef, injector: Injector) { 
     super('coolComponent', elementRef, injector); 
    } 
}

main.ts của tôi cho bootstrapping là:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);

Đây là phiên bản đơn giản của vấn đề, với các bước sinh sản tối thiểu: https://github.com/dolanmiu/angular2-upgrade-test

Nó được tạo bởi angular-cli

Nguồn

2016-11-18 Dolan

Tôi gặp sự cố tương tự. Để khắc phục vấn đề của tôi, tôi loại bỏ các dòng sau từ AppModule định nghĩa của tôi:

bootstrap: [AppComponent]

Trong trường hợp của tôi, tôi cũng đã có thêm các AppComponent-entryComponents phần của tôi:

entryComponents: [AppComponent]

Bạn cũng cần phải thực hiện phương pháp ngDoBootstrap, nếu bạn chưa có:

export class AppModule { 
    ngDoBootstrap() {} 
}

Nguồn

2016-11-18 20:32:44

Nó vẫn không hoạt động! Thay vào đó, tôi gặp lỗi khi nói ứng dụng không được khởi động. Làm cho cảm giác kể từ khi bạn nói với tôi để loại bỏ các 'bootstrap' dòng trong' AppModule' [ảnh chụp màn hình ở đây] (http://imgur.com/a/7o3Bi) – Dolan

Làm theo hướng dẫn một trong những trang web Angular, tôi cũng thực hiện 'ngDoBootstrap' phương pháp. Điều đó sẽ loại bỏ lỗi của bạn. –

Đây là một ví dụ làm việc tôi đã tạo. Tôi đã có cùng một vấn đề như bạn mô tả. Chìa khóa đối với tôi là hạ cấp AppComponent của tôi và đặt các thành phần hạ cấp vào góc 1 ứng dụng:

import { App1Component } from './app1.component'; 
import { App } from './app'; 
import { downgradeComponent } from '@angular/upgrade/static'; 

angular.module('ng1', []) 
    .directive(
     'ng2AppComponent', 
     downgradeComponent({component: App}) 
    ) 
    .component('app1Component', App1Component);

index.html:

... 
<body> 
    <ng2-app-component></ng2-app-component> 
</body> 
...

Sau đó, tôi cần phải làm như mô tả ở trên và di chuyển AppComponent để entryComponents trong AppModule của tôi.

@NgModule({ 
    imports: [ BrowserModule, UpgradeModule ], 
    declarations: [ App, App1Directive ], 
    entryComponents: [ App ] 
}) 
export class AppModule { 
    ngDoBootstrap() {} 
}

Trong ví dụ của tôi hạ góc 2 AppComponent là trong index.html nhưng bạn có thể đặt nó ở bất cứ góc 1 mẫu bạn muốn nếu điều đó có ý nghĩa hơn cho các ứng dụng của bạn.

https://plnkr.co/edit/YSw63x10WAEivMWdNffj?p=preview

Nguồn

2017-02-08 15:36:46 dmungin

Tôi đang cố gắng nâng cấp thành phần Angular1 lên Angular2 mặc dù phần lớn cơ sở mã của chúng tôi là Angular2. Hạ cấp không phải là một tùy chọn, trừ khi chúng tôi hạ cấp 5 tháng làm việc: P. Dễ dàng hơn để nâng cấp 1 thành phần phải không? – Dolan

Tôi hiểu sự nhầm lẫn dựa trên câu trả lời của tôi, nhưng hãy xem tài liệu hướng dẫn ở đây: https://angular.io/docs/ts/latest/api/upgrade/index/UpgradeAdapter-class.html Nếu bạn kiểm tra điểm 8 của "Mô hình tinh thần", nó nói "Góc 1 luôn được khởi động trước tiên và sở hữu góc nhìn thấp nhất." Điều này có nghĩa là bạn phải có một ứng dụng Angular 1 được khởi động vào một cái gì đó như document.documentElement (như trong plunker của tôi). Từ đó bạn hạ cấp Angular 2 AppComponent của bạn và đặt nó bên trong khung nhìn dưới cùng đó. Bạn không cần phải hạ cấp mọi thành phần Ng2 khác chỉ là thành phần nhập chính. – dmungin

Nó không thể sử dụng chỉ thị ng1 nâng cấp bởi UpgradeComponent, khi bạn sử dụng ng2 để bootstrap ứng dụng của bạn.

Bạn cần sử dụng ng1 để khởi động ứng dụng và thành phần ng2, sau đó sử dụng lệnh ng1 trong thành phần ng2.

nào cần loại bỏ tất cả nội dung trong bootstrap của @NgModule, và di chuyển AppComponent-entryComponents, sau đó trống ngDoBootstrap() trong AppModule:

@NgModule({ 
    bootstrap: [ ], 
    //... 
    entryComponents: [ 
     AppComponent, 
     //... 
    ] 
}) 
export class AppModule { 
    public ngDoBootstrap() {} 
}

Sau đó, hạ cấp AppComponent:

import { AppComponent } from '../app.component'; 
import { downgradeComponent } from '@angular/upgrade/static'; 
//... 
angular.directive(
    'app', downgradeComponent({ 
     component: AppComponent 
    }) as angular.IDirectiveFactory 
);

Và bây giờ, bạn có thể hiển thị chỉ thị ng1 nâng cấp, trong thành phần ng2.

Chi tiết khác: Angular2 UpgradeComponent missing $injector

Nguồn

2017-02-22 08:29:20 LeeGenD

Angular2 UpgradeComponent thiếu $ injector

Trả lời

Các vấn đề liên quan