fix(angular): ensure provideStore is provided before storeDevTools #28107 (#28428)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
The order of the `provide*` functions for NgRx matters and should
therefore be structured as such


## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Ensure `provideStore` is first provider added

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #28107

packages/angular/src/generators/ngrx-root-store/__snapshots__/ngrx-root-store.spec.ts.snap

@@ -19,6 +19,7 @@ import { UsersFacade } from './+state/users.facade';
   imports: [
     BrowserModule,
     RouterModule.forRoot(appRoutes),
+    EffectsModule.forRoot([]),
     StoreModule.forRoot(
       {},
       {
@@ -29,7 +30,6 @@ import { UsersFacade } from './+state/users.facade';
         },
       }
     ),
-    EffectsModule.forRoot([]),
     StoreRouterConnectingModule.forRoot(),
     StoreModule.forFeature(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer),
     EffectsModule.forFeature([UsersEffects]),
@@ -90,6 +90,7 @@ import { UsersEffects } from './+state/users.effects';
   imports: [
     BrowserModule,
     RouterModule.forRoot(appRoutes),
+    EffectsModule.forRoot([]),
     StoreModule.forRoot(
       {},
       {
@@ -100,7 +101,6 @@ import { UsersEffects } from './+state/users.effects';
         },
       }
     ),
-    EffectsModule.forRoot([]),
     StoreRouterConnectingModule.forRoot(),
     StoreModule.forFeature(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer),
     EffectsModule.forFeature([UsersEffects]),
@@ -373,6 +373,7 @@ import { StoreRouterConnectingModule } from '@ngrx/router-store';
   imports: [
     BrowserModule,
     RouterModule.forRoot(appRoutes),
+    EffectsModule.forRoot([]),
     StoreModule.forRoot({}, {
       metaReducers: [],
       runtimeChecks: {
@@ -380,7 +381,6 @@ import { StoreRouterConnectingModule } from '@ngrx/router-store';
         strictStateImmutability: true
       }
     }),
-    EffectsModule.forRoot([]),
     StoreRouterConnectingModule.forRoot(),
   ],
   providers: [],
@@ -399,14 +399,16 @@ import { appRoutes } from './app.routes';
 import { NxWelcomeComponent } from './nx-welcome.component';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
-import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { StoreRouterConnectingModule } from '@ngrx/router-store';
 
 @NgModule({
   declarations: [AppComponent, NxWelcomeComponent],
   imports: [
     BrowserModule,
     RouterModule.forRoot(appRoutes),
+    EffectsModule.forRoot([]),
+    StoreDevtoolsModule.instrument({ logOnly: !isDevMode() }),
     StoreModule.forRoot({}, {
       metaReducers: [],
       runtimeChecks: {
@@ -414,9 +416,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
         strictStateImmutability: true
       }
     }),
-    EffectsModule.forRoot([]),
     StoreRouterConnectingModule.forRoot(),
-    StoreDevtoolsModule.instrument({ logOnly: !isDevMode() }),
   ],
   providers: [],
   bootstrap: [AppComponent],
@@ -436,7 +436,7 @@ import { UsersEffects } from './+state/users.effects';
 import { UsersFacade } from './+state/users.facade';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideEffects(UsersEffects),provideState(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer),UsersFacade,provideEffects(),provideStore(),provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes) ]
+  providers: [provideEffects(UsersEffects),provideState(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer),UsersFacade,provideStore(),provideEffects(),provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes) ]
 };
 "
 `;
@@ -482,7 +482,7 @@ import * as fromUsers from './+state/users.reducer';
 import { UsersEffects } from './+state/users.effects';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideEffects(UsersEffects),provideState(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer),provideEffects(),provideStore(),provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes) ]
+  providers: [provideEffects(UsersEffects),provideState(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer),provideStore(),provideEffects(),provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes) ]
 };
 "
 `;
@@ -729,7 +729,7 @@ import { provideStore } from '@ngrx/store';
 import { provideEffects } from '@ngrx/effects';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideEffects(),provideStore(),provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes) ]
+  providers: [provideStore(),provideEffects(),provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes) ]
 };
 "
 `;
@@ -743,7 +743,7 @@ import { provideEffects } from '@ngrx/effects';
 import { provideStoreDevtools } from '@ngrx/store-devtools';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideStoreDevtools({ logOnly: !isDevMode() }),provideEffects(),provideStore(),provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes) ]
+  providers: [provideStore(),provideStoreDevtools({ logOnly: !isDevMode() }),provideEffects(),provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(appRoutes) ]
 };
 "
 `;

packages/angular/src/generators/ngrx-root-store/lib/add-imports.ts

@@ -181,15 +181,6 @@ export function addImportsToModule(
     sourceFile = addImport(sourceFile, 'EffectsModule', '@ngrx/effects');
   }
 
-  sourceFile = addRootStoreImport(
-    tree,
-    isParentStandalone,
-    sourceFile,
-    parentPath,
-    provideRootStore,
-    storeForRoot
-  );
-
   sourceFile = addRootEffectsImport(
     tree,
     isParentStandalone,
@@ -199,6 +190,25 @@ export function addImportsToModule(
     effectsForEmptyRoot
   );
 
+  if (options.addDevTools) {
+    sourceFile = addStoreDevTools(
+      tree,
+      sourceFile,
+      parentPath,
+      isParentStandalone,
+      addImport
+    );
+  }
+
+  sourceFile = addRootStoreImport(
+    tree,
+    isParentStandalone,
+    sourceFile,
+    parentPath,
+    provideRootStore,
+    storeForRoot
+  );
+
   // this is just a heuristic
   const hasRouter = sourceText.indexOf('RouterModule') > -1;
 
@@ -211,14 +221,4 @@ export function addImportsToModule(
       storeRouterModule
     );
   }
-
-  if (options.addDevTools) {
-    sourceFile = addStoreDevTools(
-      tree,
-      sourceFile,
-      parentPath,
-      isParentStandalone,
-      addImport
-    );
-  }
 }