Angular 15. Doesn't compile. Cannot find module '@angular/flex-layout' or its corresponding type declarations.

[heitorb]

Bug Report or Feature Request (mark with an x)

- [ X] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

Mac OSX Ventura

Versions

Angular CLI: 15.0.0
Node: 14.20.1
Package Manager: npm 6.14.17
OS: darwin x64

Angular: 15.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1500.0
@angular-devkit/build-angular 15.0.0
@angular-devkit/core 15.0.0
@angular-devkit/schematics 15.0.0
@angular/cdk 15.0.1
@angular/material 15.0.1
@schematics/angular 15.0.0
rxjs 7.5.7
typescript 4.8.4

Repro steps

• Installed all dependencies per instructions
• Add code to app.module.ts
• Doesn't Compile (see log below)

The log given by the failure

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot resolve type entity i7.FlexLayoutModule to symbol

Error: node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts:51:41 - error TS2314: Generic type 'MapHandlerMap' requires 1 type argument(s).

51 subscribeToMapEvent(eventName: N): Observable<google.maps.MapHandlerMap[N]>;
~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts:51:94 - error TS2314: Generic type 'MapHandlerMap' requires 1 type argument(s).

51 subscribeToMapEvent(eventName: N): Observable<google.maps.MapHandlerMap[N]>;
~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@agm/core/lib/services/managers/marker-manager.d.ts:26:93 - error TS2694: Namespace 'google.maps' has no exported member 'MarkerMouseEventNames'.

26 createEventObservable<T extends (google.maps.MouseEvent | void)>(eventName: google.maps.MarkerMouseEventNames | google.maps.MarkerChangeOptionEventNames, marker: AgmMarker): Observable;
~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@agm/core/lib/services/managers/marker-manager.d.ts:26:129 - error TS2694: Namespace 'google.maps' has no exported member 'MarkerChangeOptionEventNames'.

26 createEventObservable<T extends (google.maps.MouseEvent | void)>(eventName: google.maps.MarkerMouseEventNames | google.maps.MarkerChangeOptionEventNames, marker: AgmMarker): Observable;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@angular-material-extensions/google-maps-autocomplete/lib/mat-google-maps-autocomplete.module.d.ts:8:21 - error TS2307: Cannot find module '@angular/flex-layout' or its corresponding type declarations.

8 import * as i7 from "@angular/flex-layout";

Desired functionality

Compiles!

Mention any other details that might be useful

• this was added to a working Angular 15 app

• I google @angular/flex-layout and it appears to be a deprecated library, so not sure why it would be looking for it

• I first installed it with "ng add @angular-material-extensions/google-maps-autocomplete", and the installation was successful, but I also got the message below

"Package subpath './schematics/ng-add/package-config' is not defined by "exports" in /Users/heitorbembom/Documents/mSlick/kreiss/kreiss-15/node_modules/@angular/cdk/package.json

After that I installed using the npm statement instead and it appeared to have installed with no issues (still doesn't compile after adding the code to app.module.ts. Same error log as above.)

[AnthonyNahas]

Did you installed angular flex layout?

Try to add it manually please with npm i @angular/flex-layout

[heitorb]

Just did.. It is not mentioned as a dependency on the Read Me and it is deprecated. Now gettingn different errors:

Error: node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts:51:41 - error TS2314: Generic type 'MapHandlerMap' requires 1 type argument(s).

51 subscribeToMapEvent(eventName: N): Observable<google.maps.MapHandlerMap[N]>;

Error: node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts:51:94 - error TS2314: Generic type 'MapHandlerMap' requires 1 type argument(s).

51 subscribeToMapEvent(eventName: N): Observable<google.maps.MapHandlerMap[N]>;

Error: node_modules/@agm/core/lib/services/managers/marker-manager.d.ts:26:93 - error TS2694: Namespace 'google.maps' has no exported member 'MarkerMouseEventNames'.

26 createEventObservable<T extends (google.maps.MouseEvent | void)>(eventName: google.maps.MarkerMouseEventNames | google.maps.MarkerChangeOptionEventNames, marker: AgmMarker): Observable;

Error: node_modules/@agm/core/lib/services/managers/marker-manager.d.ts:26:129 - error TS2694: Namespace 'google.maps' has no exported member 'MarkerChangeOptionEventNames'.

26 createEventObservable<T extends (google.maps.MouseEvent | void)>(eventName: google.maps.MarkerMouseEventNames | google.maps.MarkerChangeOptionEventNames, marker: AgmMarker): Observable;

[szarkowicz]

Getting the error as well with latest version of Angular 15 installed - it seems like it trying to install Angular Flex Layout version 15 or higher but Angular Flex layout stops at 14.x.x

[AnthonyNahas]

I will patch the library--> flex layout peer deps should be v14

[AnthonyNahas]

v9.0.3 is now live!

Can you please test the latest version and consider please re opening this ticket if you are still facing the same issue

thank you