2016-10-26 24 views
5

Tôi có ứng dụng 2 góc được xây dựng với angular-cli và tôi cần sử dụng chỉ thị góc 1 trong một trong các thành phần của tôi (để sử dụng lại từ ứng dụng khác) . Tôi làm theo các bước từ:

https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code

Nhưng bây giờ tôi nhận được lỗi này và không thể vượt qua nó. Tôi đang sử dụng angular2.0.2 (Tôi quản lý để xây dựng một ứng dụng lai trong quá khứ với phiên bản beta nhưng nó là một ứng dụng angular1 và tôi đã sử dụng 2 thành phần góc với chức năng hạ cấp của bộ điều hợp).

Trong app.module.ts của tôi, tôi có:

import { UpgradeAdapter } from '@angular/upgrade'; 
const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); 

const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail'); 

@NgModule({ 
    imports:  [ 
     BrowserModule, 
     ... 
    ], 
    declarations: [ 
     ...  
    HeroDetail 
    ] 
}) 
export class AppModule { } 

và tôi anh hùng-detail.component.ts trông như thế này:

export const heroDetail = { 
    templateUrl: 'hero-detail.html', 
    controller: function() { 
    } 
}; 

và tôi anh hùng-detail.html trông giống như này:

<h2>Windstorm details!</h2> 

Tôi cố gắng sử dụng chỉ thị trong một thành phần 2 góc khác đơn giản bằng cách thêm vào mẫu:

Khi tôi chạy ng phục vụ, ứng dụng biên dịch tốt nhưng khi tôi cố gắng tải trang, tôi nhận được lỗi được đề cập.

Bất kỳ đề xuất nào về cách tôi có thể tiếp tục với điều này?

+1

Bất kỳ tiến trình nào với điều này? Tôi đang gặp vấn đề tương tự. – vangorra

Trả lời

2

Dường như bạn có logic khởi động không chính xác.

Nó thực sự không phải là khá rõ ràng, chắc chắn rằng:

  • bạn không bootstrap bất kỳ thành phần ng2 với @NgModule({bootstrap:[ ... ]}). Thay vào đó, bạn nên có phương thức trống rỗng ngDoBootstrap() { } trong mô-đun chính của mình.
  • mẫu gốc là ng1 mẫu. I E. trong số index.html bạn chỉ nên có các thành phần ng1 hoặc bị hạ cấp ng2 thành phần. Bạn có thể có thành phần ng2 làm gốc, nhưng trước tiên bạn cần hạ cấp thành phần đó.

hướng dẫn nâng cấp chính thức có chứa một ví dụ về cấu trúc DOM:

enter image description here

... mà đảm bảo rằng ng2 kim phun có tất cả các nhà cung cấp yêu cầu từ ng1.

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