ReferenceError: kendo не определен

Question

Я попытался создать образец приложения для загрузки кендо-сетки, завернутой в компонент угловой2. Когда я пытаюсь запустить приложение я получаю исключение в браузере Chrome, как показано ниже

angular2.dev.js:24821 EXCEPTION: Error in :0:0BrowserDomAdapter.logError @ angular2.dev.js:24821 
angular2.dev.js:24821 ORIGINAL EXCEPTION: ReferenceError: kendo is not definedBrowserDomAdapter.logError @ angular2.dev.js:24821 
angular2.dev.js:24821 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:24821 
angular2.dev.js:24821 ReferenceError: kendo is not defined 
    at Kendogrid.setUpGridOptions (Kendogrid.ts:23) 
    at new Kendogrid (Kendogrid.ts:19) 
    at AppView._View_Kendogrid_Host0.createInternal (Kendogrid_Host.template.js:15) 
    at AppView.create (angular2.dev.js:22641) 
    at ComponentFactory.create (angular2.dev.js:7668) 
    at angular2.dev.js:8215 
    at angular2.dev.js:8192 
    at ZoneDelegate.invoke (angular2-polyfills.js:349) 
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (angular2.dev.js:2185) 
    at ZoneDelegate.invoke (angular2-polyfills.js:348) 

Я не получаю никаких других подробностей об исключении и не в состоянии далее по этому вопросу.

Я попытался тиражирование и тот же вопрос в Plunker

Если я пытаюсь использовать ссылку, которая находится на HTTP, то я получаю следующую ошибку

Mixed Content: The page at 'https://plnkr.co/edit/GpVY7KsFT0aExAz3G7ka?p=preview' was loaded over HTTPS, but requested an insecure stylesheet 'http://cdn.kendostatic.com/2015.3.1111/styles/kendo.common.min.css'. This request has been blocked; the content must be served over HTTPS. 
run.plnkr.co/:25 Mixed Content: The page at 'https://plnkr.co/edit/GpVY7KsFT0aExAz3G7ka?p=preview' was loaded over HTTPS, but requested an insecure stylesheet 'http://cdn.kendostatic.com/2015.3.1111/styles/kendo.mobile.all.min.css'. This request has been blocked; the content must be served over HTTPS. 
run.plnkr.co/:26 Mixed Content: The page at 'https://plnkr.co/edit/GpVY7KsFT0aExAz3G7ka?p=preview' was loaded over HTTPS, but requested an insecure stylesheet 'http://cdn.kendostatic.com/2015.3.1111/styles/kendo.dataviz.min.css'. This request has been blocked; the content must be served over HTTPS. 
run.plnkr.co/:27 Mixed Content: The page at 'https://plnkr.co/edit/GpVY7KsFT0aExAz3G7ka?p=preview' was loaded over HTTPS, but requested an insecure stylesheet 'http://cdn.kendostatic.com/2015.3.1111/styles/kendo.default.min.css'. This request has been blocked; the content must be served over HTTPS. 
run.plnkr.co/:28 Mixed Content: The page at 'https://plnkr.co/edit/GpVY7KsFT0aExAz3G7ka?p=preview' was loaded over HTTPS, but requested an insecure stylesheet 'http://cdn.kendostatic.com/2015.3.1111/styles/kendo.dataviz.default.min.css'. This request has been blocked; the content must be served over HTTPS. 
run.plnkr.co/:1 Mixed Content: The page at 'https://plnkr.co/edit/GpVY7KsFT0aExAz3G7ka?p=preview' was loaded over HTTPS, but requested an insecure script 'http://cdn.kendostatic.com/2015.3.1111/js/jszip.min.js'. This request has been blocked; the content must be served over HTTPS. 
run.plnkr.co/:1 Mixed Content: The page at 'https://plnkr.co/edit/GpVY7KsFT0aExAz3G7ka?p=preview' was loaded over HTTPS, but requested an insecure script 'http://cdn.kendostatic.com/2015.3.1111/js/kendo.all.min.js'. This request has been blocked; the content must be served over HTTPS. 
run.plnkr.co/:1 Mixed Content: The page at 'https://plnkr.co/edit/GpVY7KsFT0aExAz3G7ka?p=preview' was loaded over HTTPS, but requested an insecure script 'http://cdn.kendostatic.com/2015.3.1111/js/kendo.aspnetmvc.min.js'. This request has been blocked; the content must be served over HTTPS. 
angular2-polyfills.js:349 Error: Error: Invalid provider - only instances of Provider and Type are allowed, got: [object Object](…) 

сообщение Последняя ошибка показывает следующий стек след

angular2-polyfills.js:349 Error: Error: Invalid provider - only instances of Provider and Type are allowed, got: [object Object] 
     at InvalidProviderError.BaseException [as constructor] (https://npmcdn.com/@angular/core/bundles/core.umd.js:4383:27) 
     at new InvalidProviderError (https://npmcdn.com/@angular/core/bundles/core.umd.js:4645:20) 
     at eval (https://npmcdn.com/@angular/core/bundles/core.umd.js:5590:23) 
     at Array.forEach (native) 
     at _normalizeProviders (https://npmcdn.com/@angular/core/bundles/core.umd.js:5573:19) 
     at eval (https://npmcdn.com/@angular/core/bundles/core.umd.js:5584:17) 
     at Array.forEach (native) 
     at _normalizeProviders (https://npmcdn.com/@angular/core/bundles/core.umd.js:5573:19) 
     at eval (https://npmcdn.com/@angular/core/bundles/core.umd.js:5584:17) 
     at Array.forEach (native) 
    Error loading https://run.plnkr.co/6WhTDJtCImd7LHoc/src/main.ts 

Может ли кто-нибудь рассказать об этом немного, и дайте мне знать, в чем проблема/ошибка, сделанная мной?

Answer 1

Я нашел ответ. следующий код используется для создания кендогрида, завернутого в компонент углового2.

private setUpGridOptions() { 
     console.log("in setUpGridOptions of ExtractorQueueGrid"); 
     var dataSource = new kendo.data.DataSource({ 
      transport: { 
       read: this.configSetttings.DATACACHEAPI_EXTRACTORQUEUESERVICE_URL 
      }, 
      error: function (e) { 
       console.log("Status: " + e.status + "; Error message: " + e.errorThrown); 
      }, 
      pageSize: this.constants.KENDO_GRID_DEFAULT_PAGE_SIZE, 
      schema: { 
       model: { 
        name: "ExtractorQueueGrid", 
        fields: { 
         queueId: { }, 
         name: {}, 
         addedDate: { type: "Date" } 

        } 
       } 
      } 
     }); 
     this.options = { 
      dataSource: dataSource, 
      columns: [ 
       { field: "queueId", title: "QUEUEID", width: "8px" }, 
       { field: "name", title: "NAME", width: "20px" }, 
       { field: "addedDate", title: "ADDEDDATE", format: "{0:MM/dd/yyyy}", width: "10px" } 
      ], 
      pageable: true, 
      groupable: true, 
      sortable: true, 
      selectable: true 
      // click: "onChange", 
     } 
    }