switch to new routing method

should help with future implementations

frontend/src/app/app.component.ts

@@ -1,8 +1,38 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import {
+  ActivatedRoute,
+  NavigationEnd,
+  NavigationError,
+  Router
+} from '@angular/router';
+import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  private readonly logger = console;
+
+  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
+
+  @AutoUnsubscribe()
+  ngOnInit() {
+    return this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) this.onNavigationEnd(event);
+      if (event instanceof NavigationError) this.onNavigationError(event);
+    });
+  }
+
+  onNavigationEnd(event: NavigationEnd) {
+    const data = this.activatedRoute.snapshot.data;
+    console.log('New:', data);
+  }
+
+  onNavigationError(event: NavigationError) {
+    const error: Error = event.error;
+    if (error.message.startsWith('Cannot match any routes'))
+      this.router.navigate(['/pagenotfound']);
+  }
+}

frontend/src/app/app.module.ts

@@ -2,19 +2,25 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app.routing.module';
 import { FooterModule } from './components/footer/footer.module';
 import { HeaderModule } from './components/header/header.module';
-import { AppRouterModule } from './router/router.module';
-
+import { GuardsModule } from './guards/guards.module';
+import { routes } from './routes/routes';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
-    AppRouterModule,
     BrowserAnimationsModule,
+
+    GuardsModule,
+    AppRoutingModule,
+
     HeaderModule,
     FooterModule,
+
+    ...routes,
   ],
   providers: [],
   bootstrap: [AppComponent],

frontend/src/app/app.routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, {
+      errorHandler: (error) => console.warn(error.message),
+    }),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

frontend/src/app/router/router.module.ts

@@ -1,48 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { RouterModule } from '@angular/router';
-import { NgxDropzoneModule } from 'ngx-dropzone';
-import { ApiModule } from '../api/api.module';
-import { CopyFieldModule } from '../components/copyfield/copyfield.module';
-import { PageNotFoundModule } from '../components/pagenotfound/pagenotfound.module';
-import { GuardsModule } from '../guards/guards.module';
-import { AdminComponent } from '../routes/admin/admin/admin.component';
-import { LoginComponent } from '../routes/login/login.component';
-import { ProcessingComponent } from '../routes/processing/processing.component';
-import { RegisterComponent } from '../routes/register/register.component';
-import { UploadComponent } from '../routes/upload/upload.component';
-import { ViewComponent } from '../routes/view/view.component';
-import { UtilModule } from '../util/util.module';
-import { angularRoutes } from './routes';
-@NgModule({
-  imports: [
-    CommonModule,
-    GuardsModule,
-    NgxDropzoneModule,
-    UtilModule,
-    MatProgressSpinnerModule,
-    MatButtonModule,
-    MatInputModule,
-    FormsModule,
-    ReactiveFormsModule,
-    PageNotFoundModule,
-    CopyFieldModule,
-    ApiModule,
-    FormsModule,
-    RouterModule.forRoot(angularRoutes),
-  ],
-  declarations: [
-    UploadComponent,
-    ProcessingComponent,
-    ViewComponent,
-    LoginComponent,
-    RegisterComponent,
-    AdminComponent,
-  ],
-  exports: [RouterModule],
-})
-export class AppRouterModule {}

frontend/src/app/router/routes.ts

@@ -1,43 +0,0 @@
-import { Routes } from '@angular/router';
-import { Permission } from 'picsur-shared/dist/dto/permissions';
-import { PageNotFoundComponent } from '../components/pagenotfound/pagenotfound.component';
-import { PermissionGuard } from '../guards/permission.guard';
-import { AdminComponent } from '../routes/admin/admin/admin.component';
-import { LoginComponent } from '../routes/login/login.component';
-import { ProcessingComponent } from '../routes/processing/processing.component';
-import { RegisterComponent } from '../routes/register/register.component';
-import { UploadComponent } from '../routes/upload/upload.component';
-import { ViewComponent } from '../routes/view/view.component';
-
-
-// TODO: split up router
-export const angularRoutes: Routes = [
-  { path: '', component: UploadComponent },
-  {
-    path: 'processing',
-    component: ProcessingComponent,
-  },
-  {
-    path: 'view/:hash',
-    component: ViewComponent,
-    canActivate: [PermissionGuard],
-    data: { permissions: [Permission.ImageView] },
-  },
-  {
-    path: 'login',
-    component: LoginComponent,
-    canActivate: [PermissionGuard],
-    data: { permissions: [Permission.UserLogin] },
-  },
-  {
-    path: 'register',
-    component: RegisterComponent,
-    canActivate: [PermissionGuard],
-    data: { permissions: [Permission.UserRegister] },
-  },
-  {
-    path: 'admin',
-    component: AdminComponent,
-  },
-  { path: '**', component: PageNotFoundComponent },
-];

frontend/src/app/routes/admin/admin.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { AdminRoutingModule } from './admin.routing.module';
+import { AdminComponent } from './admin/admin.component';
+
+@NgModule({
+  declarations: [AdminComponent],
+  imports: [CommonModule, AdminRoutingModule, MatProgressSpinnerModule],
+})
+export class AdminRouteModule {}

frontend/src/app/routes/admin/admin.routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AdminComponent } from './admin/admin.component';
+
+const routes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AdminRoutingModule {}

frontend/src/app/routes/pagenotfound/pagenotfound.module.ts

@@ -1,9 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { PageNotFoundComponent } from './pagenotfound.component';
+import { PageNotFoundRoutingModule } from './processing.routing.module';
 
 @NgModule({
   declarations: [PageNotFoundComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, PageNotFoundRoutingModule],
 })
