NullInjectorError: No provider for InjectionToken DocumentToken! when using BrowserAnimationsModule in an Angular MFE workspace

Current Behavior

When importing either BrowserAnimationsModule or NoopAnimationsModule, the app fails with the error: NullInjectorError: R3InjectorError(AppModule)[RendererFactory2 -> AnimationEngine -> InjectionToken DocumentToken -> InjectionToken DocumentToken -> InjectionToken DocumentToken]: NullInjectorError: No provider for InjectionToken DocumentToken!

Expected Behavior

Expect the workspace to share dependancies between apps and libraries. Expect to able to use Angular Animations without breaking the app.

Is this a regression? .i.e Did this used to be the behavior at one point?

Yes. Before the update to the webpack config file in 13.10.2, we could share internal dependancies with the sharedMappings plugin, and external dependancies with mf.share(). That seems to no longer be the case (or I just don’t know how to).

Steps to Reproduce

• Create an empty nx workspace (npx create-nx-workspace, choose the apps option for an empty workspace)
• Add the @nrwl/angular plugin (npm install --save-dev @nrwl/angular)
• Create a shell app (npx nx g @nrwl/angular:host container)
• Create a child app (npx nx g @nrwl/angular:remote childApp --host=container)
• Install @angular/animations (npm install --save @angular/animations)
• Import BrowserAnimationsModule or NoopAnimationsModule in the AppModule of the Shell app
• Run the apps (nx run container:serve-mfe)

Github repo reproducing the issue: https://github.com/Mike-Mountain/nx-issue

Failure Logs

NullInjectorError: R3InjectorError(AppModule)[RendererFactory2 -> AnimationEngine -> InjectionToken DocumentToken -> InjectionToken DocumentToken -> InjectionToken DocumentToken]: NullInjectorError: No provider for InjectionToken DocumentToken!

Environment

Node : 16.13.2
OS   : darwin x64
npm  : 8.1.2
nx : 13.10.2
@nrwl/angular : 13.10.2
@nrwl/cypress : 13.10.2
@nrwl/detox : Not Found
@nrwl/devkit : 13.10.2
@nrwl/eslint-plugin-nx : 13.10.2
@nrwl/express : Not Found
@nrwl/jest : 13.10.2
@nrwl/js : Not Found
@nrwl/linter : 13.10.2
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 13.10.2
@nrwl/web : Not Found
@nrwl/workspace : 13.10.2
typescript : 4.6.3
rxjs : 7.4.0
---------------------------------------
Community plugins:

[Coly010]

This will be fixed with: https://github.com/nrwl/nx/pull/9896

[damien-marest]

Hello @anandjaisy ,

I had to start over once again and strictly use the cli commands from documentation here. My mistake was to mix different sources and ways to create remote, host or libs.