khashayar / ng-trim-value-accessor

Angular's (missing) trim accessor to automatically trim values of input fields
MIT License
53 stars 19 forks source link

Doesn't work with closure compiler #26

Open zolakt opened 5 years ago

zolakt commented 5 years ago

Not sure what the problem is exactly. I can't see anything in the code that would break the closure compiler, so I suspect it is something related with how the output lib files are generated. Maybe someone more proficient with the closure compiler can pitch in with the details.

Tried importing if both from esm2015 and fesm2015 packages.

When using esm2015, I've added this to closure.config:

--js node_modules/tslib/package.json
--js node_modules/tslib/tslib.js

--js node_modules/ng-trim-value-accessor/package.json
--js node_modules/ng-trim-value-accessor/esm2015/**.js

And this is the error I get:

CLOSURE ERROR ./out-tsc/src/app/app.module.ngfactory.js 31:

 ERROR - Failed to load module "ng-trim-value-accessor"
 import * as i30 from "ng-trim-value-accessor";
 ^

 ./out-tsc/src/app/shared/shared.module.js:22: 
 Originally at:
 tmp/app/shared/shared.module.ts:22: ERROR - Failed to load module "ng-trim-value-accessor"
 import {TrimValueAccessorModule} from "ng-trim-value-accessor";
 ^

When using fesm2015, I've added this to closure.config:

--js node_modules/tslib/package.json
--js node_modules/tslib/tslib.js

--js node_modules/ng-trim-value-accessor/package.json
--js node_modules/ng-trim-value-accessor/fesm2015/**.js

And this is the error I get:

CLOSURE ERROR ./node_modules/ng-trim-value-accessor/fesm2015/ng-trim-value-accessor.js 1:

 ERROR - Failed to load module "tslib"
 import { __decorate, __metadata } from 'tslib';
 ^

The only way I can get it not to break is with the fesm2015 version, and I change the tslib config to this:

--js node_modules/tslib/tslib.es6.js

And change the the package_json_entry_names from:

--package_json_entry_names es2015

to:

--package_json_entry_names es2015,jsnext:main

In that case it doesn't break, but produces a empty (0B) bundle.js file

zolakt commented 4 years ago

Revisited this after a while and found the problem. It's due to how tslib is imported, which doesn't work with the Closure compiler.

The lib needs to use tsickle when it builds (so it could just be a dev dependency) and add this to tsconfig.json, in order to be compatible:

"angularCompilerOptions": {
    ...
    "annotateForClosureCompiler": true
  }

For example (at least in newer versions) when you create a library project with angular cli, it will add tsickle dependency automatically.

All the source code if fine, it's just a build process issue. Adding those 2 lines (package.json and tsconfig.json) should make it compatible.

khashayar commented 4 years ago

Thanks for the comment. Would you mind creating a PR for it?