Angular Components (CDK and Material) v12 documentation example exceptions

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.

1. 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/cdk@12.0.0-next.3' 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 https://github.com/stackblitz/core/issues/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

[alexzuza]

@Splaktar Yep, that fix was landed in 12.0.0-next.5. But it is for ngcc. I’m talking about ViewEngine which is default for Angular Material demos.

ViewEngine reflector can’t read metadata correctly from umd es5 bundle. It looks like this RegExp needs to be adjusted https://github.com/angular/angular/blob/a6971ba89adc253bfa4260036ee4a1e0bd76159f/packages/core/src/reflection/reflection_capabilities.ts#L44-L45

@JoostK can know more

[JoostK]

The problem with UMD bundles should be resolved in Angular FW 12.0.0-next.6.