feat: improve schematics (#8411)

Author: HyperLife1119

schematics/ng-add/index.spec.ts

@@ -1,9 +1,4 @@
-import {
-  addModuleImportToRootModule,
-  getProjectFromWorkspace,
-  getProjectTargetOptions,
-  addImportToModule
-} from '@angular/cdk/schematics';
+import { getProjectFromWorkspace, getProjectTargetOptions } from '@angular/cdk/schematics';
 
 import { normalize } from '@angular-devkit/core';
 import { WorkspaceDefinition } from '@angular-devkit/core/src/workspace';
@@ -129,58 +124,28 @@ describe('ng-add schematic', () => {
     expect(assetsString).toContain(iconPathSegment);
   });
 
-  it('should required modules', async () => {
+  it('should required modules and providers', async () => {
     const options = { ...defaultOptions };
     const tree = await runner.runSchematic('ng-add-setup-project', options, appTree);
     const fileContent = getFileContent(tree, '/projects/ng-zorro/src/app/app.module.ts');
 
+    expect(fileContent).toContain('provideHttpClient()');
     expect(fileContent).toContain('FormsModule');
-    expect(fileContent).toContain('HttpClientModule');
   });
 
-  it('should add browserAnimationsModuleName if animations is enable', async () => {
+  it('should add provideAnimationsAsync() function call if animations is enable', async () => {
     const options = { ...defaultOptions, animations: true };
     const tree = await runner.runSchematic('ng-add-setup-project', options, appTree);
     const fileContent = getFileContent(tree, '/projects/ng-zorro/src/app/app.module.ts');
-    expect(fileContent).toContain('BrowserAnimationsModule');
+    expect(fileContent).toContain('provideAnimationsAsync()');
   });
 
-  it('should add noopAnimationsModuleName if animations is disable', async () => {
+  it(`should add provideAnimationsAsync('noop') function call if animations is disable`, async () => {
     const options = { ...defaultOptions, animations: false };
     const tree = await runner.runSchematic('ng-add-setup-project', options, appTree);
     const fileContent = getFileContent(tree, '/projects/ng-zorro/src/app/app.module.ts');
 
-    expect(fileContent).toContain('NoopAnimationsModule');
-  });
-
-  it('should not add BrowserAnimationsModule if NoopAnimationsModule is set up', async () => {
-    const options = { ...defaultOptions, animations: true };
-
-    const workspace = await getWorkspace(appTree);
-    const project = getProjectFromWorkspace(workspace, defaultOptions.project);
-
-    addModuleImportToRootModule(appTree, 'NoopAnimationsModule', '@angular/platform-browser/animations', project);
-
-    const tree = await runner.runSchematic('ng-add-setup-project', options, appTree);
-    const fileContent = getFileContent(tree, '/projects/ng-zorro/src/app/app.module.ts');
-
-    expect(fileContent).toContain('NoopAnimationsModule');
-    expect(fileContent).not.toContain('BrowserAnimationsModule');
-  });
-
-  it('should not add NoopAnimationsModule if BrowserAnimationsModule is set up', async () => {
-    const options = { ...defaultOptions, animations: false };
-
-    const workspace = await getWorkspace(appTree);
-    const project = getProjectFromWorkspace(workspace as unknown as WorkspaceDefinition, defaultOptions.project);
-
-    addModuleImportToRootModule(appTree, 'BrowserAnimationsModule', '@angular/platform-browser/animations', project);
-
-    const tree = await runner.runSchematic('ng-add-setup-project', options, appTree);
-    const fileContent = getFileContent(tree, '/projects/ng-zorro/src/app/app.module.ts');
-
-    expect(fileContent).not.toContain('NoopAnimationsModule');
-    expect(fileContent).toContain('BrowserAnimationsModule');
+    expect(fileContent).toContain(`provideAnimationsAsync('noop')`);
   });
 
   it('should register default locale id', async () => {

schematics/ng-add/setup-project/add-animations-module.ts

@@ -9,13 +9,12 @@ import { addRootImport } from '@schematics/angular/utility';
 import { Schema } from '../schema';
 
 const modulesMap = {
-  FormsModule: '@angular/forms',
-  HttpClientModule: '@angular/common/http'
+  FormsModule: '@angular/forms'
 };
 
 export function addRequiredModules(options: Schema): Rule {
   const rules = Object.entries(modulesMap).map(([symbolName, moduleName]) => {
-    return addRootImport(options.project, ({code, external}) => {
+    return addRootImport(options.project, ({ code, external }) => {
       return code`${external(symbolName, moduleName)}`;
     });
   });

schematics/ng-add/setup-project/add-required-modules.ts

@@ -0,0 +1,34 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Rule, chain } from '@angular-devkit/schematics';
+import { addRootProvider } from '@schematics/angular/utility';
+
+import { Schema } from '../schema';
+
+export function addRequiredProviders(options: Schema): Rule {
+  return chain([
+    addAnimations(options),
+    addHttpClient(options)
+  ]);
+}
+
+function addAnimations(options: Schema): Rule {
+  return addRootProvider(options.project, ({ code, external }) => {
+    return code`${external(
+      'provideAnimationsAsync',
+      '@angular/platform-browser/animations/async',
+    )}(${options.animations ? '' : `'noop'`})`;
+  });
+}
+
+function addHttpClient(options: Schema): Rule {
+  return addRootProvider(options.project, ({ code, external }) => {
+    return code`${external(
+      'provideHttpClient',
+      '@angular/common/http',
+    )}()`;
+  });
+}

schematics/ng-add/setup-project/add-required-providers.ts

@@ -6,9 +6,9 @@
 import { chain, noop, Rule } from '@angular-devkit/schematics';
 
 import { Schema } from '../schema';
-import { addAnimationsModule } from './add-animations-module';
 import { addIconToAssets } from './add-icon-assets';
 import { addRequiredModules } from './add-required-modules';
+import { addRequiredProviders } from './add-required-providers';
 import { hammerjsImport } from './hammerjs-import';
 import { registerLocale } from './register-locale';
 import { addThemeToAppStyles } from './theming';
@@ -17,7 +17,7 @@ export default function (options: Schema): Rule {
   return chain([
     registerLocale(options),
     addRequiredModules(options),
-    addAnimationsModule(options),
+    addRequiredProviders(options),
     addThemeToAppStyles(options),
     options.dynamicIcon ? addIconToAssets(options) : noop(),
     options.gestures ? hammerjsImport(options) : noop()

schematics/ng-add/setup-project/index.ts

@@ -4,14 +4,12 @@
  */
 
 import { getProjectFromWorkspace, getProjectTargetOptions } from '@angular/cdk/schematics';
-import { firstValueFrom } from 'rxjs';
 
 import { normalize } from '@angular-devkit/core';
 import { WorkspaceDefinition } from '@angular-devkit/core/src/workspace';
 import { Tree } from '@angular-devkit/schematics';
 import { NodePackageName } from '@angular-devkit/schematics/tasks/package-manager/options';
 import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
-import { addRootImport } from '@schematics/angular/utility';
 import { getWorkspace } from '@schematics/angular/utility/workspace';
 
 import { join } from 'path';
@@ -132,69 +130,29 @@ describe('[standalone] ng-add schematic', () => {
     expect(assetsString).toContain(iconPathSegment);
   });
 
-  it('should required modules', async () => {
+  it('should required modules and providers', async () => {
     const options = { ...defaultOptions };
     const tree = await runner.runSchematic('ng-add-setup-project', options, appTree);
     const fileContent = getFileContent(tree, '/projects/ng-zorro/src/app/app.config.ts');
 
+    expect(fileContent).toContain('provideHttpClient()');
     expect(fileContent).toContain('FormsModule');
-    expect(fileContent).toContain('HttpClientModule');
   });
 
-  it('should add browserAnimationsModuleName if animations is enable', async () => {
+  it('should add provideAnimationsAsync() call function if animations is enable', async () => {
     const options = { ...defaultOptions, animations: true };
     const tree = await runner.runSchematic('ng-add-setup-project', options, appTree);
     const fileContent = getFileContent(tree, '/projects/ng-zorro/src/app/app.config.ts');
 
-    expect(fileContent).toContain('provideAnimations');
+    expect(fileContent).toContain('provideAnimationsAsync()');
   });
 
-  it('should add noopAnimationsModuleName if animations is disable', async () => {
+  it(`should add provideAnimationsAsync('noop') function call if animations is disable`, async () => {
     const options = { ...defaultOptions, animations: false };
     const tree = await runner.runSchematic('ng-add-setup-project', options, appTree);
     const fileContent = getFileContent(tree, '/projects/ng-zorro/src/app/app.config.ts');
 
-    expect(fileContent).toContain('provideNoopAnimations');
-  });
-
-  it('should not add BrowserAnimationsModule if NoopAnimationsModule is set up', async () => {
-    const options = { ...defaultOptions, animations: true };
-
-    // Add NoopAnimationsModule
-    await firstValueFrom(
-      runner.callRule(
-        addRootImport(options.project, ({ code, external }) => {
-          return code`${external('NoopAnimationsModule', '@angular/platform-browser/animations')}`;
-        }),
-        appTree
-      )
-    );
-
-    const tree = await runner.runSchematic('ng-add-setup-project', options, appTree);
-    const fileContent = getFileContent(tree, '/projects/ng-zorro/src/app/app.config.ts');
-
-    expect(fileContent).toContain('NoopAnimationsModule');
-    expect(fileContent).not.toContain('BrowserAnimationsModule');
-  });
-
-  it('should not add NoopAnimationsModule if BrowserAnimationsModule is set up', async () => {
-    const options = { ...defaultOptions, animations: false };
-
-    // import BrowserAnimationsModule
-    await firstValueFrom(
-      runner.callRule(
-        addRootImport(options.project, ({ code, external }) => {
-          return code`${external('BrowserAnimationsModule', '@angular/platform-browser/animations')}`;
-        }),
-        appTree
-      )
-    );
-
-    const tree = await runner.runSchematic('ng-add-setup-project', options, appTree);
-    const fileContent = getFileContent(tree, '/projects/ng-zorro/src/app/app.config.ts');
-
-    expect(fileContent).not.toContain('NoopAnimationsModule');
-    expect(fileContent).toContain('BrowserAnimationsModule');
+    expect(fileContent).toContain(`provideAnimationsAsync('noop')`);
   });
 
   it('should register default locale id', async () => {