From 9246db8d748d160285fe2f9acf75346860caefba Mon Sep 17 00:00:00 2001 From: cipchk Date: Thu, 18 Jan 2024 18:51:02 +0800 Subject: [PATCH] chore(site): update Angular configuration and dependencies --- src/app/core/code/code.service.ts | 80 +++++++++++-------- src/app/core/code/files/angular.json.ts | 11 +-- src/app/core/code/files/package.json.ts | 40 +++++----- src/app/core/code/files/tsconfig.json.ts | 16 ++-- .../code-box/code-box.component.html | 8 +- .../components/code-box/code-box.component.ts | 2 +- 6 files changed, 84 insertions(+), 73 deletions(-) diff --git a/src/app/core/code/code.service.ts b/src/app/core/code/code.service.ts index 2f6d7443d..8b5dd782e 100644 --- a/src/app/core/code/code.service.ts +++ b/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> { 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 = { ...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 { + async openOnStackBlitz(title: string, appComponentCode: string, includeCli: boolean = false): Promise { 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 = { + '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), ...(packageJson.devDependencies as Record) }, - 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: { diff --git a/src/app/core/code/files/angular.json.ts b/src/app/core/code/files/angular.json.ts index 092a28133..30c84eae5 100644 --- a/src/app/core/code/files/angular.json.ts +++ b/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 diff --git a/src/app/core/code/files/package.json.ts b/src/app/core/code/files/package.json.ts index 3e2eeaa7b..63e5a0ff2 100644 --- a/src/app/core/code/files/package.json.ts +++ b/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' } }; diff --git a/src/app/core/code/files/tsconfig.json.ts b/src/app/core/code/files/tsconfig.json.ts index afc557c7d..719efc08b 100644 --- a/src/app/core/code/files/tsconfig.json.ts +++ b/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, diff --git a/src/app/shared/components/code-box/code-box.component.html b/src/app/shared/components/code-box/code-box.component.html index 6d936b9b7..14b98882d 100644 --- a/src/app/shared/components/code-box/code-box.component.html +++ b/src/app/shared/components/code-box/code-box.component.html @@ -34,13 +34,19 @@ } + + {{ 'app.demo.stackblitz' | i18n }} + ( + {{ 'app.demo.code-sandbox-cli' | i18n }} + ) +