From 7972c3673e7d4812792ff7ec9a8a6084919dfa7f Mon Sep 17 00:00:00 2001 From: Daniel Kimmich Date: Tue, 15 Aug 2023 19:24:28 +0200 Subject: [PATCH 1/2] refactor: convert declarations to standalone --- .../angular-intl-demo/src/app/app.module.ts | 3 ++- .../getting-started.component.ts | 3 +++ .../app/pipes/country/country.component.ts | 15 +++++++++++++ .../app/pipes/currency/currency.component.ts | 17 ++++++++++++++ .../src/app/pipes/date/date.component.ts | 21 ++++++++++++++++++ .../app/pipes/decimal/decimal.component.ts | 17 ++++++++++++++ .../app/pipes/language/language.component.ts | 19 +++++++++++++++- .../src/app/pipes/list/list.component.ts | 15 +++++++++++++ .../app/pipes/percent/percent.component.ts | 17 ++++++++++++++ .../src/app/pipes/pipes.component.ts | 10 ++++++++- .../src/app/pipes/pipes.module.ts | 22 +++++++++---------- .../relative-time/relative-time.component.ts | 21 ++++++++++++++++++ .../src/app/pipes/unit/unit.component.ts | 17 ++++++++++++++ 13 files changed, 182 insertions(+), 15 deletions(-) diff --git a/projects/angular-intl-demo/src/app/app.module.ts b/projects/angular-intl-demo/src/app/app.module.ts index 1853f46d..3652c926 100644 --- a/projects/angular-intl-demo/src/app/app.module.ts +++ b/projects/angular-intl-demo/src/app/app.module.ts @@ -11,7 +11,7 @@ import { AppComponent } from './app.component'; import { GettingStartedComponent } from './getting-started/getting-started.component'; @NgModule({ - declarations: [AppComponent, GettingStartedComponent], + declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, @@ -20,6 +20,7 @@ import { GettingStartedComponent } from './getting-started/getting-started.compo HttpClientModule, MatToolbarModule, MatButtonModule, + GettingStartedComponent, ], providers: [ { diff --git a/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts b/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts index ad5d94a3..28642bb7 100644 --- a/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts +++ b/projects/angular-intl-demo/src/app/getting-started/getting-started.component.ts @@ -1,8 +1,11 @@ import { Component } from '@angular/core'; +import { MarkdownModule } from 'ngx-markdown'; @Component({ selector: 'app-getting-started', templateUrl: './getting-started.component.html', styleUrls: ['./getting-started.component.scss'], + standalone: true, + imports: [MarkdownModule], }) export class GettingStartedComponent {} diff --git a/projects/angular-intl-demo/src/app/pipes/country/country.component.ts b/projects/angular-intl-demo/src/app/pipes/country/country.component.ts index f5b3f146..e0854313 100644 --- a/projects/angular-intl-demo/src/app/pipes/country/country.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/country/country.component.ts @@ -1,4 +1,10 @@ +import { NgFor } from '@angular/common'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatOptionModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatSelectModule } from '@angular/material/select'; +import { IntlCountryPipe } from '../../../../../angular-ecmascript-intl/src/lib/country/intl-country.pipe'; import { languages } from '../../languages'; import { countries } from './countries'; @@ -6,6 +12,15 @@ import { countries } from './countries'; selector: 'app-country', templateUrl: './country.component.html', styleUrls: ['./country.component.scss'], + standalone: true, + imports: [ + MatFormFieldModule, + MatSelectModule, + FormsModule, + NgFor, + MatOptionModule, + IntlCountryPipe, + ], }) export class CountryComponent { languages = languages; diff --git a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts index 444c516c..9cae5ada 100644 --- a/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts @@ -1,4 +1,11 @@ +import { NgFor } from '@angular/common'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatOptionModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; +import { IntlCurrencyPipe } from '../../../../../angular-ecmascript-intl/src/lib/currency/intl-currency.pipe'; import { languages } from '../../languages'; import { currencies } from './currencies'; @@ -6,6 +13,16 @@ import { currencies } from './currencies'; selector: 'app-currency', templateUrl: './currency.component.html', styleUrls: ['./currency.component.scss'], + standalone: true, + imports: [ + MatFormFieldModule, + MatInputModule, + FormsModule, + MatSelectModule, + NgFor, + MatOptionModule, + IntlCurrencyPipe, + ], }) export class CurrencyComponent { enteredNumber = '0.24'; diff --git a/projects/angular-intl-demo/src/app/pipes/date/date.component.ts b/projects/angular-intl-demo/src/app/pipes/date/date.component.ts index 0681bf19..33efe9bb 100644 --- a/projects/angular-intl-demo/src/app/pipes/date/date.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/date/date.component.ts @@ -1,4 +1,13 @@ +import { NgFor } from '@angular/common'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MatOptionModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; +import { IntlDatePipe } from '../../../../../angular-ecmascript-intl/src/lib/date/intl-date.pipe'; import { languages } from '../../languages'; import { getDateString } from '../date-utils'; @@ -6,6 +15,18 @@ import { getDateString } from '../date-utils'; selector: 'app-date', templateUrl: './date.component.html', styleUrls: ['./date.component.scss'], + standalone: true, + imports: [ + MatFormFieldModule, + MatInputModule, + FormsModule, + MatButtonModule, + MatIconModule, + MatSelectModule, + MatOptionModule, + NgFor, + IntlDatePipe, + ], }) export class DateComponent { languages = languages; diff --git a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts index 24a15142..d67008ee 100644 --- a/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts @@ -1,10 +1,27 @@ +import { NgFor } from '@angular/common'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatOptionModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; +import { IntlDecimalPipe } from '../../../../../angular-ecmascript-intl/src/lib/decimal/intl-decimal.pipe'; import { languages } from '../../languages'; @Component({ selector: 'app-decimal', templateUrl: './decimal.component.html', styleUrls: ['./decimal.component.scss'], + standalone: true, + imports: [ + MatFormFieldModule, + MatInputModule, + FormsModule, + MatSelectModule, + MatOptionModule, + NgFor, + IntlDecimalPipe, + ], }) export class DecimalComponent { enteredNumber = '1024.4539'; diff --git a/projects/angular-intl-demo/src/app/pipes/language/language.component.ts b/projects/angular-intl-demo/src/app/pipes/language/language.component.ts index c160caad..d5c13ccd 100644 --- a/projects/angular-intl-demo/src/app/pipes/language/language.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/language/language.component.ts @@ -1,11 +1,28 @@ +import { NgFor } from '@angular/common'; import { Component } from '@angular/core'; -import { IntlLanguagePipeOptions } from '../../../../../angular-ecmascript-intl/src/lib/language/intl-language.pipe'; +import { FormsModule } from '@angular/forms'; +import { MatOptionModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatSelectModule } from '@angular/material/select'; +import { + IntlLanguagePipe, + IntlLanguagePipeOptions, +} from '../../../../../angular-ecmascript-intl/src/lib/language/intl-language.pipe'; import { languages } from '../../languages'; @Component({ selector: 'app-language', templateUrl: './language.component.html', styleUrls: ['./language.component.scss'], + standalone: true, + imports: [ + MatFormFieldModule, + MatSelectModule, + FormsModule, + NgFor, + MatOptionModule, + IntlLanguagePipe, + ], }) export class LanguageComponent { languages = languages; diff --git a/projects/angular-intl-demo/src/app/pipes/list/list.component.ts b/projects/angular-intl-demo/src/app/pipes/list/list.component.ts index 700d4301..697545b9 100644 --- a/projects/angular-intl-demo/src/app/pipes/list/list.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/list/list.component.ts @@ -1,5 +1,11 @@ +import { NgFor } from '@angular/common'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatOptionModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatSelectModule } from '@angular/material/select'; import { IntlListPipeOptions } from 'projects/angular-ecmascript-intl/src/lib/list/intl-list.pipe'; +import { IntlListPipe } from '../../../../../angular-ecmascript-intl/src/lib/list/intl-list.pipe'; import { languages } from '../../languages'; import { list } from './list'; @@ -7,6 +13,15 @@ import { list } from './list'; selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.scss'], + standalone: true, + imports: [ + MatFormFieldModule, + MatSelectModule, + FormsModule, + NgFor, + MatOptionModule, + IntlListPipe, + ], }) export class ListComponent { languages = languages; diff --git a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts index 1e081b01..6362bc64 100644 --- a/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts @@ -1,10 +1,27 @@ +import { NgFor } from '@angular/common'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatOptionModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; +import { IntlPercentPipe } from '../../../../../angular-ecmascript-intl/src/lib/percent/intl-percent.pipe'; import { languages } from '../../languages'; @Component({ selector: 'app-percent', templateUrl: './percent.component.html', styleUrls: ['./percent.component.scss'], + standalone: true, + imports: [ + MatFormFieldModule, + MatInputModule, + FormsModule, + MatSelectModule, + MatOptionModule, + NgFor, + IntlPercentPipe, + ], }) export class PercentComponent { enteredNumber = '0.24'; diff --git a/projects/angular-intl-demo/src/app/pipes/pipes.component.ts b/projects/angular-intl-demo/src/app/pipes/pipes.component.ts index 093a4648..8c706af3 100644 --- a/projects/angular-intl-demo/src/app/pipes/pipes.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/pipes.component.ts @@ -1,10 +1,18 @@ import { Component } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import { MatTabsModule } from '@angular/material/tabs'; +import { + ActivatedRoute, + RouterLink, + RouterLinkActive, + RouterOutlet, +} from '@angular/router'; @Component({ selector: 'app-pipes', templateUrl: './pipes.component.html', styleUrls: ['./pipes.component.scss'], + standalone: true, + imports: [MatTabsModule, RouterLink, RouterLinkActive, RouterOutlet], }) export class PipesComponent { constructor(readonly route: ActivatedRoute) {} diff --git a/projects/angular-intl-demo/src/app/pipes/pipes.module.ts b/projects/angular-intl-demo/src/app/pipes/pipes.module.ts index fab6bec1..0604c658 100644 --- a/projects/angular-intl-demo/src/app/pipes/pipes.module.ts +++ b/projects/angular-intl-demo/src/app/pipes/pipes.module.ts @@ -20,18 +20,6 @@ import { RelativeTimeComponent } from './relative-time/relative-time.component'; import { UnitComponent } from './unit/unit.component'; @NgModule({ - declarations: [ - DateComponent, - LanguageComponent, - DecimalComponent, - PercentComponent, - CurrencyComponent, - PipesComponent, - CountryComponent, - UnitComponent, - ListComponent, - RelativeTimeComponent, - ], imports: [ CommonModule, PipesRoutingModule, @@ -42,6 +30,16 @@ import { UnitComponent } from './unit/unit.component'; MatInputModule, MatButtonModule, MatIconModule, + DateComponent, + LanguageComponent, + DecimalComponent, + PercentComponent, + CurrencyComponent, + PipesComponent, + CountryComponent, + UnitComponent, + ListComponent, + RelativeTimeComponent, ], }) export class PipesModule {} diff --git a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts index d955f291..788c25b2 100644 --- a/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/relative-time/relative-time.component.ts @@ -1,5 +1,14 @@ +import { NgFor } from '@angular/common'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MatOptionModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; import { IntlRelativeTimePipeOptions } from 'projects/angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe'; +import { IntlRelativeTimePipe } from '../../../../../angular-ecmascript-intl/src/lib/relative-time/relative-time.pipe'; import { languages } from '../../languages'; import { getDateString } from '../date-utils'; @@ -7,6 +16,18 @@ import { getDateString } from '../date-utils'; selector: 'app-relative-time', templateUrl: './relative-time.component.html', styleUrls: ['./relative-time.component.scss'], + standalone: true, + imports: [ + MatFormFieldModule, + MatInputModule, + FormsModule, + MatButtonModule, + MatIconModule, + MatSelectModule, + MatOptionModule, + NgFor, + IntlRelativeTimePipe, + ], }) export class RelativeTimeComponent { selectedDate = getDateString(new Date(new Date().getTime() - 60000)); diff --git a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts index 0a5b497b..90b3b31e 100644 --- a/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts +++ b/projects/angular-intl-demo/src/app/pipes/unit/unit.component.ts @@ -1,4 +1,11 @@ +import { NgFor } from '@angular/common'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatOptionModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; +import { IntlUnitPipe } from '../../../../../angular-ecmascript-intl/src/lib/unit/intl-unit.pipe'; import { languages } from '../../languages'; import { units } from './units'; @@ -6,6 +13,16 @@ import { units } from './units'; selector: 'app-unit', templateUrl: './unit.component.html', styleUrls: ['./unit.component.scss'], + standalone: true, + imports: [ + MatFormFieldModule, + MatInputModule, + FormsModule, + MatSelectModule, + NgFor, + MatOptionModule, + IntlUnitPipe, + ], }) export class UnitComponent { enteredNumber = '1'; From ff794232f154c1227a0732df22185e6896380434 Mon Sep 17 00:00:00 2001 From: Daniel Kimmich Date: Tue, 15 Aug 2023 19:32:30 +0200 Subject: [PATCH 2/2] docs: switch to standalone bootstrapping API --- .../src/app/app.component.ts | 5 +++ .../angular-intl-demo/src/app/app.module.ts | 35 ---------------- projects/angular-intl-demo/src/main.ts | 41 +++++++++++++++---- 3 files changed, 39 insertions(+), 42 deletions(-) delete mode 100644 projects/angular-intl-demo/src/app/app.module.ts diff --git a/projects/angular-intl-demo/src/app/app.component.ts b/projects/angular-intl-demo/src/app/app.component.ts index ba8e2e0e..cb9e6098 100644 --- a/projects/angular-intl-demo/src/app/app.component.ts +++ b/projects/angular-intl-demo/src/app/app.component.ts @@ -1,8 +1,13 @@ import { Component } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { RouterLink, RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], + standalone: true, + imports: [MatToolbarModule, MatButtonModule, RouterLink, RouterOutlet], }) export class AppComponent {} diff --git a/projects/angular-intl-demo/src/app/app.module.ts b/projects/angular-intl-demo/src/app/app.module.ts deleted file mode 100644 index 3652c926..00000000 --- a/projects/angular-intl-demo/src/app/app.module.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { HttpClientModule } from '@angular/common/http'; -import { NgModule } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; -import { MatToolbarModule } from '@angular/material/toolbar'; -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MarkdownModule } from 'ngx-markdown'; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { GettingStartedComponent } from './getting-started/getting-started.component'; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - AppRoutingModule, - BrowserAnimationsModule, - MarkdownModule.forRoot(), - HttpClientModule, - MatToolbarModule, - MatButtonModule, - GettingStartedComponent, - ], - providers: [ - { - provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, - useValue: { - subscriptSizing: 'dynamic', - }, - }, - ], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/projects/angular-intl-demo/src/main.ts b/projects/angular-intl-demo/src/main.ts index 84b08599..286431e9 100644 --- a/projects/angular-intl-demo/src/main.ts +++ b/projects/angular-intl-demo/src/main.ts @@ -1,8 +1,35 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import { + provideHttpClient, + withInterceptorsFromDi, +} from '@angular/common/http'; +import { importProvidersFrom } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { MarkdownModule } from 'ngx-markdown'; +import { AppRoutingModule } from './app/app-routing.module'; +import { AppComponent } from './app/app.component'; -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => { - console.error(err); - }); +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom( + BrowserModule, + AppRoutingModule, + MarkdownModule.forRoot(), + MatToolbarModule, + MatButtonModule, + ), + { + provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, + useValue: { + subscriptSizing: 'dynamic', + }, + }, + provideAnimations(), + provideHttpClient(withInterceptorsFromDi()), + ], +}).catch((err) => { + console.error(err); +});