'tinymce'は未定義です - Angular2のtinyMceエディタ

Question

機能的なAngular2プロジェクトでtinyMceエディタを実装しようとしています。ここには、私が追加/更新したファイルのセット（サブ）があります。コンパイラは文句を言いませんが、実行時には "'tinymce'が定義されていません"というエラーを出します。私は今、しばらくの間苦労しています - あらゆる角度のcliを見て、それを理解できません...どんな助けもありがたいです。

home.component.html：

<h1>Welcome to {{pageTitle}}!</h1> 

<form *ngIf="displayUploadSection"> 
    <cra-upload></cra-upload> 
    <simple-tiny [elementId]="'my-editor-id'" 
       (onEditorKeyup)="keyupHandlerFunction($event)"> 
    </simple-tiny> 
</form> 

tinyEditor.component.ts：

import { Component, OnDestroy, AfterViewInit, 
    EventEmitter, Input, Output } from '@angular/core'; 

    @Component({ 
    selector: 'simple-tiny', 
    template: `<textarea id="{{elementId}}"></textarea>` 
}) 

export class SimpleTinyComponent implements AfterViewInit, OnDestroy { 
    @Input() elementId: string; 
    @Output() onEditorKeyup = new EventEmitter<any>(); 

    editor; 

    ngAfterViewInit() { 
     tinymce.init({ 
      selector: '#' + this.elementId, 
      plugins: ['link', 'paste', 'table'], 
      skin_url: 'assets/skins/lightgray', 
      setup: editor => { 
       this.editor = editor; 
       editor.on('keyup',() => { 
        const content = editor.getContent(); 
        this.onEditorKeyup.emit(content); 
       }); 
      }, 
     }); 
    } 

    ngOnDestroy() { 
     tinymce.remove(this.editor); 
    } 
} 

typings.d.ts：

declare var tinymce: any; 

package.json：

{ 
    "apps": [ 
    { 
     "scripts": [ 
     "~/node_modules/tinymce/tinymce.js", 
     "~/node_modules/tinymce/themes/modern/theme.js", 
     "~/node_modules/tinymce/plugins/link/plugin.js", 
     "~/node_modules/tinymce/plugins/paste/plugin.js", 
     "~/node_modules/tinymce/plugins/table/plugin.js" 
     ] 
    } 
    ], 
    "name": "compensation-report", 
    "version": "1.0.0", 
    "description": "Compensation Report app for xxxxxx Finance", 
    "main": "app/main", 
    "scripts": { 
    "watch": "tsc -w", 
    "clean": "del-cli ./app/**/*js ./app/**/*map", 
    "build": "npm run clean && tsc", 
    "build_prod": "npm run build && webpack --config ./webpack.config.js" 
    }, 
    "author": "xxx zzz", 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.2.3", 
    "@angular/compiler": "2.2.3", 
    "@angular/core": "2.2.3", 
    "@angular/forms": "2.2.3", 
    "@angular/http": "2.2.3", 
    "@angular/platform-browser": "2.2.3", 
    "@angular/platform-browser-dynamic": "2.2.3", 
    "@angular/router": "3.2.3", 
    "@angular/upgrade": "2.2.3", 
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.14", 
    "bootstrap": "4.0.0-alpha.5", 
    "core-js": "2.4.1", 
    "file-loader": "^0.9.0", 
    "font-awesome": "^4.7.0", 
    "rxjs": "5.0.0-beta.12", 
    "tinymce": "^4.5.2", 
    "url-loader": "^0.5.7", 
    "zone.js": "0.6.26" 
    }, 
    "devDependencies": { 
    "@types/core-js": "^0.9.34", 
    "@types/jasmine": "^2.5.38", 
    "@types/node": "0.0.1", 
    "babel-core": "^6.7.4", 
    "babel-loader": "^6.2.8", 
    "babel-preset-latest": "^6.16.0", 
    "css-loader": "^0.26.1", 
    "del-cli": "^0.2.0", 
    "extract-text-webpack-plugin": "^2.0.0-beta.4", 
    "node-sass": "^4.1.0", 
    "path": "^0.12.7", 
    "reflect-metadata": "0.1.8", 
    "replace-webpack-plugin": "^0.1.2", 
    "sass-loader": "^4.1.0", 
    "style-loader": "^0.13.1", 
    "systemjs": "^0.19.41", 
    "systemjs-plugin-css": "^0.1.32", 
    "typescript": "2.1.4", 
    "webpack": "^2.1.0-beta.27" 
    }, 
    "peerDependencies": { }, 
    "repository": { }, 
    "-vs-binding": { 
    "ProjectOpened": [ 
     "watch" 
    ] 
    } 
} 

01ここで

Answer 1

はアドバイスのいくつかのヒント/作品です：

• あなたのpackage.jsonファイルが不明である、アプリの配列は、すべての要素のルートとOUTDIR属性を持つ必要があります。コンパイルすることで依存関係の問題を分けてみてください。依存関係をpackage.json内に保ち、別のものをコンパイルすることはangular-cli.jsonと呼ばれます。また、後者の内部アプリのルート属性を持った後、直接tinymce.init({...})を使用するコンポーネントのファイル（コンポーネントの上部にdeclare var tinymce: any;を試してみて、何が起こるか見て「もう一度」

• をコンパイルしてみてください

これは単なるヒントなのですが、間違っている可能性があります。