Bộ chọn Angular2 không khớp với bất kỳ phần tử nào có gói và ECM6

Tôi có một dự án angular2 rất đơn giản, được cấu hình để làm việc với Gulp, Bundle và ECM6. Gói sẽ tạo một tệp lớn chứa ECM5 đã dịch của góc cộng với ứng dụng của tôi.Bộ chọn Angular2 không khớp với bất kỳ phần tử nào có gói và ECM6

<!DOCTYPE html> 
<html> 
<head> 
    <title>Angular 2 Test</title> 
    <script src="bundle.js"></script> 
</head> 

<body> 
<mainapp> 

</mainapp> 
</body> 
</html>

Ứng dụng góc được định nghĩa như sau:

import {Component, View, bootstrap} from 'angular2/core'; 

export class mainComponent { 
    static get annotations() { 
     return [ 
      new Component({ 
       selector: 'mainapp' 
      }), 
      new View({ 
       template: `<div>Hello!</div>` 
      }) 
     ]; 
    } 
} 

bootstrap(mainComponent);

Tuy nhiên khi tôi tải nó, tôi tiếp tục nhận được một lỗi

"selector 'mainapp' did not match any element"

Nguồn

2016-01-12 Senior Simone Zandara

Vấn đề là tôi đã bao gồm bundle.js trước khi thành phần mainapp được xác định trong HTML. Điều này đã khắc phục được sự cố.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Angular 2 Test</title> 

</head> 

<body> 
<mainapp> 

</mainapp> 
<script src="bundle.js"></script> 
</body> 
</html>

Cập nhật:

<script src="bundle.js" defer></script>

vẻ cũng để giải quyết vấn đề không phụ thuộc vào thứ tự của các yếu tố.

Nguồn

2016-01-12 11:10:57

Thuộc tính 'defer' được thêm vào tập lệnh cũng sẽ hữu ích. –

attfer 'defer' đã giải quyết được vấn đề! –

@AlexOkrushko +1 – wootscootinboogie

Bộ chọn Angular2 không khớp với bất kỳ phần tử nào có gói và ECM6

Trả lời

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