Hello StackBlitz team!

We're trying to debug some issues with the Angular Material examples in StackBlitz. We had some similar problems on our own docs site and we solved them today by updating TypeScript to 4.2.3 since Angular v12 now requires TypeScript 4.2.x (and no longer supports TypeScript 4.0.x or 4.1.x).

In researching this, I found that

• https://stackblitz.com/fork/angular-ivy uses TypeScript ~4.0.2, which makes sense for Angular v10 (but not for v11 which needs TypeScript ~4.1.x)
• I found https://github.com/stackblitz/angular-cli-template, but it seems to have been abandoned at Angular v5

What we're having trouble with

1. https://next.material.angular.io/components/autocomplete/examples

preview-c9f765cddfc622204e06b.js:1 ERROR TypeError: Cannot read property 'autoActiveFirstOption' of undefined
    at MatAutocomplete._MatAutocompleteBase [as constructor] (autocomplete.ts:215)
    at new MatAutocomplete (autocomplete.ts:280)
    at createClass (provider.ts:273)
    at createDirectiveInstance (provider.ts:142)
    at createViewNodes (view.ts:314)
    at callViewAction (view.ts:649)
    at execComponentViewsAction (view.ts:572)
    at createViewNodes (view.ts:344)
    at createRootView (view.ts:216)
    at callWithDebugContext (services.ts:641)

What this leads to is basically that DI is not working as expected:

@Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS) defaults: MatAutocompleteDefaultOptions,

defaults ends up as undefined since the above injection doesn't work.

2. https://next.material.angular.io/components/select/examples

@Inject(MAT_SELECT_SCROLL_STRATEGY) scrollStrategyFactory: any,

this._scrollStrategyFactory ends up as undefined since the above injection doesn't work.

What we've tried

1. "enableIvy": true, in our template's tsconfig.json. This resulted in a TypeScript exception and a ton of CORS errors. I'm not sure if this is related to this SO question about ngcc in StackBlitz, but we don't get "ngcc failed to run". Just this:

   Uncaught (in promise) TypeError: Cannot read property 'native' of undefined
   at getNodeSystem (typescript.js:7202)
   at eval (typescript.js:7753)
   at eval (typescript.js:7760)
   at Object.eval (typescript.js:7770)
   at eval (typescript.js:153198)
   at eval (typescript.js:153199)
   at eval (<anonymous>)
   at Qt (webcontainer.3a09fea6d6af8fa50aecb2140d2b6d2039950e89.js:15)
   at webcontainer.3a09fea6d6af8fa50aecb2140d2b6d2039950e89.js:15
   at U (webcontainer.3a09fea6d6af8fa50aecb2140d2b6d2039950e89.js:15)
   Access to fetch at 'https://l.staticblitz.com/ngcc/v3/12.0.0-next.5/@angular/[email protected]' 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.

2. Update "typescript": "~4.2.3" in our template's devDependencies, this has no effect. This and the next bullet point seem related to Custom typescript version #483.

3. Update "typescript": "~4.2.3" in our template's dependencies, this has no effect.

4. These same examples work on https://material.angular.io and in our dev-app in the angular/components repo. There are only exceptions on StackBlitz.

What's next

Please let us know if

• we are doing something wrong or you would like us to try something to gather more info
• this is a known issue that is being worked on
• you are fairly confident that this isn't a StackBlitz issue