- - -
- - - Rocket Ship - - - - - +
+
+
+ - - {{ title }} app is running! - - - Rocket Ship Smoke - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - - Learn Angular - - - - - - - CLI Documentation - - - - - - - - Angular Blog - - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
-
- - - New Component -
- -
- - - Angular Material -
- -
- - - Add PWA Support -
- -
- - - Add Dependency -
- -
- - - Run and Watch Tests + + + + + + + + + + + + + + + +

Hello, {{ title }}

+

Congratulations! Your app is running. 🎉

- -
- - - Build for Production + +
+
+ @for (item of [ + { title: 'Explore the Docs', link: 'https://angular.dev' }, + { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, + { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, + { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, + { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, + ]; track item.title) { + + {{ item.title }} + + + + + } +
+
+ - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build
-
- - -
- - - - - - - - - - - - - Angular CLI Logo - - - - - - - - - - - - - Meetup Logo - - - - - - - Discord Logo - - - - -
- - - - - - Gray Clouds Background - - - -
+ + + + + + + - - - - - - - + diff --git a/docs/ui/getting-started/demo/1__my-app/src/app/app.component.spec.ts b/docs/ui/getting-started/demo/1__my-app/src/app/app.component.spec.ts index 8ffad8959..5119ea23a 100644 --- a/docs/ui/getting-started/demo/1__my-app/src/app/app.component.spec.ts +++ b/docs/ui/getting-started/demo/1__my-app/src/app/app.component.spec.ts @@ -4,9 +4,7 @@ import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], + imports: [AppComponent], }).compileComponents(); }); @@ -16,7 +14,7 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'my-app'`, () => { + it(`should have the 'my-app' title`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app.title).toEqual('my-app'); @@ -25,7 +23,7 @@ describe('AppComponent', () => { it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain('my-app app is running!'); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Hello, my-app'); }); }); diff --git a/docs/ui/getting-started/demo/1__my-app/src/app/app.component.ts b/docs/ui/getting-started/demo/1__my-app/src/app/app.component.ts index 16f9b76ff..0e4a4eb0b 100644 --- a/docs/ui/getting-started/demo/1__my-app/src/app/app.component.ts +++ b/docs/ui/getting-started/demo/1__my-app/src/app/app.component.ts @@ -1,9 +1,11 @@ import { Component } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', + imports: [RouterOutlet], templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + styleUrl: './app.component.scss' }) export class AppComponent { title = 'my-app'; diff --git a/docs/ui/getting-started/demo/1__my-app/src/app/app.config.ts b/docs/ui/getting-started/demo/1__my-app/src/app/app.config.ts new file mode 100644 index 000000000..a1e7d6f86 --- /dev/null +++ b/docs/ui/getting-started/demo/1__my-app/src/app/app.config.ts @@ -0,0 +1,8 @@ +import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { provideRouter } from '@angular/router'; + +import { routes } from './app.routes'; + +export const appConfig: ApplicationConfig = { + providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] +}; diff --git a/docs/ui/getting-started/demo/1__my-app/src/app/app.module.ts b/docs/ui/getting-started/demo/1__my-app/src/app/app.module.ts deleted file mode 100644 index 8dfc1d682..000000000 --- a/docs/ui/getting-started/demo/1__my-app/src/app/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/docs/ui/getting-started/demo/1__my-app/src/app/app.routes.ts b/docs/ui/getting-started/demo/1__my-app/src/app/app.routes.ts new file mode 100644 index 000000000..dc39edb5f --- /dev/null +++ b/docs/ui/getting-started/demo/1__my-app/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = []; diff --git a/docs/ui/getting-started/demo/1__my-app/src/assets/.gitkeep b/docs/ui/getting-started/demo/1__my-app/src/assets/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/docs/ui/getting-started/demo/1__my-app/src/environments/environment.prod.ts b/docs/ui/getting-started/demo/1__my-app/src/environments/environment.prod.ts deleted file mode 100644 index 3612073bc..000000000 --- a/docs/ui/getting-started/demo/1__my-app/src/environments/environment.prod.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: true -}; diff --git a/docs/ui/getting-started/demo/1__my-app/src/environments/environment.ts b/docs/ui/getting-started/demo/1__my-app/src/environments/environment.ts deleted file mode 100644 index f56ff4702..000000000 --- a/docs/ui/getting-started/demo/1__my-app/src/environments/environment.ts +++ /dev/null @@ -1,16 +0,0 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/docs/ui/getting-started/demo/1__my-app/src/favicon.ico b/docs/ui/getting-started/demo/1__my-app/src/favicon.ico deleted file mode 100644 index 997406ad2..000000000 Binary files a/docs/ui/getting-started/demo/1__my-app/src/favicon.ico and /dev/null differ diff --git a/docs/ui/getting-started/demo/1__my-app/src/index.html b/docs/ui/getting-started/demo/1__my-app/src/index.html index cfe98b359..7fa8cd90c 100644 --- a/docs/ui/getting-started/demo/1__my-app/src/index.html +++ b/docs/ui/getting-started/demo/1__my-app/src/index.html @@ -2,7 +2,7 @@ - my-app + MyApp diff --git a/docs/ui/getting-started/demo/1__my-app/src/main.ts b/docs/ui/getting-started/demo/1__my-app/src/main.ts index c7b673cf4..35b00f346 100644 --- a/docs/ui/getting-started/demo/1__my-app/src/main.ts +++ b/docs/ui/getting-started/demo/1__my-app/src/main.ts @@ -1,12 +1,6 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err)); diff --git a/docs/ui/getting-started/demo/1__my-app/src/polyfills.ts b/docs/ui/getting-started/demo/1__my-app/src/polyfills.ts deleted file mode 100644 index 373f538a7..000000000 --- a/docs/ui/getting-started/demo/1__my-app/src/polyfills.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** - * IE11 requires the following for NgClass support on SVG elements - */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js'; // Included with Angular CLI. - - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ diff --git a/docs/ui/getting-started/demo/1__my-app/src/test.ts b/docs/ui/getting-started/demo/1__my-app/src/test.ts deleted file mode 100644 index 204235640..000000000 --- a/docs/ui/getting-started/demo/1__my-app/src/test.ts +++ /dev/null @@ -1,25 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'zone.js/testing'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; - -declare const require: { - context(path: string, deep?: boolean, filter?: RegExp): { - keys(): string[]; - (id: string): T; - }; -}; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() -); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/docs/ui/getting-started/demo/1__my-app/tsconfig.app.json b/docs/ui/getting-started/demo/1__my-app/tsconfig.app.json index 82d91dc4a..3775b37e3 100644 --- a/docs/ui/getting-started/demo/1__my-app/tsconfig.app.json +++ b/docs/ui/getting-started/demo/1__my-app/tsconfig.app.json @@ -1,4 +1,5 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ { "extends": "./tsconfig.json", "compilerOptions": { @@ -6,8 +7,7 @@ "types": [] }, "files": [ - "src/main.ts", - "src/polyfills.ts" + "src/main.ts" ], "include": [ "src/**/*.d.ts" diff --git a/docs/ui/getting-started/demo/1__my-app/tsconfig.json b/docs/ui/getting-started/demo/1__my-app/tsconfig.json index 6df828326..5525117c6 100644 --- a/docs/ui/getting-started/demo/1__my-app/tsconfig.json +++ b/docs/ui/getting-started/demo/1__my-app/tsconfig.json @@ -1,25 +1,22 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ { "compileOnSave": false, "compilerOptions": { - "baseUrl": "./", "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, - "sourceMap": true, - "declaration": false, - "downlevelIteration": true, + "skipLibCheck": true, + "isolatedModules": true, + "esModuleInterop": true, "experimentalDecorators": true, - "moduleResolution": "node", + "moduleResolution": "bundler", "importHelpers": true, - "target": "es2017", - "module": "es2020", - "lib": [ - "es2018", - "dom" - ] + "target": "ES2022", + "module": "ES2022" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/docs/ui/getting-started/demo/1__my-app/tsconfig.spec.json b/docs/ui/getting-started/demo/1__my-app/tsconfig.spec.json index 092345b02..5fb748d92 100644 --- a/docs/ui/getting-started/demo/1__my-app/tsconfig.spec.json +++ b/docs/ui/getting-started/demo/1__my-app/tsconfig.spec.json @@ -1,4 +1,5 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ { "extends": "./tsconfig.json", "compilerOptions": { @@ -7,10 +8,6 @@ "jasmine" ] }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], "include": [ "src/**/*.spec.ts", "src/**/*.d.ts" diff --git a/docs/ui/getting-started/demo/2.1__my-app/src/__styles.scss.md b/docs/ui/getting-started/demo/2.1__my-app/src/__styles.scss.md index 311cd9bd9..aec62d5a1 100644 --- a/docs/ui/getting-started/demo/2.1__my-app/src/__styles.scss.md +++ b/docs/ui/getting-started/demo/2.1__my-app/src/__styles.scss.md @@ -1,3 +1,3 @@ --- -primary: 2,4-6 +primary: 2 --- diff --git a/docs/ui/getting-started/demo/2.1__my-app/src/styles.scss b/docs/ui/getting-started/demo/2.1__my-app/src/styles.scss index 2fa8b917c..17322e5f1 100644 --- a/docs/ui/getting-started/demo/2.1__my-app/src/styles.scss +++ b/docs/ui/getting-started/demo/2.1__my-app/src/styles.scss @@ -1,6 +1,2 @@ /* You can add global styles to this file, and also import other style files */ -@use '../node_modules/@ng-nest/ui/style/core/index.css' as *; - -body { - margin: 0; -} +@import '../node_modules/@ng-nest/ui/style/core/index.css'; diff --git a/docs/ui/getting-started/demo/2.2__my-app/__angular.json.md b/docs/ui/getting-started/demo/2.2__my-app/__angular.json.md index 1e4198d17..8d9d271f8 100644 --- a/docs/ui/getting-started/demo/2.2__my-app/__angular.json.md +++ b/docs/ui/getting-started/demo/2.2__my-app/__angular.json.md @@ -1,3 +1,3 @@ --- -primary: '30' +primary: '32' --- diff --git a/docs/ui/getting-started/demo/2.2__my-app/angular.json b/docs/ui/getting-started/demo/2.2__my-app/angular.json index a9477e102..2aea66044 100644 --- a/docs/ui/getting-started/demo/2.2__my-app/angular.json +++ b/docs/ui/getting-started/demo/2.2__my-app/angular.json @@ -8,9 +8,6 @@ "schematics": { "@schematics/angular:component": { "style": "scss" - }, - "@schematics/angular:application": { - "strict": true } }, "root": "", @@ -18,15 +15,20 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/my-app", "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", + "browser": "src/main.ts", + "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], "styles": ["node_modules/@ng-nest/ui/style/core/index.css", "src/styles.scss"], "scripts": [] }, @@ -35,30 +37,21 @@ "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" - } - ], - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" }, "development": { - "buildOptimizer": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, - "sourceMap": true, - "namedChunks": true + "sourceMap": true } }, "defaultConfiguration": "production" @@ -67,35 +60,34 @@ "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { - "browserTarget": "my-app:build:production" + "buildTarget": "my-app:build:production" }, "development": { - "browserTarget": "my-app:build:development" + "buildTarget": "my-app:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "my-app:build" - } + "builder": "@angular-devkit/build-angular:extract-i18n" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", + "polyfills": ["zone.js", "zone.js/testing"], "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], "styles": ["src/styles.scss"], "scripts": [] } } } } - }, - "defaultProject": "my-app" + } } diff --git a/docs/ui/getting-started/demo/3.1__my-app/src/app/__app.config.ts.md b/docs/ui/getting-started/demo/3.1__my-app/src/app/__app.config.ts.md new file mode 100644 index 000000000..767f601ae --- /dev/null +++ b/docs/ui/getting-started/demo/3.1__my-app/src/app/__app.config.ts.md @@ -0,0 +1,3 @@ +--- +primary: '5, 6, 10, 11' +--- diff --git a/docs/ui/getting-started/demo/3.1__my-app/src/app/__app.module.ts.md b/docs/ui/getting-started/demo/3.1__my-app/src/app/__app.module.ts.md deleted file mode 100644 index b774b2c89..000000000 --- a/docs/ui/getting-started/demo/3.1__my-app/src/app/__app.module.ts.md +++ /dev/null @@ -1,3 +0,0 @@ ---- -primary: '5, 13' ---- diff --git a/docs/ui/getting-started/demo/3.1__my-app/src/app/app.config.ts b/docs/ui/getting-started/demo/3.1__my-app/src/app/app.config.ts new file mode 100644 index 000000000..ded6b6835 --- /dev/null +++ b/docs/ui/getting-started/demo/3.1__my-app/src/app/app.config.ts @@ -0,0 +1,15 @@ +import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { provideRouter } from '@angular/router'; + +import { routes } from './app.routes'; +import { provideHttpClient, withFetch } from '@angular/common/http'; +import { provideAnimations } from '@angular/platform-browser/animations'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideHttpClient(withFetch()), + provideAnimations(), + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes) + ] +}; diff --git a/docs/ui/getting-started/demo/3.1__my-app/src/app/app.module.ts b/docs/ui/getting-started/demo/3.1__my-app/src/app/app.module.ts deleted file mode 100644 index d69575671..000000000 --- a/docs/ui/getting-started/demo/3.1__my-app/src/app/app.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { XButtonComponent } from '@ng-nest/ui/button'; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - XButtonComponent - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/docs/ui/getting-started/demo/3.2__my-app/src/app/__app.component.ts.md b/docs/ui/getting-started/demo/3.2__my-app/src/app/__app.component.ts.md new file mode 100644 index 000000000..5f18247b5 --- /dev/null +++ b/docs/ui/getting-started/demo/3.2__my-app/src/app/__app.component.ts.md @@ -0,0 +1,3 @@ +--- +primary: '2, 7' +--- diff --git a/docs/ui/getting-started/demo/3.2__my-app/src/app/app.component.ts b/docs/ui/getting-started/demo/3.2__my-app/src/app/app.component.ts new file mode 100644 index 000000000..3985f2243 --- /dev/null +++ b/docs/ui/getting-started/demo/3.2__my-app/src/app/app.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { XButtonComponent } from '@ng-nest/ui/button'; + +@Component({ + selector: 'app-root', + standalone: true, + imports: [XButtonComponent], + templateUrl: './app.component.html', + styleUrl: './app.component.scss' +}) +export class AppComponent { + title = 'front'; +} diff --git a/docs/ui/getting-started/demo/3.2__my-app/src/app/app.component.html b/docs/ui/getting-started/demo/3.3__my-app/src/app/app.component.html similarity index 100% rename from docs/ui/getting-started/demo/3.2__my-app/src/app/app.component.html rename to docs/ui/getting-started/demo/3.3__my-app/src/app/app.component.html diff --git a/docs/ui/getting-started/demo/3.2__my-app/src/app/app.component.scss b/docs/ui/getting-started/demo/3.3__my-app/src/app/app.component.scss similarity index 100% rename from docs/ui/getting-started/demo/3.2__my-app/src/app/app.component.scss rename to docs/ui/getting-started/demo/3.3__my-app/src/app/app.component.scss diff --git a/docs/ui/getting-started/demo/3__bash/1.bash b/docs/ui/getting-started/demo/3__bash/1.bash index a24669082..67eba806b 100644 --- a/docs/ui/getting-started/demo/3__bash/1.bash +++ b/docs/ui/getting-started/demo/3__bash/1.bash @@ -1,21 +1,15 @@ $ ng serve -o -... +Initial chunk files | Names | Raw size +polyfills.js | polyfills | 90.20 kB | +main.js | main | 18.18 kB | +styles.css | styles | 96 bytes | -✔ Browser application bundle generation complete. + | Initial total | 108.47 kB -Initial Chunk Files | Names | Size -vendor.js | vendor | 2.08 MB -polyfills.js | polyfills | 508.81 kB -styles.css, styles.js | styles | 381.00 kB -main.js | main | 52.67 kB -runtime.js | runtime | 6.57 kB +Application bundle generation complete. [3.233 seconds] - | Initial Total | 3.01 MB - -Build at: 2021-06-04T00:10:26.608Z - Hash: 1784c41ec3a22ead59dc - Time: 5748ms - -** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** - - -√ Compiled successfully. \ No newline at end of file +Watch mode enabled. Watching for file changes... +NOTE: Raw file sizes do not reflect development server per-request transformations. + ➜ Local: http://localhost:4200/ + ➜ press h + enter to show help diff --git a/docs/ui/getting-started/demo/3__img/1.png b/docs/ui/getting-started/demo/3__img/1.png index e5fe4e4c1..3d69a7f0e 100644 Binary files a/docs/ui/getting-started/demo/3__img/1.png and b/docs/ui/getting-started/demo/3__img/1.png differ diff --git a/docs/ui/getting-started/demo/__bash/1.bash b/docs/ui/getting-started/demo/__bash/1.bash index 3e28e7310..92f8fffca 100644 --- a/docs/ui/getting-started/demo/__bash/1.bash +++ b/docs/ui/getting-started/demo/__bash/1.bash @@ -8,7 +8,7 @@ $ ng --version |___/ -Angular CLI: 18.0.0 +Angular CLI: 19.0.0 Node: 18.19.1 OS: win32 x64 @@ -18,7 +18,7 @@ Ivy Workspace: Package Version ------------------------------------------------------ -@angular-devkit/architect 0.1800.0 (cli-only) -@angular-devkit/core 18.0.0 (cli-only) -@angular-devkit/schematics 18.0.0 (cli-only) -@schematics/angular 18.0.0 (cli-only) \ No newline at end of file +@angular-devkit/architect 0.1900.0 (cli-only) +@angular-devkit/core 19.0.0 (cli-only) +@angular-devkit/schematics 19.0.0 (cli-only) +@schematics/angular 19.0.0 (cli-only) \ No newline at end of file diff --git a/docs/ui/getting-started/readme.en_US.md b/docs/ui/getting-started/readme.en_US.md index 24197d2c9..0793ce841 100644 --- a/docs/ui/getting-started/readme.en_US.md +++ b/docs/ui/getting-started/readme.en_US.md @@ -5,7 +5,7 @@ label: 'Getting Started' # Getting Started -> Please set up the environment before starting, how to set up the environment please check [angular](https://angular.io/guide/setup-local) official tutorial。 +> Please set up the environment before starting, how to set up the environment please check [angular](https://angular.dev/installation) official tutorial。 Run `ng --version` to check the current version, please do not go below the version number. @@ -37,17 +37,22 @@ Or in `angular.json` in `projects/my-app/architect/build/options/styles` attribu ## 3. Add component use +Open the `src/app/app.config.ts` file and add the `provideHttpClient` HTTP request and the `provideAnimations` animation module. + +{{ __3.1\__my-app:src/app/app.config.ts:false }} + Open the `src/app/app.module.ts` file to introduce the `x-button` component module. -{{ __3.1\__my-app:src/app/app.module.ts:false }} +{{ __3.2\__my-app:src/app/app.module.ts:false }} ```primary All components are supported separately, and introducing all components at once can result in a large package size. +All components now support `Zoneless`, and you can add the ` provideExperimentalZonelessChangeDetection()` module in `app.config.ts`, `Zoneless` related configurations can be viewed in the [official documentation](https://angular.dev/guide/experimental/zoneless). ``` Open src/app/app.component.html replaced with the following code, and modify the corresponding SCSS style. -{{ __3.2\__my-app:src/app/app.component.html }} +{{ __3.3\__my-app:src/app/app.component.html }} Then open the command line tool in the my-app project root and use `ng serve -o` to run the project. diff --git a/docs/ui/getting-started/readme.zh_CN.md b/docs/ui/getting-started/readme.zh_CN.md index 4bbfb7540..856d9b68f 100644 --- a/docs/ui/getting-started/readme.zh_CN.md +++ b/docs/ui/getting-started/readme.zh_CN.md @@ -5,7 +5,7 @@ label: '快速上手' # 快速上手 -> 开始前请搭建好环境，如何搭建环境请查看 [angular](https://angular.io/guide/setup-local) 官方教程。 +> 开始前请搭建好环境，如何搭建环境请查看 [angular](https://angular.dev/installation) 官方教程。 运行 `ng --version` 来检查当前版本，请不要低于以下版本号。 @@ -37,19 +37,24 @@ Angular CLI 会安装必要的依赖包。这可能要花几分钟的时间，CL ## 3. 添加组件使用 -打开 `src/app/app.module.ts` 文件引入 `x-button` 组件模块。 +打开 `src/app/app.config.ts` 文件，添加 `provideHttpClient` http请求和 `provideAnimations` 动画模块。 -{{ __3.1\__my-app:src/app/app.module.ts:false }} +{{ __3.1\__my-app:src/app/app.config.ts:false }} + +打开 `src/app/app.component.ts` 文件引入 `x-button` 组件。 + +{{ __3.2\__my-app:src/app/app.component.ts:false }} ```primary 所有的组件只支持单独引入，一次性引入所有组件会导致打包体积比较大。 +支持 `Zoneless` , 可以在 `app.config.ts` 中添加 `provideExperimentalZonelessChangeDetection()` 模块。`Zoneless` 相关配置可以查看 [官方文档](https://angular.dev/guide/experimental/zoneless)。 ``` 打开 src/app/app.component.html 替换成以下的代码，并修改对应的 scss 样式。 -{{ __3.2\__my-app:src/app/app.component.html }} +{{ __3.3\__my-app:src/app/app.component.html }} -然后在 my-app 项目根目录下打开命令行工具使用 ng serve -o 来运行项目。 +然后在 `my-app` 项目根目录下打开命令行工具使用 `ng serve -o` 来运行项目。 {{ __3\__bash:1.bash:false:false }} diff --git a/docs/ui/ng-nest/readme.en_US.md b/docs/ui/ng-nest/readme.en_US.md index 633fd981a..7d101df7a 100644 --- a/docs/ui/ng-nest/readme.en_US.md +++ b/docs/ui/ng-nest/readme.en_US.md @@ -8,14 +8,17 @@ default: true NG-NEST is an open source Web application framework based on Angular and NEST, mainly used for research and development of enterprise-level background products. -- [Angular](https://angular.io/docs) is an application design framework and development platform for creating efficient, complex, sophisticated, single-page applications. +- [Angular](https://angular.dev/overview) is an application design framework and development platform for creating efficient, complex, sophisticated, single-page applications. - [Nest](https://docs.nestjs.com/) is a framework for building efficient, scalable Node.js server-side applications. ## Features - Both clients and servers are built using TypeScript and provide complete type definition files. - High quality Angular components out of the box, updated in sync with Angular. -- Use the OnPush mode to improve performance. +- The component now supports standalone components, with `Angular 19` starting to default to `true`. +- The component has rewritten its internal logic with the `Signal` signal, and parameter passing has also been switched to `InputSignal`. +- The component now fully supports `Zoneless`. +- The template has been switched to the new control flow syntax. - Standardize the code with strict patterns. - Use the VAR in CSS3 to define the theme style. @@ -25,7 +28,7 @@ npm 19.0.0 ## Support Angular version -Angular ^18.0.0 is currently supported by `@ng-nest/ui`. +Angular ^19.0.0 is currently supported by `@ng-nest/ui`. ## Supporting environment @@ -40,7 +43,7 @@ Angular ^18.0.0 is currently supported by `@ng-nest/ui`. ## Basic assumptions -This document assumes that you are already familiar with the basics of [Angular](https://angular.io/docs) and [Nest](https://docs.nestjs.com/). In the document code example is using the latest version of the [TypeScript](https://www.typescriptlang.org/), it will use [type](https://www.typescriptlang.org/docs/handbook/classes.html) to realize the dependency injection, Will also be decorated with [](https://www.typescriptlang.org/docs/handbook/decorators.html) to provide metadata. +This document assumes that you are already familiar with the basics of [Angular](https://angular.dev/overview) and [Nest](https://docs.nestjs.com/). In the document code example is using the latest version of the [TypeScript](https://www.typescriptlang.org/), it will use [type](https://www.typescriptlang.org/docs/handbook/classes.html) to realize the dependency injection, Will also be decorated with [](https://www.typescriptlang.org/docs/handbook/decorators.html) to provide metadata. ## Communication group diff --git a/docs/ui/ng-nest/readme.zh_CN.md b/docs/ui/ng-nest/readme.zh_CN.md index dc8273767..d892d6e5a 100644 --- a/docs/ui/ng-nest/readme.zh_CN.md +++ b/docs/ui/ng-nest/readme.zh_CN.md @@ -8,15 +8,17 @@ default: true NG-NEST 是一个开源的 Web 应用程序框架，基于 Angular 和 Nest ，主要用于研发企业级中后台产品。 -- [Angular](https://angular.cn/docs) 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。 +- [Angular](https://angular.dev/overview) 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。 - [Nest](https://docs.nestjs.com/) 是构建高效、可扩展的 Node.js 服务器端应用程序的框架。 ## 特性 -- 客户端与服务端都使用 TypeScript 构建，提供完整的类型定义文件。 -- 开箱即用的高质量 Angular 组件，与 Angular 保持同步升级。 -- 使用 OnPush 模式提升性能。 -- 使用严格模式规范代码。 +- 客户端与服务端都使用 `TypeScript` 构建，提供完整的类型定义文件。 +- 开箱即用的高质量 `Angular` 组件，与 `Angular` 保持同步升级。 +- 支持独立组件 `standalone`，`angular 19` 开始默认为 `true`。 +- 支持 `InputSignal` 参数，已用 `Signal` 信号重写内部逻辑。 +- 支持 `Zoneless`，添加 `provideExperimentalZonelessChangeDetection`。 +- 模板已切换到新的控制流语法。 - 使用 CSS3 中的 var 来定义主题样式。 ## 当前版本 @@ -25,7 +27,7 @@ npm 19.0.0 ## 支持 Angular 版本 -`@ng-nest/ui` 目前最新支持 Angular ^18.0.0 版本。 +`@ng-nest/ui` 目前最新支持 Angular ^19.0.0 版本。 ## 支持环境 @@ -40,7 +42,7 @@ npm 19.0.0 ## 基本假设 -本文档假设你已经熟悉了 [Angular](https://angular.cn/docs) 和 [Nest](https://docs.nestjs.com/) 的一些基础知识。文档中的代码范例都是使用最新版本的 [TypeScript](https://www.typescriptlang.org/) ,它会用 [类型](https://www.typescriptlang.org/docs/handbook/classes.html) 实现依赖注入，还会用 [装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html) 来提供元数据。 +本文档假设你已经熟悉了 [Angular](https://angular.dev/overview) 和 [Nest](https://docs.nestjs.com/) 的一些基础知识。文档中的代码范例都是使用最新版本的 [TypeScript](https://www.typescriptlang.org/) ,它会用 [类型](https://www.typescriptlang.org/docs/handbook/classes.html) 实现依赖注入，还会用 [装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html) 来提供元数据。 ## 交流群号 diff --git a/lib/ng-nest/ui/doc/style/mixin.scss b/lib/ng-nest/ui/doc/style/mixin.scss index 2224e3173..6363a470e 100644 --- a/lib/ng-nest/ui/doc/style/mixin.scss +++ b/lib/ng-nest/ui/doc/style/mixin.scss @@ -1,5 +1,5 @@ // Doc -@use "sass:map"; +@use 'sass:map'; @use '../../style/params/index.scss' as *; @use './param.scss' as *; @@ -59,6 +59,9 @@ list-style-type: circle; margin-left: 1.25rem; line-height: 1.75rem; + &:not(:first-child) { + margin-top: 0.25rem; + } } } diff --git a/lib/ng-nest/ui/progress/style/mixin.scss b/lib/ng-nest/ui/progress/style/mixin.scss index 78f9db8d5..46626af4b 100644 --- a/lib/ng-nest/ui/progress/style/mixin.scss +++ b/lib/ng-nest/ui/progress/style/mixin.scss @@ -104,7 +104,7 @@ background-color: $x-primary; } &-text { - padding-left: 0.5rem; + margin-left: 0.5rem; display: inline-flex; align-items: center; white-space: nowrap; diff --git a/src/interfaces/en_US-docs.types.ts b/src/interfaces/en_US-docs.types.ts index 1c94f298c..af5c66b10 100644 --- a/src/interfaces/en_US-docs.types.ts +++ b/src/interfaces/en_US-docs.types.ts @@ -14833,7 +14833,7 @@ export const en_US: {[key: string]: AppProp} = { "toType": "boolean", "inputType": "InputSignalWithTransform", "signal": "input", - "label": "Adjust the size of the box", + "label": "Adjust the size of the box, Abandoned", "default": "false", "withConfig": true, "description": "", @@ -14851,7 +14851,7 @@ export const en_US: {[key: string]: AppProp} = { "toType": "number", "inputType": "InputSignalWithTransform", "signal": "input", - "label": "Open the resizable resize, offset screen left", + "label": "Open the resizable resize, offset screen left, Abandoned", "default": "0", "withConfig": false, "description": "", @@ -14869,7 +14869,7 @@ export const en_US: {[key: string]: AppProp} = { "toType": "number", "inputType": "InputSignalWithTransform", "signal": "input", - "label": "Open the resizable resize, offset screen top", + "label": "Open the resizable resize, offset screen top, Abandoned", "default": "0", "withConfig": false, "description": "", diff --git a/src/interfaces/zh_CN-docs.types.ts b/src/interfaces/zh_CN-docs.types.ts index 6999037c7..c1bb5cd8f 100644 --- a/src/interfaces/zh_CN-docs.types.ts +++ b/src/interfaces/zh_CN-docs.types.ts @@ -14833,7 +14833,7 @@ export const zh_CN: {[key: string]: AppProp} = { "toType": "boolean", "inputType": "InputSignalWithTransform", "signal": "input", - "label": "调整弹框的大小", + "label": "调整弹框的大小(弃用)", "default": "false", "withConfig": true, "description": "", @@ -14851,7 +14851,7 @@ export const zh_CN: {[key: string]: AppProp} = { "toType": "number", "inputType": "InputSignalWithTransform", "signal": "input", - "label": "开启 resizable 调整大小，偏移屏幕左边", + "label": "开启 resizable 调整大小，偏移屏幕左边(弃用)", "default": "0", "withConfig": false, "description": "", @@ -14869,7 +14869,7 @@ export const zh_CN: {[key: string]: AppProp} = { "toType": "number", "inputType": "InputSignalWithTransform", "signal": "input", - "label": "开启 resizable 调整大小，偏移屏幕顶部", + "label": "开启 resizable 调整大小，偏移屏幕顶部(弃用)", "default": "0", "withConfig": false, "description": "",