I tried to use pixi.js and use angular universal to build the project, but it seems to be unsuccessful.
error message:
'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.
No solution has been found so far. Is it possible to skip pixi.js during the universal building process?
component.ts:
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({});
}
Below is my package.json:
{
"private": true,
"dependencies": {
"@angular/animations": "~9.1.0",
"@angular/cdk": "^9.2.2",
"@angular/common": "~9.1.0",
"@angular/compiler": "~9.1.0",
"@angular/core": "~9.1.0",
"@angular/forms": "~9.1.0",
"@angular/material": "^9.2.2",
"@angular/platform-browser": "~9.1.0",
"@angular/platform-browser-dynamic": "~9.1.0",
"@angular/platform-server": "~9.1.0",
"@angular/router": "~9.1.0",
"@nguniversal/express-engine": "^9.1.0",
"@tinymce/tinymce-angular": "^3.6.0",
"@types/pixi.js": "^5.0.0",
"express": "^4.15.2",
"file-saver": "^2.0.2",
"moment": "^2.24.0",
"ngx-cookie-service": "^3.0.4",
"ngx-material-file-input": "^2.1.1",
"pixi.js": "^6.1.3",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.0",
"@angular/cli": "~9.1.0",
"@angular/compiler-cli": "~9.1.0",
"@angular/language-service": "~9.1.0",
"@nguniversal/builders": "^9.1.0",
"@types/express": "^4.17.0",
"@types/file-saver": "^2.0.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}
UPDATE:
I tried one of the methods in this answer, changing tsconfig.json:
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"esModuleInterop": true, <----------------------------add this
"allowSyntheticDefaultImports": true <----------------------------and this
},
But the error message still encountered when packaging to the universal stage.
Error message:
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.
I try to set only "allowSyntheticDefaultImports": true, it may be packaged successfully, but there are a lot of errors in the log during operation:
Node.js log error message:
.
.
eldset":case"figcaption":case"figure":case"footer":case"header":case"hgroup":case"listing":case"main":case"menu":case"nav":case"ol":case"pre":case"section":case"summary":case"ul":if(!stack.inScope(value))return;return stack.generateImpliedEndTags(),void stack.popTag(value);case"form":if(stack.contains("template")){if(!stack.inScope("form"))return;stack.generateImpliedEndTags(),stack.popTag("form")}else{var openform=form_element_pointer;if(form_element_pointer=null,!openform||!stack.el....
.
.
ReferenceError: self is not defined
.
.
.
