Scully: Angular10 / tslib 2.0.0 support

[d-koppenhagen]

🧩 Feature request

Description

Since Angular 10 is out now, sully should support Angular10 in the future.
Checking the current state, scully seems currently incompatible with tslib 2.0.0 which comes with Angular CLI 10 setup.

Executing npm run scully give the following output:

> [email protected] scully /Users/dannykoppenhagen/dev/d-koppenhagen/d-koppenhagen-website
> scully "--scanRoutes"

/Users/dannykoppenhagen/dev/d-koppenhagen/d-koppenhagen-website/node_modules/tslib/tslib.js:237
        Object.defineProperty(o, "default", { enumerable: true, value: v });
               ^

TypeError: Cannot redefine property: default
    at Function.defineProperty (<anonymous>)
    at /Users/dannykoppenhagen/dev/d-koppenhagen/d-koppenhagen-website/node_modules/tslib/tslib.js:237:16
    at Object.__importStar (/Users/dannykoppenhagen/dev/d-koppenhagen/d-koppenhagen-website/node_modules/tslib/tslib.js:246:9)
    at Object.<anonymous> (/Users/dannykoppenhagen/dev/d-koppenhagen/d-koppenhagen-website/node_modules/@scullyio/scully/lib/utils/cli-options.js:5:23)
    at Module._compile (internal/modules/cjs/loader.js:1147:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Module.require (internal/modules/cjs/loader.js:1036:19)
    at require (internal/modules/cjs/helpers.js:72:18)

You can check out the source code here

Seems to be related to https://github.com/scullyio/scully/issues/543

Describe the solution you'd like

Support tslib 2.0.0

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?

[aaronfrost]

Let's get this addressed tomorrow, please. The v10 stuff needs to be top priority.

[salazarr-js]

Just for testing purpose, I just tried with a new project

npm install -g @angular/cli
ng new testProject
ng add @scullyio/init
ng build
npm run scully

and got the same result

> [email protected] scully /Users/josesalazar/Dev/Synapse Ads/go-famed/gofamed-landing
> scully

/Users/josesalazar/Dev/Synapse Ads/go-famed/gofamed-landing/node_modules/tslib/tslib.js:237
        Object.defineProperty(o, "default", { enumerable: true, value: v });
               ^

TypeError: Cannot redefine property: default
    at Function.defineProperty (<anonymous>)
    at /Users/josesalazar/Dev/Synapse Ads/go-famed/gofamed-landing/node_modules/tslib/tslib.js:237:16
    at Object.__importStar (/Users/josesalazar/Dev/Synapse Ads/go-famed/gofamed-landing/node_modules/tslib/tslib.js:246:9)
    at Object.<anonymous> (/Users/josesalazar/Dev/Synapse Ads/go-famed/gofamed-landing/node_modules/@scullyio/scully/lib/utils/cli-options.js:5:23)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)

Angular CLI: 10.0.0
Node: 12.16.1
OS: darwin x64

Angular: 10.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.0
@angular-devkit/build-angular     0.1000.0
@angular-devkit/build-optimizer   0.1000.0
@angular-devkit/build-webpack     0.1000.0
@angular-devkit/core              10.0.0
@angular-devkit/schematics        10.0.0
@ngtools/webpack                  10.0.0
@schematics/angular               10.0.0
@schematics/update                0.1000.0
rxjs                              6.5.5
typescript                        3.9.5
webpack                           4.43.0

[SanderElias]

The problem is tsLib. It now must by a direct dependency. However, when I do that, the V10 CLI runs into problems.
I'm working with the Angular CLI team to get this issue resolved, but for the mean time, there doesn't seem to be a solution.
I can't move our mono-repo to V10 before NX supports V10, and that might still not be the solution.

Please note, this is actually the result of a breaking change in Typescript between V3.8 and 3.9, and I'm unaware of a proper solution just yet.

[tieppt]

For now, a work around solution is install tslib directly from github:

"tslib": "[email protected]:microsoft/tslib.git"

or

"tslib": "https://github.com/microsoft/tslib.git"

[matthiasbaldi]

@tieppt ya workaround works. ty for that. 👍
at least my build is running again 😉

[hubbertj]

@tieppt thanks workaround worked for me too!

[SanderElias]

@tieppt I wonder how this can possible solve the issue unless their development version actually fixes the breaking change. I hope that will be the case because that would solve quite some problems with TS.
In the meantime, I have added tsLib 1.13 as a direct dependency on all Angular packages. This is part of pr #658, and will probably land today. This should help, but is probably not the final fix. I will push out new versions once this PR is merged.

[tieppt]

@SanderElias Dear Sir, after dig into the tslib repo, I saw a commit that fixed default issue https://github.com/microsoft/tslib/commit/23642901c0cfc63dff8da27c4c8c71acd265445a

Anw, I think we can fix the issue without downgrade tslib version by change from import * to named import.

[tieppt]

After upgraded to @scullyio/[email protected], @scullyio/[email protected] I got Circular dependency error for Router.

Please clone this branch and start the Angular app.
https://github.com/tieppt/tiepphan/tree/circular

[puku0x]

I faced NullInjectorError after I upgraded @scullyio/[email protected].
Angular v10 with patched tslib and @scullyio/[email protected] worked, though.

[kunjee17]

I faced NullInjectorError after I upgraded @scullyio/[email protected].
Angular v10 with patched tslib and @scullyio/[email protected] worked, though.

Thanks. This solution worked for me.

[SanderElias]

@tieppt As we didn't use any import * that was an easy fix ;)
However, we where exporting things with export *. I moved to explicit exports and updated the package.json to allow any angular version. (for now, we will restrict this later on). This is part of pr #695.
I went ahead and published ng-lib .26.
Perhaps you can give this a try?

[tieppt]

@SanderElias I'll try it asap

[puku0x]

The NullInjectorError seems to be solved on @scullyio/[email protected]. Thank you @SanderElias .

[tieppt]

The NullInjectorError seems to be solved on @scullyio/[email protected]. Thank you @SanderElias .

I can confirm that.

[SanderElias]

Closing as the problem is solved with #695