feat(schematics): replace environments usage with isDevMode (#3645)

Closes #3618 As of Angular 15.0.0 there will be no auto-generated environment files anymore for new apps. Instead, we use the builtin `isDevMode()` function from Angular. - store-devtools: ng-add (logOnly option) - store: ng-add - schematics: store, reducer - update documentation and examples
ngrx · Nov 5, 2022 · 4f61b63 · 4f61b63
1 parent cc04e2f
commit 4f61b63
Show file tree

Hide file tree

Showing 14 changed files with 38 additions and 88 deletions.
diff --git a/modules/effects/migrations/15_0_0-beta/index.spec.ts b/modules/effects/migrations/15_0_0-beta/index.spec.ts
@@ -18,7 +18,7 @@ describe('Effects Migration 15_0_0-beta', () => {
 
   it('replace array in provideEffects', async () => {
     const input = tags.stripIndent`
-        import { enableProdMode } from '@angular/core';
+        import { enableProdMode, isDevMode } from '@angular/core';
         import { bootstrapApplication } from '@angular/platform-browser';
         import {
           provideRouter,
@@ -50,15 +50,15 @@ describe('Effects Migration 15_0_0-beta', () => {
                   providers: [
                     provideEffects([]),
                     provideEffects([AppEffects]),
-                    provideEffects([AppEffects1, AppEffect2]),        
+                    provideEffects([AppEffects1, AppEffect2]),
                   ]
                 },
               ],
               withEnabledBlockingInitialNavigation()
             ),
             provideStoreDevtools({
               maxAge: 25,
-              logOnly: environment.production,
+              logOnly: !isDevMode(),
               name: 'NgRx Standalone App',
             }),
             provideRouterStore(),
@@ -70,7 +70,7 @@ describe('Effects Migration 15_0_0-beta', () => {
       `;
 
     const expected = tags.stripIndent`
-        import { enableProdMode } from '@angular/core';
+        import { enableProdMode, isDevMode } from '@angular/core';
         import { bootstrapApplication } from '@angular/platform-browser';
         import {
           provideRouter,
@@ -102,15 +102,15 @@ describe('Effects Migration 15_0_0-beta', () => {
                   providers: [
                     provideEffects(),
                     provideEffects(AppEffects),
-                    provideEffects(AppEffects1, AppEffect2),        
+                    provideEffects(AppEffects1, AppEffect2),
                   ]
                 },
               ],
               withEnabledBlockingInitialNavigation()
             ),
             provideStoreDevtools({
               maxAge: 25,
-              logOnly: environment.production,
+              logOnly: !isDevMode(),
               name: 'NgRx Standalone App',
             }),
             provideRouterStore(),

diff --git a/modules/schematics-core/testing/create-reducers.ts b/modules/schematics-core/testing/create-reducers.ts
@@ -8,25 +8,25 @@ export function createReducers(
   tree.create(
     path || `/projects/${project}/src/app/reducers/index.ts`,
     `
+    import { isDevMode } from '@angular/core';
     import {
       ActionReducer,
       ActionReducerMap,
       createFeatureSelector,
       createSelector,
       MetaReducer
     } from '@ngrx/${'store'}';
-    import { environment } from '../../environments/environment';
-    
+
     export interface State {
-    
+
     }
-    
+
     export const reducers: ActionReducerMap<State> = {
-    
+
     };
-    
-    
-    export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];
+
+
+    export const metaReducers: MetaReducer<State>[] = isDevMode() ? [] : [];
   `
   );
 

diff --git a/modules/schematics/src/store/files/__statePath__/index.ts.template b/modules/schematics/src/store/files/__statePath__/index.ts.template
@@ -1,11 +1,11 @@
-import {
+<% if (!isLib) { %>import { isDevMode } from '@angular/core';
+<% } %>import {
   ActionReducer,
   ActionReducerMap,
   createFeatureSelector,
   createSelector,
   MetaReducer
 } from '@ngrx/store';
-<% if (!isLib) { %>import { environment } from '<%= environmentsPath %>';<% } %>
 <% if (!root) { %>
 export const <%= camelize(name) %>FeatureKey = '<%= camelize(name) %>';<% } %>
 
@@ -18,4 +18,4 @@ export const reducers: ActionReducerMap<<%= classify(stateInterface) %>> = {
 };
 
 
-export const metaReducers: MetaReducer<<%= classify(stateInterface) %>>[] = <% if (!isLib) { %>!environment.production ? [] : <% } %>[];
+export const metaReducers: MetaReducer<<%= classify(stateInterface) %>>[] = <% if (!isLib) { %>isDevMode() ? [] : <% } %>[];
diff --git a/modules/schematics/src/store/index.spec.ts b/modules/schematics/src/store/index.spec.ts
@@ -154,15 +154,15 @@ describe('Store Schematic', () => {
     );
   });
 
-  it('should import the environments correctly in the app module', async () => {
+  it('should import isDevMode correctly in the app module', async () => {
     const options = { ...defaultOptions, module: 'app.module.ts' };
 
     const tree = await schematicRunner
       .runSchematicAsync('store', options, appTree)
       .toPromise();
     const content = tree.readContent(`${projectPath}/src/app/app.module.ts`);
     expect(content).toMatch(
-      /import { environment } from '..\/environments\/environment';/
+      /import { NgModule, isDevMode } from '@angular\/core';/
     );
   });
 
@@ -175,23 +175,7 @@ describe('Store Schematic', () => {
     const content = tree.readContent(
       `${projectPath}/src/app/reducers/index.ts`
     );
-    expect(content).toMatch(
-      /import { environment } from '..\/..\/environments\/environment';/
-    );
-  });
-
-  it('should not import the environments in the reducers for a library', async () => {
-    const options = {
-      ...defaultOptions,
-      project: 'baz',
-      module: 'baz.module.ts',
-    };
-
-    const tree = await schematicRunner
-      .runSchematicAsync('store', options, appTree)
-      .toPromise();
-    const content = tree.readContent(`/projects/baz/src/lib/reducers/index.ts`);
-    expect(content).not.toMatch(/import { environment }/);
+    expect(content).toMatch(/import { isDevMode } from '@angular\/core';/);
   });
 
   it('should fail if specified module does not exist', async () => {
@@ -367,7 +351,7 @@ describe('Store Schematic', () => {
     const content = tree.readContent(`${projectPath}/src/app/empty.module.ts`);
 
     expect(content).toMatch(
-      /imports: \[StoreModule.forRoot\(reducers, { metaReducers }\), !environment.production \? StoreDevtoolsModule.instrument\(\) : \[\]\]/
+      /imports: \[StoreModule.forRoot\(reducers, { metaReducers }\), isDevMode\(\) \? StoreDevtoolsModule.instrument\(\) : \[\]\]/
     );
   });
 });
diff --git a/modules/schematics/src/store/index.ts b/modules/schematics/src/store/index.ts
@@ -8,13 +8,11 @@ import {
   branchAndMerge,
   chain,
   mergeWith,
-  template,
   url,
   move,
   filter,
   noop,
 } from '@angular-devkit/schematics';
-import { Path, dirname } from '@angular-devkit/core';
 import * as ts from 'typescript';
 import {
   stringUtils,
@@ -59,11 +57,6 @@ function addImportToNgModule(options: StoreOptions): Rule {
     const statePath = `${options.path}/${options.statePath}`;
     const relativePath = buildRelativePath(modulePath, statePath);
 
-    const environmentsPath = buildRelativePath(
-      statePath,
-      `${options.path}/environments/environment`
-    );
-
     const rootStoreReducers = options.minimal ? `{}` : `reducers`;
     const rootStoreConfig = options.minimal ? `` : `, { metaReducers }`;
 
@@ -126,7 +119,7 @@ function addImportToNgModule(options: StoreOptions): Rule {
       const storeDevtoolsNgModuleImport = addImportToModule(
         source,
         modulePath,
-        `${adjectiveComma}!environment.production ? StoreDevtoolsModule.instrument() : []`,
+        `${adjectiveComma}isDevMode() ? StoreDevtoolsModule.instrument() : []`,
         relativePath
       ).shift();
 
@@ -137,7 +130,7 @@ function addImportToNgModule(options: StoreOptions): Rule {
           'StoreDevtoolsModule',
           '@ngrx/store-devtools'
         ),
-        insertImport(source, modulePath, 'environment', environmentsPath),
+        insertImport(source, modulePath, 'isDevMode', '@angular/core'),
         storeDevtoolsNgModuleImport,
       ]);
     }
@@ -167,13 +160,6 @@ export default function (options: StoreOptions): Rule {
     options.name = parsedPath.name;
     options.path = parsedPath.path;
 
-    const statePath = `/${options.path}/${options.statePath}/index.ts`;
-    const srcPath = dirname(options.path as Path);
-    const environmentsPath = buildRelativePath(
-      statePath,
-      `${srcPath}/environments/environment`
-    );
-
     if (options.module) {
       options.module = findModuleFromOptions(host, options);
     }
@@ -192,7 +178,6 @@ export default function (options: StoreOptions): Rule {
         ...stringUtils,
         ...(options as object),
         isLib: isLib(host, options),
-        environmentsPath,
       }),
       move(parsedPath.path),
     ]);

diff --git a/modules/store-devtools/schematics/ng-add/index.spec.ts b/modules/store-devtools/schematics/ng-add/index.spec.ts
@@ -2,7 +2,6 @@ import {
   SchematicTestRunner,
   UnitTestTree,
 } from '@angular-devkit/schematics/testing';
-import { getFileContent } from '@schematics/angular/utility/test';
 import * as path from 'path';
 import { Schema as StoreDevtoolsOptions } from './schema';
 import {
@@ -62,7 +61,7 @@ describe('Store-Devtools ng-add Schematic', () => {
       /import { StoreDevtoolsModule } from '@ngrx\/store-devtools';/
     );
     expect(content).toMatch(
-      /StoreDevtoolsModule.instrument\({ maxAge: 25, logOnly: environment.production }\)/
+      /StoreDevtoolsModule.instrument\({ maxAge: 25, logOnly: !isDevMode\(\) }\)/
     );
   });
 
@@ -78,15 +77,15 @@ describe('Store-Devtools ng-add Schematic', () => {
     );
   });
 
-  it('should import the environments correctly', async () => {
+  it('should import isDevMode correctly', async () => {
     const options = { ...defaultOptions, module: 'app.module.ts' };
 
     const tree = await schematicRunner
       .runSchematicAsync('ng-add', options, appTree)
       .toPromise();
     const content = tree.readContent(`${projectPath}/src/app/app.module.ts`);
     expect(content).toMatch(
-      /import { environment } from '..\/environments\/environment';/
+      /import { NgModule, isDevMode } from '@angular\/core';/
     );
   });
 

diff --git a/modules/store-devtools/schematics/ng-add/index.ts b/modules/store-devtools/schematics/ng-add/index.ts
@@ -12,15 +12,13 @@ import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 import {
   InsertChange,
   addImportToModule,
-  buildRelativePath,
   findModuleFromOptions,
   getProjectPath,
   insertImport,
   addPackageToPackageJson,
   platformVersion,
   parseName,
 } from '../../schematics-core';
-import { Path, dirname } from '@angular-devkit/core';
 import { Schema as StoreDevtoolsOptions } from './schema';
 
 function addImportToNgModule(options: StoreDevtoolsOptions): Rule {
@@ -51,24 +49,18 @@ function addImportToNgModule(options: StoreDevtoolsOptions): Rule {
     const [instrumentNgModuleImport] = addImportToModule(
       source,
       modulePath,
-      `StoreDevtoolsModule.instrument({ maxAge: ${options.maxAge}, logOnly: environment.production })`,
+      `StoreDevtoolsModule.instrument({ maxAge: ${options.maxAge}, logOnly: !isDevMode() })`,
       modulePath
     );
 
-    const srcPath = dirname(options.path as Path);
-    const environmentsPath = buildRelativePath(
-      modulePath,
-      `/${srcPath}/environments/environment`
-    );
-
     const changes = [
       insertImport(
         source,
         modulePath,
         'StoreDevtoolsModule',
         '@ngrx/store-devtools'
       ),
-      insertImport(source, modulePath, 'environment', environmentsPath),
+      insertImport(source, modulePath, 'isDevMode', '@angular/core'),
       instrumentNgModuleImport,
     ];
     const recorder = host.beginUpdate(modulePath);

diff --git a/modules/store-devtools/src/provide-store-devtools.ts b/modules/store-devtools/src/provide-store-devtools.ts
@@ -56,7 +56,7 @@ export function createReduxDevtoolsExtension() {
  *   providers: [
  *     provideStoreDevtools({
  *       maxAge: 25,
- *       logOnly: environment.production,
+ *       logOnly: !isDevMode(),
  *     }),
  *   ],
  * });

diff --git a/modules/store/schematics/ng-add/files/__statePath__/index.ts.template b/modules/store/schematics/ng-add/files/__statePath__/index.ts.template
@@ -1,11 +1,11 @@
+import { isDevMode } from '@angular/core';
 import {
   ActionReducer,
   ActionReducerMap,
   createFeatureSelector,
   createSelector,
   MetaReducer
 } from '@ngrx/store';
-import { environment } from '<%= environmentsPath %>';
 
 export interface <%= classify(stateInterface) %> {
 
@@ -16,4 +16,4 @@ export const reducers: ActionReducerMap<<%= classify(stateInterface) %>> = {
 };
 
 
-export const metaReducers: MetaReducer<<%= classify(stateInterface) %>>[] = !environment.production ? [] : [];
+export const metaReducers: MetaReducer<<%= classify(stateInterface) %>>[] = isDevMode() ? [] : [];
diff --git a/modules/store/schematics/ng-add/index.spec.ts b/modules/store/schematics/ng-add/index.spec.ts
@@ -93,7 +93,7 @@ describe('Store ng-add Schematic', () => {
     );
   });
 
-  it('should import the environments correctly', async () => {
+  it('should import isDevMode correctly', async () => {
     const options = { ...defaultOptions, module: 'app.module.ts' };
 
     const tree = await schematicRunner
@@ -102,9 +102,7 @@ describe('Store ng-add Schematic', () => {
     const content = tree.readContent(
       `${projectPath}/src/app/reducers/index.ts`
     );
-    expect(content).toMatch(
-      /import { environment } from '..\/..\/environments\/environment';/
-    );
+    expect(content).toMatch(/import { isDevMode } from '@angular\/core';/);
   });
 
   it('should fail if specified module does not exist', async () => {

diff --git a/modules/store/schematics/ng-add/index.ts b/modules/store/schematics/ng-add/index.ts
@@ -1,5 +1,4 @@
 import * as ts from 'typescript';
-import { Path, dirname } from '@angular-devkit/core';
 import {
   Rule,
   SchematicContext,
@@ -146,13 +145,6 @@ export default function (options: RootStoreOptions): Rule {
     const parsedPath = parseName(options.path, '');
     options.path = parsedPath.path;
 
-    const statePath = `/${options.path}/${options.statePath}/index.ts`;
-    const srcPath = dirname(options.path as Path);
-    const environmentsPath = buildRelativePath(
-      statePath,
-      `/${srcPath}/environments/environment`
-    );
-
     if (options.module) {
       options.module = findModuleFromOptions(host, {
         name: '',
@@ -170,7 +162,6 @@ export default function (options: RootStoreOptions): Rule {
       applyTemplates({
         ...stringUtils,
         ...options,
-        environmentsPath,
       }),
       move(parsedPath.path),
     ]);

diff --git a/projects/ngrx.io/content/guide/store-devtools/index.md b/projects/ngrx.io/content/guide/store-devtools/index.md
@@ -15,6 +15,7 @@ Instrumentation with the Chrome / Firefox Extension
 2.  In your `AppModule` add instrumentation to the module imports using `StoreDevtoolsModule.instrument`:
 
 <code-example header="app.module.ts">
+import { NgModule, isDevMode } from '@angular/core';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { environment } from '../environments/environment'; // Angular CLI environment
 
@@ -24,7 +25,7 @@ import { environment } from '../environments/environment'; // Angular CLI enviro
     // Instrumentation must be imported after importing StoreModule (config is optional)
     StoreDevtoolsModule.instrument({
       maxAge: 25, // Retains last 25 states
-      logOnly: environment.production, // Restrict extension to log-only mode
+      logOnly: !isDevMode(), // Restrict extension to log-only mode
       autoPause: true, // Pauses recording actions and state changes when the extension window is not open
     }),
   ],