feat: switch StackBlitz examples to Ivy

[Splaktar]

In https://github.com/stackblitz/core/issues/1405#issue-835481667, I tried a number of things to debug and one of them was enabling Ivy in StackBlitz. Unfortunately, that didn't work and even with the Angular 12.0.0-next.6 fixes for StackBlitz and that issue, our examples still don't run in Ivy on StackBlitz.

Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.7/@angular/cdk@12.0.0-next.5' from origin 
'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on 
the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch 
the resource with CORS disabled.

This seems related to this StackOverflow question "StackBlitz ngcc failed to run on my npm library with Ivy enabled".

[Splaktar]

StackBlitz preview pane:

Error in ~/src/main.ts
ngcc failed to run on tslib@2.2.0, @angular/core@12.0.0-next.8, @angular/material-moment-adapter@12.0.0-next.6, 
rxjs@6.6.7, @angular/cdk@12.0.0-next.6, @angular/animations@12.0.0-next.8, @angular/forms@12.0.0-next.8, 
@angular/material@12.0.0-next.6, zone.js@0.11.4, @angular/common@12.0.0-next.8, moment@2.29.1, 
@angular/platform-browser@12.0.0-next.8, tslib@1.14.1, parse5@5.1.1, angular-in-memory-web-api@0.11.0, 
@angular/platform-browser-dynamic@12.0.0-next.8, @angular/compiler@12.0.0-next.8, 
@angular/router@12.0.0-next.8.

DevTools Console:

Access to fetch at 'https://t.staticblitz.com/v9/@angular/compiler-cli@12.0.0-next.8' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
19Access to fetch at '<URL>' from origin '<URL>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/tslib@2.2.0' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/core@12.0.0-next.8' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/material-moment-adapter@12.0.0-next.6' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/rxjs@6.6.7' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/cdk@12.0.0-next.6' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/animations@12.0.0-next.8' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/forms@12.0.0-next.8' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/material@12.0.0-next.6' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/zone.js@0.11.4' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/common@12.0.0-next.8' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/moment@2.29.1' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/platform-browser@12.0.0-next.8' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/tslib@1.14.1' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/parse5@5.1.1' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/angular-in-memory-web-api@0.11.0' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/platform-browser-dynamic@12.0.0-next.8' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/compiler@12.0.0-next.8' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.8/@angular/router@12.0.0-next.8' from origin 'https://stackblitz.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[markwhitfeld]

@Splaktar If you try this again it will most likely succeed. I don't have a stackblitz example from you that I can use to reproduce your issue, but I made my own with the same dependencies and it works great: https://stackblitz.com/edit/angular-fndj5k?file=package.json

The stackblitz ngcc endpoint runs ngcc for each package the first time it is hit and then adds it to the cache so that it does not need to run ngcc the next time. Running ngcc for larger packages (like @angular/core) takes a really long time and the web request ends up timing out, returning this strange CORS issue from the AWS lambda. This will likely happen on the first call for a new angular version, but then will work after a little wait, once all the ngcc lambda calls have completed.

Please let me know if you are still having the issue.

[Splaktar]

I've deployed https://angularmaterial.dev/ with Ivy enabled for all of the StackBlitz examples. I got the following errors:

Error in ~/src/main.ts
ngcc failed to run on @angular/material@12.0.0-next.7.

I'm waiting a bit to see how long it takes for the ngcc builds to be available in the StackBlitz cache.

[Splaktar]

OK, it looks like it only took about 2-3 minutes, which isn't too bad.