2016-01-12 8 views
10

Mam bardzo prosty projekt angle2, skonfigurowany do pracy z Gulp, Bundle i ECM6. Pakiet utworzy duży plik zawierający przetłumaczone ECM5 kątowe oraz moją aplikację.Angular2 Selector nie pasuje do żadnego elementu z pakietem i ECM6

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

<body> 
<mainapp> 

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

kątowe aplikacja jest zdefiniowany następująco:

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); 

Jednak kiedy załadować go, ja ciągle otrzymuję błąd

"selector 'mainapp' did not match any element" 

Odpowiedz

21

Problemem było to, że włączając bundle.js zanim składnik mainapp został zdefiniowany w kodzie HTML. To rozwiązało problem.

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

</head> 

<body> 
<mainapp> 

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

Aktualizacja:

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

Wydaje się również rozwiązać problem niezależnie od kolejności elementów.

+4

Dodany do skryptu atrybut 'defer' również pomógłby. –

+0

the 'defer' attr rozwiązany problem! –

+1

@AlexOkrushko +1 – wootscootinboogie

Powiązane problemy