chore: fix demo (#1725)

.gitignore

@@ -33,7 +33,7 @@ scripts/build/var.less
 /schematics/plugin/files/rtl
 
 # Yarn
-yarn.lock
+# yarn.lock
 yarn-error.log
 .yarn/*
 !.yarn/patches

.vscode/settings.json

@@ -9,10 +9,8 @@
     "**/.yarn/**": true
   },
   "editor.codeActionsOnSave": {
-    // For ESLint
-    "source.fixAll.eslint": true,
-    // For Stylelint
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "[html]": {
     "editor.formatOnSave": true

azure-pipelines.yml

@@ -21,6 +21,11 @@ stages:
     jobs:
       - job: build
         steps:
+          - task: NodeTool@0
+            inputs:
+              versionSource: 'fromFile'
+              versionFilePath: '.nvmrc'
+            displayName: 'Install Node.js'
           - script: |
               node --version
               yarn --version
@@ -64,6 +69,11 @@ stages:
         dependsOn: Build
         condition: failed()
         steps:
+          - task: NodeTool@0
+            inputs:
+              versionSource: 'fromFile'
+              versionFilePath: '.nvmrc'
+            displayName: 'Install Node.js'
           - checkout: self
             displayName: 'Checkout'
             clean: true
@@ -82,6 +92,11 @@ stages:
     jobs:
       - job: packages
         steps:
+          - task: NodeTool@0
+            inputs:
+              versionSource: 'fromFile'
+              versionFilePath: '.nvmrc'
+            displayName: 'Install Node.js'
           - script: yarn install
             displayName: 'Install'
           - script: |
@@ -110,6 +125,11 @@ stages:
               testResultsFiles: '**/TESTS*.xml'
       - job: cli
         steps:
+          - task: NodeTool@0
+            inputs:
+              versionSource: 'fromFile'
+              versionFilePath: '.nvmrc'
+            displayName: 'Install Node.js'
           - script: yarn install
             displayName: 'Install'
           - script: yarn run test:cli
@@ -119,6 +139,11 @@ stages:
     jobs:
       - job: packages
         steps:
+          - task: NodeTool@0
+            inputs:
+              versionSource: 'fromFile'
+              versionFilePath: '.nvmrc'
+            displayName: 'Install Node.js'
           - script: yarn install
             displayName: 'Install'
           - script: yarn run lint

packages/abc/reuse-tab/index.en-US.md

@@ -17,7 +17,7 @@ The newly opened is always the current page, and the route reuse means that when
 1. Provide `provideReuseTabConfig()` configuration in `app.config.ts` file
 2. Add `<reuse-tab>` in the `src/app/layout/basic/basic.component.ts` file, like this:
 
-```diff
+```html
 - <router-outlet />
 + <reuse-tab #reuseTab />
 + <router-outlet (activate)="reuseTab.activate($event)" (attach)="reuseTab.activate($event)" />

packages/abc/reuse-tab/index.zh-CN.md

@@ -17,7 +17,7 @@ standalone: true
 1. 在 `app.config.ts` 下提供 `provideReuseTabConfig()` 配置
 2. 在需要展示标签的地方调用 `<reuse-tab>`，一般在 `src/app/layout/basic/basic.component.ts`，例如：
 
-```diff
+```html
 - <router-outlet />
 + <reuse-tab #reuseTab />
 + <router-outlet (activate)="reuseTab.activate($event)" (attach)="reuseTab.activate($event)" />

src/app/app.config.ts

@@ -27,7 +27,7 @@ import { withTreeSelectWidget } from '@delon/form/widgets/tree-select';
 import { withUploadWidget } from '@delon/form/widgets/upload';
 import { withMonacoEditorWidget } from '@delon/form/widgets-third/monaco-editor';
 import { withTinymceWidget } from '@delon/form/widgets-third/tinymce';
-import { provideMockConfig } from '@delon/mock';
+import { mockInterceptor, provideMockConfig } from '@delon/mock';
 import { zh_CN as delonLang, AlainProvideLang, provideAlain } from '@delon/theme';
 import { AlainConfig } from '@delon/util/config';
 import { NzConfig, provideNzConfig } from 'ng-zorro-antd/core/config';
@@ -90,7 +90,7 @@ const ngZorroConfig: NzConfig = {};
 export const appConfig: ApplicationConfig = {
   providers: [
     { provide: APP_ID, useValue: 'ngAlainDoc' },
-    provideHttpClient(withFetch(), withInterceptors([])),
+    provideHttpClient(withFetch(), withInterceptors([mockInterceptor])),
     provideAnimations(),
     provideRouter(routes, withComponentInputBinding()),
     // provideClientHydration(), // 暂时不开启水合，除了编译时间长，还有就是对DOM要求比较高

src/app/core/code/code.service.ts

@@ -8,19 +8,16 @@ import { deepCopy } from '@delon/util/other';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import angularJSON from './files/angular.json';
-import appModuleTS from './files/app.module';
+import appConfigTS from './files/app.config';
 import delonABCModuleTS from './files/delon-abc.module';
 import delonChartModuleTS from './files/delon-chart.module';
 import environmentTS from './files/environment';
-import globalConfigTS from './files/global-config.module';
 import mainTS from './files/main';
-import mainCliTS from './files/main-cli';
 import mockUser from './files/mock-user';
 import nzZorroAntdModuleTS from './files/ng-zorro-antd.module';
 import packageJSON from './files/package.json';
-import polyfillTS from './files/polyfill';
 import readme from './files/readme-cli';
-import sandboxConfigJSON from './files/sandbox.config.json';
+import sandboxConfigJSON from './files/sandbox';
 import startupServiceTS from './files/startup.service';
 import tsconfigJSON from './files/tsconfig.json';
 import pkg from '../../../../package.json';
@@ -96,6 +93,7 @@ export class CodeService {
     const res = packageJSON as Record<string, NzSafeAny>;
     [
       'ng-zorro-antd',
+      'ng-antd-color-picker',
       'date-fns',
       '@delon/theme',
       '@delon/abc',
@@ -179,12 +177,27 @@ export class CodeService {
     };
   }
 
+  private attachStandalone(code: string): string {
+    // standalone: true,
+    if (code.includes(`standalone: true`)) return code;
+
+    return `import { DemoDelonABCModule } from './delon-abc.module';
+import { DemoDelonChartModule } from './delon-chart.module';
+import { DemoNgZorroAntdModule } from './ng-zorro-antd.module';
+import { DelonFormModule } from '@delon/form';\n${code.replace(
+      `@Component({`,
+      `@Component({\n  standalone: true,\n  // Just automatically generated code, please import as needed\n  imports: [DemoNgZorroAntdModule, DemoDelonABCModule, DemoDelonChartModule, DelonFormModule],`
+    )}`;
+  }
+
   openOnStackBlitz(title: string, appComponentCode: string): void {
+    appComponentCode = this.attachStandalone(appComponentCode);
     const res = this.parseCode(appComponentCode);
     const json = deepCopy(angularJSON);
     json.projects.demo.architect.build.options.styles.splice(0, 0, this.themePath);
     const packageJson = this.genPackage({ dependencies: [], devDependencies: [], includeCli: false });
-    packageJson.name = title;
+    packageJson.name = 'NG-ALAIN';
+    packageJson.description = title;
     sdk.openProject(
       {
         title: 'NG-ALAIN',
@@ -200,11 +213,9 @@ export class CodeService {
           'package.json': `${JSON.stringify(packageJson, null, 2)}`,
           'src/environments/environment.ts': environmentTS,
           'src/index.html': res.html,
-          'src/main.ts': mainTS,
-          'src/polyfills.ts': polyfillTS,
+          'src/main.ts': mainTS(res.componentName),
           'src/app/app.component.ts': appComponentCode,
-          'src/app/app.module.ts': appModuleTS(res.componentName),
-          'src/app/global-config.module.ts': globalConfigTS,
+          'src/app/app.config.ts': appConfigTS,
           'src/app/ng-zorro-antd.module.ts': nzZorroAntdModuleTS,
           'src/app/delon-abc.module.ts': delonABCModuleTS,
           'src/app/delon-chart.module.ts': delonChartModuleTS,
@@ -221,12 +232,14 @@ export class CodeService {
   }
 
   openOnCodeSandbox(title: string, appComponentCode: string, includeCli: boolean = false): void {
+    appComponentCode = this.attachStandalone(appComponentCode);
     const res = this.parseCode(appComponentCode);
     const mockObj = this.genMock;
     const json = deepCopy(angularJSON);
     json.projects.demo.architect.build.options.styles.splice(0, 0, this.themePath);
     const packageJson = this.genPackage({ dependencies: [], devDependencies: [], includeCli });
-    packageJson.name = title;
+    packageJson.name = 'NG-ALAIN';
+    packageJson.description = title;
     const files: {
       [key: string]: {
         content: string;
@@ -254,19 +267,11 @@ export class CodeService {
         isBinary: false
       },
       'src/main.ts': {
-        content: includeCli ? mainCliTS : mainTS,
-        isBinary: false
-      },
-      'src/polyfills.ts': {
-        content: polyfillTS,
+        content: mainTS(res.componentName),
         isBinary: false
       },
-      'src/app/app.module.ts': {
-        content: appModuleTS(res.componentName),
-        isBinary: false
-      },
-      'src/app/global-config.module.ts': {
-        content: globalConfigTS,
+      'src/app/app.config.ts': {
+        content: appConfigTS,
         isBinary: false
       },
       'src/app/app.component.ts': {
@@ -307,11 +312,13 @@ export class CodeService {
         content: readme,
         isBinary: false
       };
-      files['sandbox.config.json'] = {
-        content: `${JSON.stringify(sandboxConfigJSON, null, 2)}`,
+    }
+    Object.keys(sandboxConfigJSON).forEach(key => {
+      files[key] = {
+        content: (sandboxConfigJSON as NzSafeAny)[key],
         isBinary: false
       };
-    }
+    });
     const parameters = getParameters({
       files
     });

src/app/core/code/files/angular.json.ts

@@ -1,6 +1,8 @@
 export default {
   $schema: './node_modules/@angular/cli/lib/config/schema.json',
-  version: 1,
+  cli: {
+    analytics: '1e1de97b-a744-405a-8b5a-0397bb3d01ce'
+  },
   newProjectRoot: 'projects',
   projects: {
     demo: {
@@ -10,38 +12,47 @@ export default {
       prefix: 'app',
       architect: {
         build: {
-          builder: '@angular-devkit/build-angular:browser',
-          options: {
-            outputPath: 'dist/demo',
-            index: 'src/index.html',
-            main: 'src/main.ts',
-            polyfills: 'src/polyfills.ts',
-            tsConfig: 'tsconfig.json',
-            assets: ['src/assets'],
-            styles: ['src/styles.css']
-          },
+          builder: '@angular-devkit/build-angular:application',
           configurations: {
+            development: {
+              extractLicenses: false,
+              namedChunks: true,
+              optimization: false,
+              sourceMap: true
+            },
             production: {
-              optimization: true,
-              outputHashing: 'all',
-              sourceMap: false,
-              extractCss: true,
-              namedChunks: false,
               aot: true,
               extractLicenses: true,
-              vendorChunk: false,
-              buildOptimizer: true
+              namedChunks: false,
+              optimization: true,
+              outputHashing: 'all',
+              sourceMap: false
             }
+          },
+          options: {
+            assets: [],
+            index: 'src/index.html',
+            browser: 'src/main.ts',
+            outputPath: 'dist/demo',
+            scripts: [],
+            styles: ['node_modules/@delon/theme/default.css', 'src/styles.css'],
+            tsConfig: 'tsconfig.json'
           }
         },
         serve: {
           builder: '@angular-devkit/build-angular:dev-server',
-          options: {
-            browserTarget: 'demo:build'
-          }
+          configurations: {
+            development: {
+              buildTarget: 'demo:build:development'
+            },
+            production: {
+              buildTarget: 'demo:build:production'
+            }
+          },
+          defaultConfiguration: 'development'
         }
       }
     }
   },
-  defaultProject: 'demo'
+  version: 1
 };