2017-09-29 12 views
0

Je travaille sur une application qui utilise AngularJS et Angular (2+). Dans la nouvelle version, j'utilise system.js pour importer l'application Angular. Sans l'import system.js, le calendrier fonctionne correctement, mais avec system.js, il y a un problème à initialiser.Application hybride angulaire, typeerror calendar.fullcalendar n'est pas une fonction

J'ai essayé l'astuce ci-dessous avec calendar = $(elm); sans chance.

https://github.com/angular-ui/ui-calendar/issues/267

Même essayer var calendar = $('#calendar’).

Le problème ne semble pas être de reconnaître qu'il existe un élément de calendrier. D'après ce que je peux déduire de la journalisation du code source du framework, quand il fonctionne correctement, l'élément calendar a ces classes lors de l'initialisation.

div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope.fc.fc-cursor.fc-ltr.fc-unthemed 

Actuellement initialize essaie d'utiliser comme l'élément de calendrier qui jette l'erreur angular.min.js:117 TypeError: calendar.fullCalendar is not a function, il trouve toujours l'élément correct, mais ne rajoutez pas des classes à elle.

div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope 

script.ejs

<!-- jQuery --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<—-! All the AngularJS -—> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-cookies.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-animate.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-route.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-sanitize.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
<!-- Moment --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg=" crossorigin="anonymous"></script> 
<!-- ui calendar --> 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js" integrity="sha256-DBa6dvjY39GU4NQ2Ia2CIPVFszxgZ4N3JccyPvJNPLI=" crossorigin="anonymous"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script> 

AngularJS seule application, index.ejs:

<body> 
    <div id="shell" data-ng-app="app" data-ng-controller="shellController"> 

    … 

    </div> 


    <%- include partials/scripts %> 

</body> 

app hybrides index.ejs:

<body class="full-width"> 
    <div id="shell" data-ng-controller="shellController"> 

    … 

    </div> 


    <%- include partials/scripts %> 

    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err) { console.error('ERR from import: ’,err); }); 
    </script> 


</body> 

J'utilise v 2.7 .1 de fullcalendar, et v 1.0.0 de angulaire-ui-calendrier. Toute aide à ce qui pourrait être la cause de ce problème serait extrêmement appréciée, j'ai regardé cela pendant des jours!

Répondre