chore(site): update Angular configuration and dependencies (#1754)

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

@@ -33,11 +33,9 @@ export class CodeService {
 
   private genPackage({
     dependencies = [],
-    devDependencies = [],
     includeCli = false
   }: {
     dependencies: string[];
-    devDependencies: string[];
     includeCli: boolean;
   }): Record<string, string | Record<string, string>> {
     const ngCoreVersion = pkg.dependencies['@angular/core'];
@@ -56,17 +54,26 @@ export class CodeService {
       '@delon/form',
       '@delon/util',
       ...dependencies
-    ].forEach(k => (res.dependencies[k] = '*'));
-    devDependencies.forEach(k => (res.devDependencies[k] = '*'));
+    ];
+    if (includeCli) {
+      res.devDependencies = {
+        '@angular-devkit/build-angular': '^17.0.0',
+        '@angular/cli': '^17.0.0',
+        '@angular/compiler-cli': '^17.0.0',
+        '@types/node': '^18.18.0',
+        'ts-node': '~10.9.1',
+        typescript: '~5.2.2',
+        'ng-alain': '~17.0.3'
+      };
+    }
 
     const fullLibs: Record<string, string> = { ...pkg.dependencies, ...pkg.devDependencies };
     ['dependencies', 'devDependencies'].forEach(type => {
-      Object.keys(res[type]).forEach(key => {
-        res[type][key] = key.startsWith('@delon') || key === 'ng-alain' ? `~${pkg.version}` : fullLibs[key] || '*';
+      Object.keys(res[type] || {}).forEach(key => {
+        res[type][key] = key.startsWith('@delon') || key === 'ng-alain' ? `${pkg.version}` : fullLibs[key] || '*';
       });
     });
     res.dependencies['@angular/core'] = ngCoreVersion;
-    if (!includeCli) res;
 
     return res;
   }
@@ -124,13 +131,39 @@ export class CodeService {
     return '';
   }
 
-  async openOnStackBlitz(title: string, appComponentCode: string): Promise<void> {
+  async openOnStackBlitz(title: string, appComponentCode: string, includeCli: boolean = false): Promise<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 });
+    const packageJson = this.genPackage({ dependencies: [], includeCli });
     packageJson.description = title;
+    const files: Record<string, string> = {
+      'angular.json': `${JSON.stringify(json, null, 2)}`,
+      'tsconfig.json': `${JSON.stringify(tsconfigJSON, null, 2)}`,
+      'src/index.html': res.html,
+      'src/main.ts': mainTS(res.componentName),
+      'src/app/app.component.ts': appComponentCode,
+      'src/app/app.config.ts': appConfigTS,
+      'src/app/startup.service.ts': this.genStartupService,
+      'src/styles.css': ``,
+      ...this.genMock
+    };
+    if (includeCli) {
+      files['.stackblitzrc'] = JSON.stringify(
+        {
+          installDependencies: true,
+          startCommand: 'yarn start',
+          env: {
+            ENABLE_CJS_IMPORTS: true
+          }
+        },
+        null,
+        2
+      );
+      files['yarn.lock'] = await this.getYarnLock();
+      files['package.json'] = `${JSON.stringify(packageJson, null, 2)}`;
+    }
     sdk.openProject(
       {
         title: 'NG-ALAIN',
@@ -140,31 +173,8 @@ export class CodeService {
           ...(packageJson.dependencies as Record<string, string>),
           ...(packageJson.devDependencies as Record<string, string>)
         },
-        files: {
-          '.stackblitzrc': JSON.stringify(
-            {
-              installDependencies: true,
-              startCommand: 'yarn start',
-              env: {
-                ENABLE_CJS_IMPORTS: true
-              }
-            },
-            null,
-            2
-          ),
-          'yarn.lock': await this.getYarnLock(),
-          'angular.json': `${JSON.stringify(json, null, 2)}`,
-          'tsconfig.json': `${JSON.stringify(tsconfigJSON, null, 2)}`,
-          'package.json': `${JSON.stringify(packageJson, null, 2)}`,
-          'src/index.html': res.html,
-          'src/main.ts': mainTS(res.componentName),
-          'src/app/app.component.ts': appComponentCode,
-          'src/app/app.config.ts': appConfigTS,
-          'src/app/startup.service.ts': this.genStartupService,
-          'src/styles.css': ``,
-          ...this.genMock
-        },
-        template: 'node'
+        files: files,
+        template: includeCli ? 'node' : 'angular-cli'
       },
       {
         openFile: `src/app/app.config.ts,src/app/app.component.ts`
@@ -178,7 +188,7 @@ export class CodeService {
     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 });
+    const packageJson = this.genPackage({ dependencies: [], includeCli });
     // packageJson.name = 'NG-ALAIN';
     packageJson.description = title;
     const files: {

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

@@ -6,10 +6,6 @@ export default {
   newProjectRoot: 'projects',
   projects: {
     demo: {
-      root: '',
-      sourceRoot: 'src',
-      projectType: 'application',
-      prefix: 'app',
       architect: {
         build: {
           builder: '@angular-devkit/build-angular:application',
@@ -51,7 +47,12 @@ export default {
           },
           defaultConfiguration: 'development'
         }
-      }
+      },
+      prefix: 'app',
+      projectType: 'application',
+      root: '',
+      schematics: {},
+      sourceRoot: 'src'
     }
   },
   version: 1

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

@@ -6,20 +6,23 @@ export default {
   scripts: {
     ng: 'ng',
     start: 'ng serve',
-    build: 'ng build'
+    build: 'ng build',
+    test: 'ng test',
+    lint: 'ng lint',
+    e2e: 'ng e2e'
   },
   private: true,
   dependencies: {
-    rxjs: '~7.8.0',
-    tslib: '^2.3.0',
-    'zone.js': '~0.14.2',
-    '@angular/core': '^17.0.0',
-    '@angular/forms': '^17.0.0',
-    '@angular/common': '^17.0.0',
-    '@angular/router': '^17.0.0',
-    '@angular/compiler': '^17.0.0',
-    '@angular/animations': '^17.0.0',
-    '@angular/platform-browser': '^17.0.0',
+    '@angular/animations': '^17.1.0',
+    '@angular/common': '^17.1.0',
+    '@angular/compiler': '^17.1.0',
+    '@angular/core': '^17.1.0',
+    '@angular/forms': '^17.1.0',
+    '@angular/platform-browser': '^17.1.0',
+    '@angular/router': '^17.1.0',
+    rxjs: '^7.8.1',
+    tslib: '^2.6.2',
+    'zone.js': '^0.14.3',
     '@delon/theme': '~17.0.3',
     '@delon/abc': '~17.0.3',
     '@delon/chart': '~17.0.3',
@@ -29,15 +32,10 @@ export default {
     '@delon/mock': '~17.0.3',
     '@delon/form': '~17.0.3',
     '@delon/util': '~17.0.3',
-    'ng-antd-color-picker': '^0.0.2'
-  },
-  devDependencies: {
-    '@angular-devkit/build-angular': '^17.0.0',
-    '@angular/cli': '^17.0.0',
-    '@angular/compiler-cli': '^17.0.0',
-    '@types/node': '^18.18.0',
-    'ts-node': '~10.9.1',
-    typescript: '~5.2.2',
-    'ng-alain': '~17.0.3'
+    'ng-antd-color-picker': '^0.0.2',
+    ajv: '^8.12.0',
+    'ajv-formats': '^2.1.1',
+    'date-fns': '^2.16.1',
+    '@angular/cdk': '^17.0.0'
   }
 };

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

@@ -1,29 +1,25 @@
 export default {
   compileOnSave: false,
   compilerOptions: {
-    baseUrl: './',
     outDir: './dist/out-tsc',
     forceConsistentCasingInFileNames: true,
     strict: true,
     noImplicitOverride: true,
-    noPropertyAccessFromIndexSignature: false,
+    noPropertyAccessFromIndexSignature: true,
     noImplicitReturns: true,
     noFallthroughCasesInSwitch: true,
+    esModuleInterop: true,
     sourceMap: true,
     declaration: false,
     downlevelIteration: true,
     experimentalDecorators: true,
     moduleResolution: 'node',
     importHelpers: true,
-    target: 'ES2022',
-    module: 'es2020',
-    lib: ['es2020', 'dom'],
-    types: [],
-    allowSyntheticDefaultImports: true,
-    useDefineForClassFields: false
+    target: 'ES2015',
+    module: 'ES2022',
+    useDefineForClassFields: false,
+    lib: ['ES2022', 'dom']
   },
-  files: ['src/main.ts'],
-  include: ['src/**/*.d.ts'],
   angularCompilerOptions: {
     enableI18nLegacyMessageIdFormat: false,
     strictInjectionParameters: true,

src/app/shared/components/code-box/code-box.component.html

@@ -34,13 +34,19 @@
     }
     <i
       nz-tooltip
-      [nzTooltipTitle]="'app.demo.stackblitz' | i18n"
+      [nzTooltipTitle]="stackblitzTpl"
       (click)="openOnlineIDE()"
       nz-icon
       nzType="thunderbolt"
       nzTheme="fill"
       class="code-box-code-icon"
     ></i>
+    <ng-template #stackblitzTpl>
+      {{ 'app.demo.stackblitz' | i18n }}
+      (
+      <a (click)="openOnlineIDE('StackBlitz', true)">{{ 'app.demo.code-sandbox-cli' | i18n }}</a>
+      )
+    </ng-template>
     <i
       nz-tooltip
       [nzTooltipTitle]="'app.demo.copy' | i18n"

src/app/shared/components/code-box/code-box.component.ts

@@ -102,7 +102,7 @@ export class CodeBoxComponent implements OnInit {
 
   openOnlineIDE(ide: 'StackBlitz' | 'CodeSandbox' = 'StackBlitz', includeCli: boolean = false): void {
     if (ide === 'StackBlitz') {
-      this.codeSrv.openOnStackBlitz(this.item.title, this.item.code);
+      this.codeSrv.openOnStackBlitz(this.item.title, this.item.code, includeCli);
     } else {
       // this.msg.warning(`CodeSandbox does not support Angular 13, pls use StackBlitz!`);
       this.codeSrv.openOnCodeSandbox(this.item.title, this.item.code, includeCli);