Merge pull request #264 from stefanoslig/migrate-angular-17

chore: Migrate to Angular 17

.gitignore

@@ -40,3 +40,5 @@ testem.log
 Thumbs.db
 
 .angular
+
+.nx/cache

.prettierignore

@@ -2,3 +2,5 @@
 
 /dist
 /coverage
+
+/.nx/cache

apps/conduit-e2e/project.json

@@ -18,7 +18,7 @@
  }
  },
  "lint": {
- "executor": "@nx/linter:eslint",
+ "executor": "@nx/eslint:lint",
  "options": {
  "lintFilePatterns": ["apps/conduit-e2e/**/*.{js,ts}"]
  },

apps/conduit/project.json

@@ -11,14 +11,13 @@
  "prefix": "cdt",
  "targets": {
  "build": {
- "executor": "@angular-devkit/build-angular:browser",
+ "executor": "@angular-devkit/build-angular:browser-esbuild",
  "options": {
  "outputPath": "dist/apps/conduit",
  "index": "apps/conduit/src/index.html",
  "main": "apps/conduit/src/main.ts",
- "polyfills": "apps/conduit/src/polyfills.ts",
+ "polyfills": ["zone.js"],
  "tsConfig": "apps/conduit/tsconfig.app.json",
- "aot": true,
  "assets": ["apps/conduit/src/favicon.ico", "apps/conduit/src/assets"],
  "styles": ["apps/conduit/src/styles.scss"],
  "scripts": []
@@ -66,22 +65,22 @@
  "executor": "@angular-devkit/build-angular:dev-server",
  "configurations": {
  "production": {
- "browserTarget": "conduit:build:production"
+ "buildTarget": "conduit:build:production"
  },
  "development": {
- "browserTarget": "conduit:build:development"
+ "buildTarget": "conduit:build:development"
  }
  },
  "defaultConfiguration": "development"
  },
  "extract-i18n": {
  "executor": "@angular-devkit/build-angular:extract-i18n",
  "options": {
- "browserTarget": "conduit:build"
+ "buildTarget": "conduit:build"
  }
  },
  "lint": {
- "executor": "@nx/linter:eslint",
+ "executor": "@nx/eslint:lint",
  "options": {
  "lintFilePatterns": ["apps/conduit/src/**/*.ts", "apps/conduit/src/**/*.html"]
  },
@@ -100,7 +99,7 @@
  "options": {
  "port": 4400,
  "configDir": "apps/conduit/.storybook",
- "browserTarget": "conduit:build",
+ "buildTarget": "conduit:build",
  "compodoc": false
  },
  "configurations": {
@@ -115,7 +114,7 @@
  "options": {
  "outputDir": "dist/storybook/conduit",
  "configDir": "apps/conduit/.storybook",
- "browserTarget": "conduit:build",
+ "buildTarget": "conduit:build",
  "compodoc": false
  },
  "configurations": {

apps/conduit/src/app/app.component.html

@@ -1,3 +1,6 @@
 <cdt-navbar [isLoggedIn]="isLoggedIn$ | async" [user]="user$ | async"></cdt-navbar>
 <router-outlet></router-outlet>
-<cdt-footer></cdt-footer>
+
+@defer (on idle) {
+ <cdt-footer></cdt-footer>
+}

apps/conduit/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { AsyncPipe, CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { Store } from '@ngrx/store';
@@ -12,7 +12,7 @@ import { NavbarComponent } from './layout/navbar/navbar.component';
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
- imports: [FooterComponent, NavbarComponent, RouterModule, CommonModule],
+ imports: [FooterComponent, NavbarComponent, RouterModule, AsyncPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {

apps/conduit/src/app/app.config.ts

@@ -1,5 +1,5 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withViewTransitions } from '@angular/router';
 import { provideRouterStore } from '@ngrx/router-store';
 import { ngrxFormsEffects, ngrxFormsFeature } from '@realworld/core/forms';
 import { authFeature, authGuard, tokenInterceptor, authFunctionalEffects } from '@realworld/auth/data-access';
@@ -10,45 +10,49 @@ import { provideEffects } from '@ngrx/effects';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { API_URL } from '@realworld/core/http-client';
 import { environment } from '@env/environment';
+
 export const appConfig: ApplicationConfig = {
  providers: [
- provideRouter([
- {
- path: '',
- redirectTo: 'home',
- pathMatch: 'full',
- },
- {
- path: 'home',
- loadChildren: () => import('@realworld/home/src/lib/home.routes').then((home) => home.HOME_ROUTES),
- },
- {
- path: 'login',
- loadComponent: () => import('@realworld/auth/feature-auth').then((m) => m.LoginComponent),
- },
- {
- path: 'register',
- loadComponent: () => import('@realworld/auth/feature-auth').then((m) => m.RegisterComponent),
- },
- {
- path: 'article',
- loadChildren: () => import('@realworld/articles/article').then((m) => m.ARTICLE_ROUTES),
- },
- {
- path: 'settings',
- loadComponent: () =>
- import('@realworld/settings/feature-settings').then((settings) => settings.SettingsComponent),
- },
- {
- path: 'editor',
- loadChildren: () => import('@realworld/articles/article-edit').then((article) => article.ARTICLE_EDIT_ROUTES),
- canActivate: [authGuard],
- },
- {
- path: 'profile',
- loadChildren: () => import('@realworld/profile/feature-profile').then((profile) => profile.PROFILE_ROUTES),
- },
- ]),
+ provideRouter(
+ [
+ {
+ path: '',
+ redirectTo: 'home',
+ pathMatch: 'full',
+ },
+ {
+ path: 'home',
+ loadChildren: () => import('@realworld/home/src/lib/home.routes').then((home) => home.HOME_ROUTES),
+ },
+ {
+ path: 'login',
+ loadComponent: () => import('@realworld/auth/feature-auth').then((m) => m.LoginComponent),
+ },
+ {
+ path: 'register',
+ loadComponent: () => import('@realworld/auth/feature-auth').then((m) => m.RegisterComponent),
+ },
+ {
+ path: 'article',
+ loadChildren: () => import('@realworld/articles/article').then((m) => m.ARTICLE_ROUTES),
+ },
+ {
+ path: 'settings',
+ loadComponent: () =>
+ import('@realworld/settings/feature-settings').then((settings) => settings.SettingsComponent),
+ },
+ {
+ path: 'editor',
+ loadChildren: () => import('@realworld/articles/article-edit').then((article) => article.ARTICLE_EDIT_ROUTES),
+ canActivate: [authGuard],
+ },
+ {
+ path: 'profile',
+ loadChildren: () => import('@realworld/profile/feature-profile').then((profile) => profile.PROFILE_ROUTES),
+ },
+ ],
+ withViewTransitions(),
+ ),
  provideStore({
  auth: authFeature.reducer,
  errorHandler: errorHandlerFeature.reducer,

apps/conduit/src/app/layout/footer/footer.component.ts

@@ -4,7 +4,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
  selector: 'cdt-footer',
  standalone: true,
  templateUrl: './footer.component.html',
- styleUrls: ['./footer.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {}

apps/conduit/src/app/layout/navbar/navbar.component.html

@@ -1,53 +1,52 @@
 <nav class="navbar navbar-light">
  <div class="container">
  <a class="navbar-brand" routerLink="/">conduit</a>
- <!-- Logged out user -->
- <ul *ngIf="!isLoggedIn" class="nav navbar-nav pull-xs-right">
- <li class="nav-item">
- <!-- Add "active" class when you're on that page" -->
- <a class="nav-link" routerLink="/">Home</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/login" routerLinkActive="active">Sign in</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/register" routerLinkActive="active">Sign up</a>
- </li>
- </ul>
 
- <!-- Logged in user -->
- <ul *ngIf="isLoggedIn" class="nav navbar-nav pull-xs-right">
- <li class="nav-item">
- <!-- Add "active" class when you're on that page" -->
- <a
- class="nav-link active"
- [routerLink]="['/']"
- routerLinkActive="active"
- [routerLinkActiveOptions]="{ exact: true }"
- >Home</a
- >
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/editor" routerLinkActive="active">
- <i class="ion-compose"></i>&nbsp;New Post
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" routerLink="/settings" routerLinkActive="active">
- <i class="ion-gear-a"></i>&nbsp;Settings
- </a>
- </li>
- <li class="nav-item">
- <a
- data-e2e-id="logedin-user"
- class="nav-link"
- [routerLink]="['/profile', user.username]"
- routerLinkActive="active"
- >
- <img [src]="user.image" *ngIf="user.image" class="user-pic" />
- {{ user.username }}
- </a>
- </li>
- </ul>
+ @if (!isLoggedIn) {
+ <ul class="nav navbar-nav pull-xs-right">
+ <li class="nav-item">
+ <a class="nav-link" routerLink="/">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" routerLink="/login" routerLinkActive="active">Sign in</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" routerLink="/register" routerLinkActive="active">Sign up</a>
+ </li>
+ </ul>
+ } @else {
+ <ul class="nav navbar-nav pull-xs-right">
+ <li class="nav-item">
+ <!-- Add "active" class when you're on that page" -->
+ <a
+ class="nav-link active"
+ [routerLink]="['/']"
+ routerLinkActive="active"
+ [routerLinkActiveOptions]="{ exact: true }"
+ >Home</a
+ >
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" routerLink="/editor" routerLinkActive="active">
+ <i class="ion-compose"></i>&nbsp;New Post
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" routerLink="/settings" routerLinkActive="active">
+ <i class="ion-gear-a"></i>&nbsp;Settings
+ </a>
+ </li>
+ <li class="nav-item">
+ <a
+ data-e2e-id="logedin-user"
+ class="nav-link"
+ [routerLink]="['/profile', user.username]"
+ routerLinkActive="active"
+ >
+ {{ user.username }}
+ </a>
+ </li>
+ </ul>
+ }
  </div>
 </nav>

apps/conduit/src/app/layout/navbar/navbar.component.ts

@@ -7,8 +7,7 @@ import { User } from '@realworld/core/api-types';
  selector: 'cdt-navbar',
  standalone: true,
  templateUrl: './navbar.component.html',
- styleUrls: ['./navbar.component.css'],
- imports: [CommonModule, RouterModule],
+ imports: [RouterModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavbarComponent {

apps/conduit/tsconfig.app.json

@@ -6,10 +6,7 @@
  "target": "ES2022",
  "useDefineForClassFields": false
  },
- "files": [
- "src/main.ts",
- "src/polyfills.ts"
- ],
+ "files": ["src/main.ts"],
  "exclude": [
  "src/test-setup.ts",
  "**/*.spec.ts",