angular-fullstack / generator-angular-fullstack

Yeoman generator for an Angular app with an Express server
https://awk34.gitbook.io/generator-angular-fullstack
6.12k stars 1.24k forks source link

Gulp serve works. Gulp serve:dist throws "o is not a constructor" and "Cannot set property 'onload' of null" #2459

Open atodicebear opened 7 years ago

atodicebear commented 7 years ago
Item Version
generator-angular-fullstack 3.7.5
Node 4.4.5
npm 3.9.6
Operating System Windows7
yo 1.8.4
Angular 1.5.8
TinyMce 4.5.2 Newest
ui-tinymce 0.0.18 Newest
Item Answer
Transpiler Babel
Markup HTML
CSS SCSS
Router ui-router
Build Tool Gulp
Client Tests Mocha
DB MsSQL
Auth Y
etc etc

If I work under Development everything works. Building the version with gulp serve:dist or gulp:build throws no Errors. Running the Application works on everything Except a Site where TinyMce is used. A Simple Configuration like this

.html    
<td>
 <textarea ui-tinymce='tinymceOptionsRead' ng-model='originalText' ></textarea>
</td>
.js 
   class HtmlvalueComponent {
        constructor($scope) {
          this.$scope.tinymceOptionsRead = {
            menubar: false,
            theme: 'modern',
            plugins: '',
            toolbar: false,
            readonly: true,
            statusbar: false,
            height: 170,
          };
        }

Works Perfectly in Development and in Production throws as I open the Site Uncaught TypeError: o is not a constructor and as soon I leave the page it throws TypeError: Cannot set property 'onload' of null. Removing the own Setup to a simple TinyMce like this

.html    
<td>
 <textarea ui-tinymce ng-model='originalText' ></textarea>
</td>

Throws same Error. The TinyMce and Ui-TinyMce files are included, never shows Errors cause of this.

So in the convert from Development to Production lies the Demon...

Ive somewhere Read that it could be because of using JSX and the Browsers cant comprehend that, but for that the Project uses Babel if im not mistaking?

Awk34 commented 7 years ago

Which versions of the tinymce libraries did you install from npm?

atodicebear commented 7 years ago

The Official of TinyMce Version 4.5.2 and Ui-TinyMce 0.0.18. Both are the newest. As said in Development mode the Editors work with every Feature as save,link, multiple Editors and so on. In Production it cant even Initialize a Simple one cause of the error.

Awk34 commented 7 years ago

This is probably a question for them, then..

atodicebear commented 7 years ago

Here is it how you can Reproduce it. Clean install yo angular-fullstack tiny did with this options

Item Answer
generator 3.7.6
Transpiler Babel
Markup HTML
CSS SCSS
Router ui-router
Build Tool Gulp
Client Tests Mocha
DB MsSQL
Auth Y

Then bower install tinymce-dist --save bower install angular-ui-tinymce#0.0.18 --save insert TinyMce in the

app.js
'ui.tinymce'

create in

main.html
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">Features:</h1>
      <form method="post">
        <textarea ui-tinymce ng-model="tinymceModel"></textarea>
      </form>
      <ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="thing in $ctrl.awesomeThings">
        <li><a href="#" uib-tooltip="{{thing.info}}">{{thing.name}}</a></li>
      </ul>
    </div>
  </div>
</div>

Start gulp serve opens window and a TinyMce Editor without Errors with all Functions Start gulp serve:dist opens window with the Error TypeError: a is not a constructor Changing the Site TypeError: Cannot set property 'onload' of null

Does gulp serve:dist somehow Destroy some Code or Change it in a anyway minor way?