I need to share some common interfaces between my NodeJS back-end and Angular front-end. So I created a new Angular project that contains only a library.
Here is an example of an interface:
export interface EvPageRef {
page_id: string;
src_page: string;
}
If I compile the above with TypeScript 3.x it outputs nothing. There is no JavaScript output which is what I would expect, but if I add the above to an Angular library then I get the following.
/**
* @record
*/
function EvPageRef() { }
if (false) {
/** @type {?} */
EvPageRef.prototype.page_id;
/** @type {?} */
EvPageRef.prototype.src_page;
}
That is generated for the umd, esm5 and ems2015 source code folders in the dist/example project output.
Along side the above are the TypeScript type definition files which contain the interface declarations as expected which are in the dist/example/lib folder.
So I have two questions about this:
The output of the JavaScript with interfaces as functions is created by tsickle which is a compiling middleware for Angular templates that generates code friendly to Google Closure.
https://angular.io/guide/angular-compiler-options#annotateforclosurecompiler
Why this is part of the Angular build process is unclear from the documentation. It also states that this option is false by default.
I updated my tsconfig.lib.json to disable the option, and now my JavaScript files are empty as expected.
tsconfig.lib.json:
"angularCompilerOptions": {
"annotateForClosureCompiler": false,
},
This project doesn't contain any components so I'm comfortable turning this feature off, but I'm confused as to why the Angular Library generator enables this to begin with. The documentation doesn't explain what problem or benefit there is for this.
I'll still accept an answer which can answer why this was turned on.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With