Flex-layout: No provider for StyleUtils!

[DutchKevv]

Hi there! Sorry for the simple bug report, but its Sunday ;)

Bug Report

What is the expected behavior?

No errors

What is the current behavior?

Runtime gives error: No provider for StyleUtils!
Compilation goes fine

error-handler.provider.ts:10 NullInjectorError: StaticInjectorError(AppModule)[DefaultFlexDirective -> StyleUtils]: StaticInjectorError(Platform: core)[DefaultFlexDirective -> StyleUtils]: NullInjectorError: No provider for StyleUtils! at NullInjector.get (http://localhost:4200/vendor.js:40304:27) at resolveToken (http://localhost:4200/vendor.js:54785:24) at tryResolveToken (http://localhost:4200/vendor.js:54711:16) at StaticInjector.get (http://localhost:4200/vendor.js:54552:20) at resolveToken (http://localhost:4200/vendor.js:54785:24) at tryResolveToken (http://localhost:4200/vendor.js:54711:16) at StaticInjector.get (http://localhost:4200/vendor.js:54552:20) at resolveNgModuleDep (http://localhost:4200/vendor.js:66988:29) at NgModuleRef_.get (http://localhost:4200/vendor.js:67848:16) at resolveDep (http://localhost:4200/vendor.js:68373:45)

It keeps happening since upgrading to Angular 9 RC 11 and up, and I can find zero about it on google.

[tran4o]

got the same error after upgrading..
temporary solution is to create a module wrapper :

import {NgModule} from '@angular/core';
import {FlexLayoutModule} from "@angular/flex-layout";

import {StyleUtils,StylesheetMap,MediaMarshaller,ɵMatchMedia,BreakPointRegistry,PrintHook,LayoutStyleBuilder,FlexStyleBuilder,ShowHideStyleBuilder,FlexOrderStyleBuilder} from "@angular/flex-layout";

@NgModule({
exports: [
FlexLayoutModule
],
providers: [
StyleUtils,StylesheetMap,MediaMarshaller,ɵMatchMedia,BreakPointRegistry,PrintHook,LayoutStyleBuilder,FlexStyleBuilder,ShowHideStyleBuilder,FlexOrderStyleBuilder
]
})
export class FlexModule {}

[CaerusKaru]

I'm unable to reproduce this on our demo app, both in regular serve and in prod serve modes. Can you provide a minimal reproduction?

[CaerusKaru]

@tran4o What you are doing is a severe antipattern. Those providers are tree-shakable providers, and do not need to be provided in any module. If you're facing this error, it's likely a different issue.

[CaerusKaru]

Any comments that amount to “same for us” that do not provide a minimal reproduction will be deleted. If you want to acknowledge this impacts you, please add a +1 emoji to the root comment.

[dimitri-bret]

@DutchKevv Do you have {"enableIvy": false}
in the angularCompilerOptions in your tsconfig.json file?
I had the same error, and removing this flag (which is true by default in Angular 9) solved the issue for me.

[DutchKevv]

@dimitri-bret you are correct!
I did have the flag set, removing it fixes it. I do get troubles with my router for some reason with Ivy, but thats a different thing.

Thanks!

[hags033]

Our app didn't fail the build or serve, but our spec files (Jest) fail with the same error that have FlexLayoutModule imported and used. Providing the array of providers like tran4o did got rid of the injection errors, but not the direction to go.

Still fails with enableIvy flag removed. We have a very large app so would be hard to pinpoint how to make a reproduction. We also have custom breakpoints.

[kaseymccormick]

As this issue was closed by using a work around that's a severe anti pattern the answer doesn't seem to exist yet. Not sure if I should open a new issue (unlikely) so adding my experience and stackblitz demo to this one.

What is the expected behavior?

1) install flex layout (done by entering @angular/flex-layout ind dependencies)
2) import flex layout in app.module.ts
3) use flex layout in html of app.component.html

What is the current behavior?

page to user doesn't load
console gets the following error
Error: StaticInjectorError(AppModule)[DefaultLayoutAlignDirective -> StyleUtils]: StaticInjectorError(Platform: core)[DefaultLayoutAlignDirective -> StyleUtils]: NullInjectorError: No provider for StyleUtils

What are the steps to reproduce?

visit this stackblitz and view or inspect the console

[CaerusKaru]

@kaseymccormick Your demo uses v8 of Angular with v9 of Flex Layout. Bumping all deps to latest fixes it.

[AdibW]

Hi, i got the same problem, can someone help me!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}