-export class PageNotFoundModule {}
+export class PageNotFoundRouteModule {}

frontend/src/app/routes/pagenotfound/processing.routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { PageNotFoundComponent } from './pagenotfound.component';
+
+const routes: Routes = [
+  {
+    path: 'pagenotfound',
+    component: PageNotFoundComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PageNotFoundRoutingModule {}

frontend/src/app/routes/processing/processing.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ProcessingComponent } from './processing.component';
+import { ProcessingRoutingModule } from './processing.routing.module';
+
+@NgModule({
+  declarations: [ProcessingComponent],
+  imports: [
+    CommonModule,
+    ProcessingRoutingModule,
+    MatProgressSpinnerModule,
+  ],
+})
+export class ProcessingRouteModule {}

frontend/src/app/routes/processing/processing.routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ProcessingComponent } from './processing.component';
+
+const routes: Routes = [
+  {
+    path: 'processing',
+    component: ProcessingComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ProcessingRoutingModule {}

frontend/src/app/routes/routes.ts

@@ -0,0 +1,15 @@
+import { AdminRouteModule } from './admin/admin.module';
+import { PageNotFoundRouteModule } from './pagenotfound/pagenotfound.module';
+import { ProcessingRouteModule } from './processing/processing.module';
+import { UploadRouteModule } from './upload/upload.module';
+import { UserRouteModule } from './user/user.module';
+import { ViewRouteModule } from './view/view.module';
+
+export const routes = [
+  PageNotFoundRouteModule,
+  UploadRouteModule,
+  ProcessingRouteModule,
+  ViewRouteModule,
+  UserRouteModule,
+  AdminRouteModule,
+];

frontend/src/app/routes/upload/upload.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NgxDropzoneModule } from 'ngx-dropzone';
+import { UploadComponent } from './upload.component';
+import { UploadRoutingModule } from './upload.routing.module';
+
+@NgModule({
+  declarations: [UploadComponent],
+  imports: [CommonModule, UploadRoutingModule, NgxDropzoneModule],
+})
+export class UploadRouteModule {}

frontend/src/app/routes/upload/upload.routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { UploadComponent } from './upload.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: UploadComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class UploadRoutingModule {}

frontend/src/app/routes/user/login/login.component.ts

@@ -7,8 +7,8 @@ import { PermissionService } from 'src/app/api/permission.service';
 import { UserService } from 'src/app/api/user.service';
 import { SnackBarType } from 'src/app/models/snack-bar-type';
 import { UtilService } from 'src/app/util/util.service';
-import { LoginControl } from '../../models/forms/login.model';
-import { UserPassModel } from '../../models/forms/userpass';
+import { LoginControl } from '../../../models/forms/login.model';
+import { UserPassModel } from '../../../models/forms/userpass';
 
 @Component({
   templateUrl: './login.component.html',

frontend/src/app/routes/user/register/register.component.ts

@@ -8,7 +8,7 @@ import { UserService } from 'src/app/api/user.service';
 import { UserPassModel } from 'src/app/models/forms/userpass';
 import { SnackBarType } from 'src/app/models/snack-bar-type';
 import { UtilService } from 'src/app/util/util.service';
-import { RegisterControl } from '../../models/forms/register.model';
+import { RegisterControl } from '../../../models/forms/register.model';
 
 @Component({
   templateUrl: './register.component.html',

frontend/src/app/routes/user/user.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
+import { UserRoutingModule } from './user.routing.module';
+
+@NgModule({
+  declarations: [LoginComponent, RegisterComponent],
+  imports: [
+    CommonModule,
+    UserRoutingModule,
+    FormsModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+  ],
+})
+export class UserRouteModule {}

frontend/src/app/routes/user/user.routing.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { Permission } from 'picsur-shared/dist/dto/permissions';
+import { PermissionGuard } from 'src/app/guards/permission.guard';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
+
+const routes: Routes = [
+  {
+    path: 'login',
+    component: LoginComponent,
+    canActivate: [PermissionGuard],
+    data: { permissions: [Permission.UserLogin] },
+  },
+  {
+    path: 'register',
+    component: RegisterComponent,
+    canActivate: [PermissionGuard],
+    data: { permissions: [Permission.UserRegister] },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class UserRoutingModule {}

frontend/src/app/routes/view/view.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { CopyFieldModule } from 'src/app/components/copyfield/copyfield.module';
+import { ViewComponent } from './view.component';
+import { ViewRoutingModule } from './view.routing.module';
+
+@NgModule({
+  declarations: [ViewComponent],
+  imports: [CommonModule, CopyFieldModule, ViewRoutingModule, MatButtonModule],
+})
+export class ViewRouteModule {}

frontend/src/app/routes/view/view.routing.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { Permission } from 'picsur-shared/dist/dto/permissions';
+import { PermissionGuard } from 'src/app/guards/permission.guard';
+import { ViewComponent } from './view.component';
+
+const routes: Routes = [
+  {
+    path: 'view/:hash',
+    component: ViewComponent,
+    canActivate: [PermissionGuard],
+    data: { permissions: [Permission.ImageView] },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ViewRoutingModule {}

frontend/tsconfig.json

@@ -16,10 +16,10 @@
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
-    "importHelpers": true,
+    "importHelpers": true
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.d.ts"],
+  "include": ["src/**/*.d.ts", "src/**/*.ts"],
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,