2016-05-23 55 views
0

我正在嘗試爲我的組件加載一些外部JS庫。但是,有些作品,有些則沒有。我不確定是否有bootstrap-datatable的解決方法,或者我必須修改JS文件?Angular2加載外部Javascript庫失敗

這是我得到的錯誤: Error: Error: Multiple anonymous defines in module

import {Component, OnInit} from 'angular2/core'; 
import {Router, RouteConfig, RouterOutlet, RouterLink} from 'angular2/router'; 

import LeftNavComponent from '../common/left-nav'; 
import LeftNavHamburgerBtnComponent from '../common/left-nav-hambtn'; 

import ApprovalsComponent from '../approval/approvals'; 

@Component({ 
    selector: 'pc-home', 
    styleUrls: ['app/components/home/home.css'], 
    templateUrl: 'app/components/home/home.html', 
    directives: [ 
     RouterLink, 
     RouterOutlet, 
     LeftNavComponent, 
     LeftNavHamburgerBtnComponent 
    ] 
}) 
@RouteConfig([ 
    { path: '/approvals', component: ApprovalsComponent, name: 'Approvals', useAsDefault: true } 
]) 
export default class HomeComponent implements OnInit { 

    title: string; 
    titleIcon: string; 
    appVersion: string; 

    constructor(private router: Router) { 
     System.import('resources/js/datatables/datatables.min.js'); // not working 
     System.import('resources/js/chosen/chosen.jquery.js'); // works 
     System.import('resources/js/datapicker/bootstrap-datepicker.js'); // works 
     //System.import('node_modules/chart.js/dist/Chart.min.js'); // Enable this if use Chart.js 
    } 

    ngOnInit() { 
     this.title = 'Approvals'; 
     this.titleIcon = 'fa-edit'; 
     this.appVersion = 'v2016.8.1.0'; 

     if ($(document).width() < 769) { 
      $('body').addClass('body-small'); 
     } else { 
      $('body').removeClass('body-small'); 
     } 

     $(window).bind("resize", function() { 
      if ($(this).width() < 769) { 
       $('body').addClass('body-small'); 
      } else { 
       $('body').removeClass('body-small'); 
      } 
     }); 
    } 
} 

回答

0

爲什麼你需要通過系統導入它們? 他們似乎是除Chart.js之外的jQuery插件。

如果您按照正確的順序加載它們,您可以在Angular 2應用程序中訪問它們。

+0

我不想通過使用