From 85cc6fed251d7742bda7410809545afd5bad391b Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Mon, 22 Jun 2026 17:11:49 +0400 Subject: [PATCH 1/2] update examples to standalone --- .../api-authorization.module.spec.ts | 13 ------ .../api-authorization.module.ts | 22 ---------- .../login-menu/login-menu.component.ts | 5 ++- .../login/login.component.ts | 4 +- .../logout/logout.component.ts | 4 +- .../src/app/app.component.ts | 5 ++- .../src/app/app.module.ts | 41 ----------------- .../src/app/app.server.module.ts | 10 ----- .../src/app/home/home.component.ts | 2 +- .../src/app/nav-menu/nav-menu.component.ts | 6 ++- .../app/report-list/report.list.component.ts | 5 ++- .../src/app/reportdesigner/report-designer.ts | 8 ++-- .../src/app/reportviewer/report-viewer.ts | 4 +- .../src/main.ts | 44 +++++++++++++++---- .../src/proxy.conf.js | 18 +++----- .../Controllers/ReportDesignerController.cs | 6 +-- 16 files changed, 76 insertions(+), 121 deletions(-) delete mode 100644 AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/api-authorization.module.spec.ts delete mode 100644 AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/api-authorization.module.ts delete mode 100644 AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.module.ts delete mode 100644 AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.server.module.ts diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/api-authorization.module.spec.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/api-authorization.module.spec.ts deleted file mode 100644 index f6a4b29..0000000 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/api-authorization.module.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { ApiAuthorizationModule } from './api-authorization.module'; - -describe('ApiAuthorizationModule', () => { - let apiAuthorizationModule: ApiAuthorizationModule; - - beforeEach(() => { - apiAuthorizationModule = new ApiAuthorizationModule(); - }); - - it('should create an instance', () => { - expect(apiAuthorizationModule).toBeTruthy(); - }); -}); diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/api-authorization.module.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/api-authorization.module.ts deleted file mode 100644 index 36770eb..0000000 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/api-authorization.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { LoginMenuComponent } from './login-menu/login-menu.component'; -import { LoginComponent } from './login/login.component'; -import { LogoutComponent } from './logout/logout.component'; -import { RouterModule } from '@angular/router'; -import { ApplicationPaths } from './api-authorization.constants'; -import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; - -@NgModule({ declarations: [LoginMenuComponent, LoginComponent, LogoutComponent], - exports: [LoginMenuComponent, LoginComponent, LogoutComponent], imports: [CommonModule, - RouterModule.forChild([ - { path: ApplicationPaths.Register, component: LoginComponent }, - { path: ApplicationPaths.Profile, component: LoginComponent }, - { path: ApplicationPaths.Login, component: LoginComponent }, - { path: ApplicationPaths.LoginFailed, component: LoginComponent }, - { path: ApplicationPaths.LoginCallback, component: LoginComponent }, - { path: ApplicationPaths.LogOut, component: LogoutComponent }, - { path: ApplicationPaths.LoggedOut, component: LogoutComponent }, - { path: ApplicationPaths.LogOutCallback, component: LogoutComponent } - ])], providers: [provideHttpClient(withInterceptorsFromDi())] }) -export class ApiAuthorizationModule { } diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.ts index 9f526c3..152be8a 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.ts @@ -2,12 +2,15 @@ import { Component, OnInit } from '@angular/core'; import { AuthorizeService } from '../authorize.service'; import { Observable } from 'rxjs'; import { map, tap } from 'rxjs/operators'; +import { RouterLink } from '@angular/router'; +import { NgIf, AsyncPipe } from '@angular/common'; @Component({ selector: 'app-login-menu', templateUrl: './login-menu.component.html', styleUrls: ['./login-menu.component.css'], - standalone: false + standalone: true, + imports: [NgIf, RouterLink, AsyncPipe] }) export class LoginMenuComponent implements OnInit { public isAuthenticated!: Observable; diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login/login.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login/login.component.ts index b7ee0d2..5a9c72a 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login/login.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login/login.component.ts @@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router'; import { BehaviorSubject } from 'rxjs'; import { LoginActions, QueryParameterNames, ApplicationPaths, ReturnUrlType } from '../api-authorization.constants'; import { environment } from '../../environments/environment'; +import { AsyncPipe } from '@angular/common'; // The main responsibility of this component is to handle the user's login process. // This is the starting point for the login process. Any component that needs to authenticate @@ -13,7 +14,8 @@ import { environment } from '../../environments/environment'; selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], - standalone: false + standalone: true, + imports: [AsyncPipe] }) export class LoginComponent implements OnInit { public message = new BehaviorSubject(null); diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/logout/logout.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/logout/logout.component.ts index 06d72f1..79a491a 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/logout/logout.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/logout/logout.component.ts @@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs'; import { ActivatedRoute, Router } from '@angular/router'; import { take } from 'rxjs/operators'; import { LogoutActions, ApplicationPaths, ReturnUrlType } from '../api-authorization.constants'; +import { AsyncPipe } from '@angular/common'; // The main responsibility of this component is to handle the user's logout process. // This is the starting point for the logout process, which is usually initiated when a @@ -12,7 +13,8 @@ import { LogoutActions, ApplicationPaths, ReturnUrlType } from '../api-authoriza selector: 'app-logout', templateUrl: './logout.component.html', styleUrls: ['./logout.component.css'], - standalone: false + standalone: true, + imports: [AsyncPipe] }) export class LogoutComponent implements OnInit { public message = new BehaviorSubject(null); diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.component.ts index 10d11ef..3f723da 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.component.ts @@ -1,9 +1,12 @@ import { Component } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; +import { NavMenuComponent } from './nav-menu/nav-menu.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - standalone: false + standalone: true, + imports: [NavMenuComponent, RouterOutlet] }) export class AppComponent { title = 'app'; diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.module.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.module.ts deleted file mode 100644 index 911873e..0000000 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.module.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { NavMenuComponent } from './nav-menu/nav-menu.component'; -import { DxReportViewerModule, DxReportDesignerModule } from 'devexpress-reporting-angular'; -import { HomeComponent } from './home/home.component'; -import { ReportListComponent } from './report-list/report.list.component'; - -import { ReportDesignerComponent } from './reportdesigner/report-designer'; -import { ReportViewerComponent } from './reportviewer/report-viewer'; -import { ApiAuthorizationModule } from '../api-authorization/api-authorization.module'; -import { AuthorizeGuard } from '../api-authorization/authorize.guard'; -import { AuthorizeInterceptor } from '../api-authorization/authorize.interceptor'; - -@NgModule({ declarations: [ - AppComponent, - NavMenuComponent, - HomeComponent, - ReportViewerComponent, - ReportDesignerComponent, - ReportListComponent - ], - bootstrap: [AppComponent], imports: [BrowserModule, - FormsModule, - DxReportViewerModule, - DxReportDesignerModule, - ApiAuthorizationModule, - RouterModule.forRoot([ - { path: '', component: HomeComponent, pathMatch: 'full' }, - { path: 'designer', component: ReportDesignerComponent, canActivate: [AuthorizeGuard] }, - { path: 'viewer', component: ReportViewerComponent, canActivate: [AuthorizeGuard] }, - { path: 'report-list', component: ReportListComponent, canActivate: [AuthorizeGuard] }, - ])], providers: [ - { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }, - provideHttpClient(withInterceptorsFromDi()) - ] }) -export class AppModule { } diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.server.module.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.server.module.ts deleted file mode 100644 index 316380b..0000000 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.server.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { ServerModule } from '@angular/platform-server'; -import { AppComponent } from './app.component'; -import { AppModule } from './app.module'; - -@NgModule({ - imports: [AppModule, ServerModule], - bootstrap: [AppComponent] -}) -export class AppServerModule { } diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/home/home.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/home/home.component.ts index 948fb73..ca3cf32 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/home/home.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/home/home.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', - standalone: false + standalone: true }) export class HomeComponent { } diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.ts index 0ce4aba..9d15075 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.ts @@ -1,10 +1,14 @@ import { Component } from '@angular/core'; +import { LoginMenuComponent } from '../../api-authorization/login-menu/login-menu.component'; +import { NgClass } from '@angular/common'; +import { RouterLink, RouterLinkActive } from '@angular/router'; @Component({ selector: 'app-nav-menu', templateUrl: './nav-menu.component.html', styleUrls: ['./nav-menu.component.css'], - standalone: false + standalone: true, + imports: [RouterLink, NgClass, LoginMenuComponent, RouterLinkActive] }) export class NavMenuComponent { isExpanded = false; diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.ts index 34e34a4..2bb2dc2 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.ts @@ -1,11 +1,14 @@ import { Component, Inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { environment } from '../../environments/environment'; +import { RouterLink, RouterLinkActive } from '@angular/router'; +import { NgFor } from '@angular/common'; @Component({ selector: 'report-list-component', templateUrl: './report.list.component.html', - standalone: false + standalone: true, + imports: [NgFor, RouterLink, RouterLinkActive] }) export class ReportListComponent { reportList?: ReportItem[]; diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.ts index a7dc76e..9b34bec 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.ts @@ -1,9 +1,10 @@ import { fetchSetup } from "@devexpress/analytics-core/analytics-utils" -import { Component, Inject, ViewEncapsulation, OnInit } from '@angular/core'; +import { Component, ViewEncapsulation, OnInit } from '@angular/core'; +import { environment } from "../../environments/environment"; import { AuthorizeService } from '../../api-authorization/authorize.service'; import * as ko from 'knockout'; import { ActivatedRoute } from '@angular/router'; -import { environment } from "../../environments/environment"; +import { DxReportDesignerModule, DxReportViewerModule } from "devexpress-reporting-angular"; @Component({ selector: 'report-designer', @@ -19,7 +20,8 @@ import { environment } from "../../environments/environment"; "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css", "../../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css" ], - standalone: false + standalone: true, + imports: [DxReportDesignerModule, DxReportViewerModule] }) export class ReportDesignerComponent implements OnInit { diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.ts index ce15af3..0146a4e 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.ts @@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router'; import { fetchSetup } from '@devexpress/analytics-core/analytics-utils'; import * as ko from 'knockout'; import { AuthorizeService } from '../../api-authorization/authorize.service'; +import { DxReportViewerModule, DxReportDesignerModule } from 'devexpress-reporting-angular'; @Component({ selector: 'report-viewer', @@ -14,7 +15,8 @@ import { AuthorizeService } from '../../api-authorization/authorize.service'; "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.blue.light.css", "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css" ], - standalone: false + standalone: true, + imports: [DxReportViewerModule, DxReportDesignerModule] }) export class ReportViewerComponent implements OnInit { get reportUrl() { diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/main.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/main.ts index da5dfe0..d906340 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/main.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/main.ts @@ -1,14 +1,40 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppComponent } from './app/app.component'; +import { ReportListComponent } from './app/report-list/report.list.component'; +import { ReportViewerComponent } from './app/reportviewer/report-viewer'; +import { AuthorizeGuard } from './api-authorization/authorize.guard'; +import { ReportDesignerComponent } from './app/reportdesigner/report-designer'; +import { HomeComponent } from './app/home/home.component'; +import { provideRouter } from '@angular/router'; +import { LoginComponent } from './api-authorization/login/login.component'; +import { LogoutComponent } from './api-authorization/logout/logout.component'; +import { ApplicationPaths } from './api-authorization/api-authorization.constants'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { AuthorizeInterceptor } from './api-authorization/authorize.interceptor'; +import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; -import { AppModule } from './app/app.module'; - -export function getBaseUrl() { +function getBaseUrl() { return document.getElementsByTagName('base')[0].href; } -const providers = [ - { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] } -]; - -platformBrowserDynamic(providers).bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }, + { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }, + provideHttpClient(withInterceptorsFromDi()), + provideRouter([ + { path: '', component: HomeComponent, pathMatch: 'full' }, + { path: 'designer', component: ReportDesignerComponent, canActivate: [AuthorizeGuard] }, + { path: 'viewer', component: ReportViewerComponent, canActivate: [AuthorizeGuard] }, + { path: 'report-list', component: ReportListComponent, canActivate: [AuthorizeGuard] }, + { path: ApplicationPaths.Login, component: LoginComponent }, + { path: ApplicationPaths.LoginFailed, component: LoginComponent }, + { path: ApplicationPaths.LoginCallback, component: LoginComponent }, + { path: ApplicationPaths.Register, component: LoginComponent }, + { path: ApplicationPaths.Profile, component: LoginComponent }, + { path: ApplicationPaths.LogOut, component: LogoutComponent }, + { path: ApplicationPaths.LoggedOut, component: LogoutComponent }, + { path: ApplicationPaths.LogOutCallback, component: LogoutComponent }, + ]) + ] +}) .catch(err => console.log(err)); diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/proxy.conf.js b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/proxy.conf.js index ac1a288..f41b0c4 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/proxy.conf.js +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/proxy.conf.js @@ -1,16 +1,10 @@ const { env } = require('process'); const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` : - env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:5001/'; + env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:5001'; -const PROXY_CONFIG = [ - { - context: [ - "/DXXRD", "/DXXQB", "/DXXRDV" - ], - target, - secure: false - } -] - -module.exports = PROXY_CONFIG; \ No newline at end of file +module.exports = { + "/DXXRD": { target, secure: false }, + "/DXXQB": { target, secure: false }, + "/DXXRDV": { target, secure: false } +}; \ No newline at end of file diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Server/Controllers/ReportDesignerController.cs b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Server/Controllers/ReportDesignerController.cs index 0b28456..2e0fb0a 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Server/Controllers/ReportDesignerController.cs +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Server/Controllers/ReportDesignerController.cs @@ -18,9 +18,9 @@ public object GetReportDesignerModel([FromForm] string reportUrl, reportDesignerModel .Report(reportUrl) .DataSources(dataSources) - .DesignerUri("/DXXRDAngular") - .ViewerUri("/DXXRDVAngular") - .QueryBuilderUri("/DXXQBAngular") + .DesignerUri("DXXRDAngular") + .ViewerUri("DXXRDVAngular") + .QueryBuilderUri("DXXQBAngular") .BuildJsonModel(); var model = reportDesignerModel.BuildModel(); var modelJson = modelGenerator.GetJsonModelScript(model); From 6ea05b90f5587054affc997ab1afccd4fa4bcf7f Mon Sep 17 00:00:00 2001 From: Amirzhan Alimov Date: Wed, 24 Jun 2026 18:04:10 +0500 Subject: [PATCH 2/2] refactored --- .../login-menu/login-menu.component.html | 37 +++++++++++-------- .../login-menu/login-menu.component.ts | 7 ++-- .../login/login.component.ts | 1 - .../logout/logout.component.ts | 1 - .../src/app/app.component.ts | 1 - .../src/app/home/home.component.ts | 3 +- .../src/app/nav-menu/nav-menu.component.html | 7 ++-- .../src/app/nav-menu/nav-menu.component.ts | 12 +++--- .../report-list/report.list.component.html | 18 +++++---- .../app/report-list/report.list.component.ts | 6 +-- .../app/reportdesigner/report-designer.html | 2 +- .../src/app/reportdesigner/report-designer.ts | 14 ++----- .../src/app/reportviewer/report-viewer.html | 2 +- .../src/app/reportviewer/report-viewer.ts | 14 ++----- 14 files changed, 53 insertions(+), 72 deletions(-) diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.html b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.html index 30fa656..792315d 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.html +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.html @@ -1,16 +1,21 @@ - - +@if (isAuthenticated | async; as authenticated) { + @if (authenticated) { + + } @else if (!authenticated) { + + } +} diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.ts index 152be8a..918f2bc 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login-menu/login-menu.component.ts @@ -1,16 +1,15 @@ import { Component, OnInit } from '@angular/core'; import { AuthorizeService } from '../authorize.service'; import { Observable } from 'rxjs'; -import { map, tap } from 'rxjs/operators'; +import { map } from 'rxjs/operators'; import { RouterLink } from '@angular/router'; -import { NgIf, AsyncPipe } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; @Component({ selector: 'app-login-menu', templateUrl: './login-menu.component.html', styleUrls: ['./login-menu.component.css'], - standalone: true, - imports: [NgIf, RouterLink, AsyncPipe] + imports: [RouterLink, AsyncPipe] }) export class LoginMenuComponent implements OnInit { public isAuthenticated!: Observable; diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login/login.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login/login.component.ts index 5a9c72a..1b19941 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login/login.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/login/login.component.ts @@ -14,7 +14,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], - standalone: true, imports: [AsyncPipe] }) export class LoginComponent implements OnInit { diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/logout/logout.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/logout/logout.component.ts index 79a491a..89522a9 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/logout/logout.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/api-authorization/logout/logout.component.ts @@ -13,7 +13,6 @@ import { AsyncPipe } from '@angular/common'; selector: 'app-logout', templateUrl: './logout.component.html', styleUrls: ['./logout.component.css'], - standalone: true, imports: [AsyncPipe] }) export class LogoutComponent implements OnInit { diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.component.ts index 3f723da..286bfde 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/app.component.ts @@ -5,7 +5,6 @@ import { NavMenuComponent } from './nav-menu/nav-menu.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - standalone: true, imports: [NavMenuComponent, RouterOutlet] }) export class AppComponent { diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/home/home.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/home/home.component.ts index ca3cf32..2c0d67b 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/home/home.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/home/home.component.ts @@ -2,8 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-home', - templateUrl: './home.component.html', - standalone: true + templateUrl: './home.component.html' }) export class HomeComponent { } diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.html b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.html index 5b859e3..5c6b638 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.html +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.html @@ -10,14 +10,13 @@ data-toggle="collapse" data-target=".navbar-collapse" aria-label="Toggle navigation" - [attr.aria-expanded]="isExpanded" - (click)="toggle()" + [attr.aria-expanded]="isExpanded()" + (click)="toggle()" > >
    diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.ts index 9d15075..dd5f12e 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/nav-menu/nav-menu.component.ts @@ -1,23 +1,21 @@ -import { Component } from '@angular/core'; +import { Component, signal } from '@angular/core'; import { LoginMenuComponent } from '../../api-authorization/login-menu/login-menu.component'; -import { NgClass } from '@angular/common'; import { RouterLink, RouterLinkActive } from '@angular/router'; @Component({ selector: 'app-nav-menu', templateUrl: './nav-menu.component.html', styleUrls: ['./nav-menu.component.css'], - standalone: true, - imports: [RouterLink, NgClass, LoginMenuComponent, RouterLinkActive] + imports: [RouterLink, LoginMenuComponent, RouterLinkActive] }) export class NavMenuComponent { - isExpanded = false; + protected readonly isExpanded = signal(false); collapse() { - this.isExpanded = false; + this.isExpanded.set(false); } toggle() { - this.isExpanded = !this.isExpanded; + this.isExpanded.update(value => !value); } } diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.html b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.html index 6feb998..72e889a 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.html +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.html @@ -1,12 +1,14 @@

    Reports

      -
    • - {{reportItem.title}} -
      -
      - Show - Edit + @for (reportItem of reportList; track reportItem.id) { +
    • + {{reportItem.title}} +
      +
      + Show + Edit +
      -
- + + } diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.ts index 2bb2dc2..f4b4f56 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/report-list/report.list.component.ts @@ -1,14 +1,12 @@ -import { Component, Inject } from '@angular/core'; +import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { environment } from '../../environments/environment'; import { RouterLink, RouterLinkActive } from '@angular/router'; -import { NgFor } from '@angular/common'; @Component({ selector: 'report-list-component', templateUrl: './report.list.component.html', - standalone: true, - imports: [NgFor, RouterLink, RouterLinkActive] + imports: [RouterLink, RouterLinkActive] }) export class ReportListComponent { reportList?: ReportItem[]; diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.html b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.html index 882433e..b4b689c 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.html +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.html @@ -1,4 +1,4 @@ - + diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.ts index 9b34bec..484d121 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportdesigner/report-designer.ts @@ -1,8 +1,7 @@ import { fetchSetup } from "@devexpress/analytics-core/analytics-utils" -import { Component, ViewEncapsulation, OnInit } from '@angular/core'; +import { Component, ViewEncapsulation, OnInit, signal } from '@angular/core'; import { environment } from "../../environments/environment"; import { AuthorizeService } from '../../api-authorization/authorize.service'; -import * as ko from 'knockout'; import { ActivatedRoute } from '@angular/router'; import { DxReportDesignerModule, DxReportViewerModule } from "devexpress-reporting-angular"; @@ -20,20 +19,13 @@ import { DxReportDesignerModule, DxReportViewerModule } from "devexpress-reporti "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css", "../../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css" ], - standalone: true, imports: [DxReportDesignerModule, DxReportViewerModule] }) export class ReportDesignerComponent implements OnInit { getDesignerModelAction = "api/ReportDesignerSetup/GetReportDesignerModel"; hostUrl = environment.serverUri; - get reportUrl() { - return this.koReportUrl(); - }; - set reportUrl(newUrl) { - this.koReportUrl(newUrl); - } - koReportUrl = ko.observable(''); + reportUrl = signal(''); constructor(private authorize: AuthorizeService, private activateRoute: ActivatedRoute) { this.authorize.getAccessToken() @@ -48,7 +40,7 @@ export class ReportDesignerComponent implements OnInit { ngOnInit() { if(this.activateRoute.snapshot.queryParams['reportId']) { - this.reportUrl = this.activateRoute.snapshot.queryParams['reportId']; + this.reportUrl.set(this.activateRoute.snapshot.queryParams['reportId']); } } } diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.html b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.html index a36a84c..668d155 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.html +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.html @@ -1,4 +1,4 @@ - + diff --git a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.ts b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.ts index 0146a4e..14bd348 100644 --- a/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.ts +++ b/AspNetCore.Reporting.Angular/AspNetCore.Reporting.Angular.Client/src/app/reportviewer/report-viewer.ts @@ -1,7 +1,6 @@ -import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, Inject, OnInit, ViewEncapsulation, signal } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { fetchSetup } from '@devexpress/analytics-core/analytics-utils'; -import * as ko from 'knockout'; import { AuthorizeService } from '../../api-authorization/authorize.service'; import { DxReportViewerModule, DxReportDesignerModule } from 'devexpress-reporting-angular'; @@ -15,17 +14,10 @@ import { DxReportViewerModule, DxReportDesignerModule } from 'devexpress-reporti "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.blue.light.css", "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css" ], - standalone: true, imports: [DxReportViewerModule, DxReportDesignerModule] }) export class ReportViewerComponent implements OnInit { - get reportUrl() { - return this.koReportUrl(); - }; - set reportUrl(newUrl) { - this.koReportUrl(newUrl); - } - koReportUrl = ko.observable(''); + reportUrl = signal(''); invokeAction: string = '/DXXRDVAngular'; useSameTabExport = true; @@ -44,7 +36,7 @@ export class ReportViewerComponent implements OnInit { ngOnInit() { if(this.activateRoute.snapshot.queryParams['reportId']) { - this.reportUrl = this.activateRoute.snapshot.queryParams['reportId']; + this.reportUrl.set(this.activateRoute.snapshot.queryParams['reportId']); } } }