Не удалось создать экземпляр ошибки модуля в Angular js в Spfx - PullRequest
Новая
       57

Не удалось создать экземпляр ошибки модуля в Angular js в Spfx

0 голосов
/ 31 января 2020

Я пытаюсь использовать текстовый редактор Summernote в AngularJS (Sharepoint Framework). Но я получаю сообщение об ошибке: 

Failed to instantiate module memoapp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.6.6/$injector/modulerr?p0=s...)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js:7:76
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js:43:70
    at p (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js:8:7)
    at g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js:42:138)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js:42:322
    at p (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js:8:7)
    at g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js:42:138)
    at hb (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js:46:250)
    at c (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js:22:19)
    at Object.Uc [as bootstrap] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js:22:332

Это мой код в app.module.ts : 

const crudapp: ng.IModule = angular.module("memoapp", [
 "summernote"
]);

crudapp
  .controller('HomeController', HomeController)
  .service('DataService', DataService);

и моя веб-часть : 

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneToggle
} from '@microsoft/sp-webpart-base';

import styles from './MemoWebPart.module.scss';
import * as strings from 'MemoWebPartStrings';

import * as angular from 'angular';
import './app/app-module';
import { SPComponentLoader } from '@microsoft/sp-loader';


export interface IAngularCrudWebPartProps {
  listName: string;
}

export default class AngularCrudWebPart extends BaseClientSideWebPart<IAngularCrudWebPartProps> {

  protected onInit(): Promise<void> {
    require('jquery');
    SPComponentLoader.loadCss('https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
    SPComponentLoader.loadScript('https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js');
    SPComponentLoader.loadCss('https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
    SPComponentLoader.loadCss('https://cdn.rawgit.com/summernote/summernote/v0.6.0/dist/summernote.css');
    SPComponentLoader.loadScript('https://cdn.jsdelivr.net/npm/summernote@0.8.15/dist/summernote.min.js');
   require('angular');
    SPComponentLoader.loadScript('https://labs.sideeffect.kr/2014/angular-summernote/v0.3.1/dist/angular-summernote.min.js');


    return super.onInit();
  }

  private $injector: angular.auto.IInjectorService;

  public render(): void {
    if (this.renderedOnce === false) {
      this.domElement.innerHTML = `
      <form ng-controller="HomeController as vm">
      <div class="form-group">
          <label for="memodate">Memo Date</label>
          <input type="date" class="form-control" id="memodate" ng-model="vm.currentMemo.memo_date">
      </div>

      <div class="form-group">
          <label for="branch">Branch</label>
          <input type="text" class="form-control" ng-model="vm.currentMemo.branch" readonly>
      </div>

      <div class="form-group">
          <label for="department">Department</label>
          <select class="form-control" id="department" ng-model="vm.currentMemo.department">
              <option ng-repeat="department in vm.departments" value="{{department}}">{{department}}</option>
          </select>
      </div>

      <div class="form-group">
          <label for="category">Category</label>
          <select class="form-control" id="category" ng-model="vm.currentMemo.category">
              <option ng-repeat="category in vm.categories" value={{category}}>{{category}}</option>
          </select>
      </div>

      <div class="form-group">
          <label for="subject">Subject</label>
          <textarea class="form-control" id="subject" ng-model="vm.currentMemo.subject"></textarea>
      </div>

     <summernote></summernote>

      <div class="form-group">
          <label for="memo">Memo</label>
          <textarea class="form-control" id="memo" ng-model="vm.currentMemo.memo"></textarea>
      </div>

      <div class="form-group">
          <label for="duedate">Due Date</label>
          <input type="date" class="form-control" id="duedate" ng-model="vm.currentMemo.duedate" />
      </div>

      <button type="submit" class="btn btn-primary" ng-click="vm.submitButtonClicked()">Submit</button>

  </form>
`;

      this.$injector = angular.bootstrap(this.domElement, ['memoapp']);
    }

    this.$injector.get('$rootScope').$broadcast('configurationChanged', {
      webUrl: this.context.pageContext.web.absoluteUrl,
      listName: this.properties.listName
    });
  }
}

Я новичок в Sharepoint и AngularJs. Как только я добавляю объявление "summernote" в app.module.ts , появляется ошибка. Как я могу решить эту проблему?

...