search

dominique-mueller / angular-package-builder

[DEPRECATED] Packages your Angular 4+ library based on the Angular Package Format.
https://www.npmjs.com/package/angular-package-builder
MIT License
23 stars 2 forks source link

fix(compile): build error when not in debug mode #40

Closed davinkevin closed 6 years ago

davinkevin commented 6 years ago

Hi,

First of all, thanks for this awesome package builder which is very useful 😍

But, I think I've found a bug / regression in the lib. All the code I present here is extracted from a demo repo I've create for this issue (https://github.com/davinkevin/demo-angular-package-builder)

When I use dependencies coming from Angular (or maybe from something else, I haven't test...), the build doesn't work with the following result: 

iMac-de-Kevin:~/W/g/d/demo-angular-package-builder kevin $ yarn build
yarn run v1.3.2
$ angular-package-builder

Angular Package Builder

  ➜ Configuration
  ➜ Prepare (line breaks, resources)
  ➜ Compile TypeScript into JavaScript (ES2015, ES5)

ERROR: An error occured while trying to compile the TypeScript sources using the Angular Compiler.
       [TypeScript] : Error: ENOENT: no such file or directory, realpath '/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/@angular/core/core.d.ts'
       [TypeScript]  at ImportDeclaration in /Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/dist-angular-package-builder/lib/index.ts:1:1
       [TypeScript]  at SourceFile in /Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/dist-angular-package-builder/lib/index.ts:1:1
       [TypeScript]     at createError (/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/memfs/lib/volume.js:105:17)
       [TypeScript]     at throwError (/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/memfs/lib/volume.js:114:11)
       [TypeScript]     at Volume.realpathBase (/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/memfs/lib/volume.js:1098:13)
       [TypeScript]     at Volume.realpathSync (/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/memfs/lib/volume.js:1106:21)
       [TypeScript]     at Object.realpath (/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:3989:32)
       [TypeScript]     at Object.realpath (/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:69063:76)
       [TypeScript]     at realpath (/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:26373:42)
       [TypeScript]     at tryResolve (/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:26360:87)
       [TypeScript]     at nodeModuleNameResolverWorker (/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:26342:68)
       [TypeScript]     at nodeModuleNameResolver (/Users/kevin/Workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:26321:16)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

But, if I run the process in debug mode, without any modification, no error appears and the lib are correctly built.

iMac-de-Kevin:~/W/g/d/demo-angular-package-builder kevin $ yarn build --debug
yarn run v1.3.2
$ angular-package-builder --debug

Angular Package Builder

  ➜ Configuration
  ➜ Prepare (line breaks, resources)
  ➜ Compile TypeScript into JavaScript (ES2015, ES5)
  ➜ Generate JavaScript bundles (ES2015, ES5, UMD)
  ➜ Compose package

Success! [4.15 seconds]

✨  Done in 4.35s.

This is the full example where I run the command one after the other image

The index.ts of my app is very simple : 

import {InjectionToken} from "@angular/core";
export const foo = new InjectionToken('Foo');

And, of course, the error shown during the standard build process isn't coherent, because I have the file locally on my file system. image

If you need more information, let me know 😉

/cc @neonox31 @Yann29 @yakoust and @aymeric-duchein

dominique-mueller commented 6 years ago

First, thanks for making us aware of your issue, appreciate it very much :)

I actually have a few questions: Which versions of Angular and TypeScript are you using? What NodeJS version do you have? And finally, did it ever work properly or did the bug came in later on, e.g. after updating dependencies?

dominique-mueller commented 6 years ago

I also see that you're using Yarn and MacOS, whereas I always developed with npm on Windows. Yarn shouldn't be a problem, MacOS might be though ...

davinkevin commented 6 years ago

Thanks for your quick reply.

Which versions of Angular and TypeScript are you using?

Angular 5.2.0 typescript 2.4.2

What NodeJS version do you have?

Node 9.3.0

And finally, did it ever work properly or did the bug came in later on, e.g. after updating dependencies?

It happens on any fresh project I create. For example, the project linked in my original message have been created this morning.

For information : 

MacBook-Pro-de-Kevin:~/w/g/d/demo-angular-package-builder kevin | master $ ng -v

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.4
Node: 9.3.0
OS: darwin x64
Angular: 5.2.0
... common, compiler, compiler-cli, core, language-service

@angular/cli: 1.6.4
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.4.2
webpack: 3.10.0
MacBook-Pro-de-Kevin:~/w/g/d/demo-angular-package-builder kevin | master $ npm -v
5.5.1
MacBook-Pro-de-Kevin:~/w/g/d/demo-angular-package-builder kevin | master $ yarn -v
1.3.2

I've tested with NPM, and the result is the same : 

MacBook-Pro-de-Kevin:~/w/g/d/demo-angular-package-builder kevin | master $ npm run build

> demo-angular-package-builder@0.0.0 build /Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder
> angular-package-builder

Angular Package Builder

  ➜ Configuration
  ➜ Prepare (line breaks, resources)
  ➜ Compile TypeScript into JavaScript (ES2015, ES5)

ERROR: An error occured while trying to compile the TypeScript sources using the Angular Compiler.
       [TypeScript] : Error: ENOENT: no such file or directory, realpath '/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/@angular/core/core.d.ts'
       [TypeScript]  at ImportDeclaration in /Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/dist-angular-package-builder/lib/index.ts:1:1
       [TypeScript]  at SourceFile in /Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/dist-angular-package-builder/lib/index.ts:1:1
       [TypeScript]     at createError (/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/memfs/lib/volume.js:105:17)
       [TypeScript]     at throwError (/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/memfs/lib/volume.js:114:11)
       [TypeScript]     at Volume.realpathBase (/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/memfs/lib/volume.js:1098:13)
       [TypeScript]     at Volume.realpathSync (/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/memfs/lib/volume.js:1106:21)
       [TypeScript]     at Object.realpath (/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:3989:32)
       [TypeScript]     at Object.realpath (/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:69063:76)
       [TypeScript]     at realpath (/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:26373:42)
       [TypeScript]     at tryResolve (/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:26360:87)
       [TypeScript]     at nodeModuleNameResolverWorker (/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:26342:68)
       [TypeScript]     at nodeModuleNameResolver (/Users/kevin/workspace/github.com/davinkevin/demo-angular-package-builder/node_modules/typescript/lib/typescript.js:26321:16)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo-angular-package-builder@0.0.0 build: `angular-package-builder`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo-angular-package-builder@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kevin/.npm/_logs/2018-01-15T07_22_54_835Z-debug.log
MacBook-Pro-de-Kevin:~/w/g/d/demo-angular-package-builder kevin | master $

And, I don't right now have any Windows machine to test it... maybe @yakoust or @neonox31 can test it for me 😀

Yakoust commented 6 years ago

Hi,

I have the same issue on a Windows 7 machine:

 npm run build

> demo-angular-package-builder@0.0.0 build C:\dev\github\demo-angular-package-bu                                                                                                                                                                                               ilder
> angular-package-builder

Angular Package Builder

  → Configuration
  → Prepare (line breaks, resources)
  → Compile TypeScript into JavaScript (ES2015, ES5)

ERROR: An error occured while trying to compile the TypeScript sources using the                                                                                                                                                                                                Angular Compiler.
       [TypeScript] : Error: ENOENT: no such file or directory, realpath 'C:/dev                                                                                                                                                                                               /github/demo-angular-package-builder/node_modules/@angular/core/core.d.ts'
       [TypeScript]  at ImportDeclaration in C:/dev/github/demo-angular-package-                                                                                                                                                                                               builder/dist-angular-package-builder/lib/index.ts:1:1
       [TypeScript]  at SourceFile in C:/dev/github/demo-angular-package-builder                                                                                                                                                                                               /dist-angular-package-builder/lib/index.ts:1:1
       [TypeScript]     at createError (C:\dev\github\demo-angular-package-build                                                                                                                                                                                               er\node_modules\memfs\lib\volume.js:105:17)
       [TypeScript]     at throwError (C:\dev\github\demo-angular-package-builde                                                                                                                                                                                               r\node_modules\memfs\lib\volume.js:114:11)
       [TypeScript]     at Volume.realpathBase (C:\dev\github\demo-angular-packa                                                                                                                                                                                               ge-builder\node_modules\memfs\lib\volume.js:1098:13)
       [TypeScript]     at Volume.realpathSync (C:\dev\github\demo-angular-packa                                                                                                                                                                                               ge-builder\node_modules\memfs\lib\volume.js:1106:21)
       [TypeScript]     at Object.realpath (C:\dev\github\demo-angular-package-b                                                                                                                                                                                               uilder\node_modules\typescript\lib\typescript.js:3989:32)
       [TypeScript]     at Object.realpath (C:\dev\github\demo-angular-package-b                                                                                                                                                                                               uilder\node_modules\typescript\lib\typescript.js:69063:76)
       [TypeScript]     at realpath (C:\dev\github\demo-angular-package-builder\                                                                                                                                                                                               node_modules\typescript\lib\typescript.js:26373:42)
       [TypeScript]     at tryResolve (C:\dev\github\demo-angular-package-builde                                                                                                                                                                                               r\node_modules\typescript\lib\typescript.js:26360:87)
       [TypeScript]     at nodeModuleNameResolverWorker (C:\dev\github\demo-angu                                                                                                                                                                                               lar-package-builder\node_modules\typescript\lib\typescript.js:26342:68)
       [TypeScript]     at nodeModuleNameResolver (C:\dev\github\demo-angular-pa                                                                                                                                                                                               ckage-builder\node_modules\typescript\lib\typescript.js:26321:16)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo-angular-package-builder@0.0.0 build: `angular-package-builder`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo-angular-package-builder@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional log                                                                                                                                                                                               ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Admin_WebFactory\AppData\Roaming\npm-cache\_logs\2018-01-1                                                                                                                                                                                               5T07_30_59_890Z-debug.log
dominique-mueller commented 6 years ago

Thanks for the info!

So, it turns out that Angular 5.2 breaks but Angular 5.1 works as intended. Further analysis showed that it's probably an issue with tsickle - Angular 5.1 uses tsickle 0.25.6 and Angular 5.2 uses 0.26.0. Either downgrading to Angular 5.1 or setting annotateForClosureCompiler to false fix this issue, at least temporarily (or using debug mode, of course).

I will try to find a fix over the course of the next few days.

dominique-mueller commented 6 years ago

Changes: https://github.com/angular/tsickle/compare/7d20a06330e342eb72ccb729da7744171082e8ea...82992d1b5afac4948cc3b56344251d4ccbc0ded5

davinkevin commented 6 years ago

The fact that the --debug flag allows to do the compilation is still strange. Do you think the lib is well built after this or some errors are still present in the package ?

dominique-mueller commented 6 years ago

The --debug flag doesn't change the build chain itself, it only decides whether interim build outputs should be emitted to the disk (if enabled) - or kept in memory (if disabled). To make this work, however, I had to use some not-so-fancy techniques of which one seems to break with the latest 'tsickle' ...

So no worries, the angular-package-builder still does it's job, even with the debug flag enabled :)

dominique-mueller commented 6 years ago

Fixed with https://github.com/dominique-mueller/angular-package-builder/pull/41, will also make a documentation update regarding Angular & TypeScript compatibility - and hopefully publish a new release tomorrow.

Also, the CI now covers all Angular & TypeScript combinations. travisci

dominique-mueller commented 6 years ago

Here we go, version 1.0.1 is published! Have fun!

Changelog: https://github.com/dominique-mueller/angular-package-builder/blob/develop/CHANGELOG.md