title: build angular 9 universal with pixi.js 6.1.3
body: <p>I tried to use pixi.js and use angular universal to build the project, but it seems to be unsuccessful.</p>
  <p>error message:</p>
  <pre><code>'can only be default-imported using the 'allowSyntheticDefaultImports' flag
      
      3 import EventEmitter from 'eventemitter3';
               ~~~~~~~~~~~~
      
        node_modules/@pixi/utils/node_modules/eventemitter3/index.d.ts:64:1
          64 export = EventEmitter;
             ~~~~~~~~~~~~~~~~~~~~~~
          This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
  </code></pre>
  <p>No solution has been found so far. Is it possible to skip <code>pixi.js</code> during the universal building process?</p>
  <p><strong>component.ts</strong>:</p>
  <pre><code>import { Application } from 'pixi.js';
  
  @Component({
    selector: 'app-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.scss']
  })
  public app: Application;
  export class MainComponent implements OnInit {
    this.app = new Application({});
  }
  </code></pre>
  <p>Below is my package.json:</p>
  <pre><code>{
        &quot;private&quot;: true,
        &quot;dependencies&quot;: {
          &quot;@angular/animations&quot;: &quot;~9.1.0&quot;,
          &quot;@angular/cdk&quot;: &quot;^9.2.2&quot;,
          &quot;@angular/common&quot;: &quot;~9.1.0&quot;,
          &quot;@angular/compiler&quot;: &quot;~9.1.0&quot;,
          &quot;@angular/core&quot;: &quot;~9.1.0&quot;,
          &quot;@angular/forms&quot;: &quot;~9.1.0&quot;,
          &quot;@angular/material&quot;: &quot;^9.2.2&quot;,
          &quot;@angular/platform-browser&quot;: &quot;~9.1.0&quot;,
          &quot;@angular/platform-browser-dynamic&quot;: &quot;~9.1.0&quot;,
          &quot;@angular/platform-server&quot;: &quot;~9.1.0&quot;,
          &quot;@angular/router&quot;: &quot;~9.1.0&quot;,
          &quot;@nguniversal/express-engine&quot;: &quot;^9.1.0&quot;,
          &quot;@tinymce/tinymce-angular&quot;: &quot;^3.6.0&quot;,
          &quot;@types/pixi.js&quot;: &quot;^5.0.0&quot;,
          &quot;express&quot;: &quot;^4.15.2&quot;,
          &quot;file-saver&quot;: &quot;^2.0.2&quot;,
          &quot;moment&quot;: &quot;^2.24.0&quot;,
          &quot;ngx-cookie-service&quot;: &quot;^3.0.4&quot;,
          &quot;ngx-material-file-input&quot;: &quot;^2.1.1&quot;,
          &quot;pixi.js&quot;: &quot;^6.1.3&quot;,
          &quot;rxjs&quot;: &quot;~6.5.4&quot;,
          &quot;tslib&quot;: &quot;^1.10.0&quot;,
          &quot;zone.js&quot;: &quot;~0.10.2&quot;
        },
        &quot;devDependencies&quot;: {
          &quot;@angular-devkit/build-angular&quot;: &quot;~0.901.0&quot;,
          &quot;@angular/cli&quot;: &quot;~9.1.0&quot;,
          &quot;@angular/compiler-cli&quot;: &quot;~9.1.0&quot;,
          &quot;@angular/language-service&quot;: &quot;~9.1.0&quot;,
          &quot;@nguniversal/builders&quot;: &quot;^9.1.0&quot;,
          &quot;@types/express&quot;: &quot;^4.17.0&quot;,
          &quot;@types/file-saver&quot;: &quot;^2.0.1&quot;,
          &quot;@types/jasmine&quot;: &quot;~3.5.0&quot;,
          &quot;@types/jasminewd2&quot;: &quot;~2.0.3&quot;,
          &quot;@types/node&quot;: &quot;^12.11.1&quot;,
          &quot;codelyzer&quot;: &quot;^5.1.2&quot;,
          &quot;jasmine-core&quot;: &quot;~3.5.0&quot;,
          &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
          &quot;karma&quot;: &quot;~4.4.1&quot;,
          &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
          &quot;karma-coverage-istanbul-reporter&quot;: &quot;~2.1.0&quot;,
          &quot;karma-jasmine&quot;: &quot;~3.0.1&quot;,
          &quot;karma-jasmine-html-reporter&quot;: &quot;^1.4.2&quot;,
          &quot;protractor&quot;: &quot;~5.4.3&quot;,
          &quot;ts-node&quot;: &quot;~8.3.0&quot;,
          &quot;tslint&quot;: &quot;~6.1.0&quot;,
          &quot;typescript&quot;: &quot;~3.8.3&quot;
        }
      }
  </code></pre>
  <hr />
  <p><strong>UPDATE:</strong></p>
  <p>I tried <a href="https://stackoverflow.com/a/63367947/5706510">one</a> of the methods in this answer, changing <code>tsconfig.json</code>:</p>
  <pre><code>&quot;angularCompilerOptions&quot;: {
      &quot;fullTemplateTypeCheck&quot;: true,
      &quot;strictInjectionParameters&quot;: true,
      &quot;esModuleInterop&quot;: true, &lt;----------------------------add this
      &quot;allowSyntheticDefaultImports&quot;: true &lt;----------------------------and this
    },
  </code></pre>
  <p>But the error message still encountered when packaging to the <code>universal</code> stage.</p>
  <p>Error message:</p>
  <pre><code>ERROR in server.ts:14:18 - error TS2349: This expression is not callable.
    Type 'typeof e' has no call signatures.
  
  14   const server = express();
                      ~~~~~~~
  
    server.ts:4:1
      4 import * as express from 'express';
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.
  </code></pre>
  <p>I try to set only <code>&quot;allowSyntheticDefaultImports&quot;: true</code>, it may be packaged successfully, but there are a lot of errors in the log during operation:</p>
  <p>Node.js log error message:</p>
  <pre><code>.
  .
  eldset&quot;:case&quot;figcaption&quot;:case&quot;figure&quot;:case&quot;footer&quot;:case&quot;header&quot;:case&quot;hgroup&quot;:case&quot;listing&quot;:case&quot;main&quot;:case&quot;menu&quot;:case&quot;nav&quot;:case&quot;ol&quot;:case&quot;pre&quot;:case&quot;section&quot;:case&quot;summary&quot;:case&quot;ul&quot;:if(!stack.inScope(value))return;return stack.generateImpliedEndTags(),void stack.popTag(value);case&quot;form&quot;:if(stack.contains(&quot;template&quot;)){if(!stack.inScope(&quot;form&quot;))return;stack.generateImpliedEndTags(),stack.popTag(&quot;form&quot;)}else{var openform=form_element_pointer;if(form_element_pointer=null,!openform||!stack.el....
  .
  .
  
  ReferenceError: self is not defined
  .
  .
  .
  </code></pre>