Angular upgrade 18 (#13)

* angular upgrade

* Angular upgrade and data seed fix

* fixing issues

* Angular upgrade

Author: nitin27may

.DS_Store

@@ -25,33 +25,8 @@ public static async Task Main(string[] args)
             .ReadFrom.Configuration(config)
             .CreateLogger();
         var host = CreateHostBuilder(args).Build();
-
-        using (var scope = host.Services.CreateScope())
-        {
-            var services = scope.ServiceProvider;
-
-            var loggerFactory = services.GetRequiredService<ILoggerFactory>();
-            try
-            {
-                var userManager = services.GetRequiredService<UserManager<ApplicationUser>>();
-                var roleManager = services.GetRequiredService<RoleManager<IdentityRole>>();
-
-                await Infrastructure.Identity.Seeds.DefaultRoles.SeedAsync(userManager, roleManager);
-                await Infrastructure.Identity.Seeds.DefaultSuperAdmin.SeedAsync(userManager, roleManager);
-                await Infrastructure.Identity.Seeds.DefaultBasicUser.SeedAsync(userManager, roleManager);
-                Log.Information("Finished Seeding Default Data");
-                Log.Information("Application Starting");
-                host.Run();
-            }
-            catch (Exception ex)
-            {
-                Log.Warning(ex, "An error occurred seeding the DB");
-            }
-            finally
-            {
-                Log.CloseAndFlush();
-            }
-        }
+        host.Run();
+       
     }
 
     public static IHostBuilder CreateHostBuilder(string[] args) =>

Api/WebApi/Program.cs

@@ -1,16 +1,20 @@
+using System;
 using Application;
 using Application.Interfaces;
 using Infrastructure.Identity;
 using Infrastructure.Identity.Contexts;
+using Infrastructure.Identity.Models;
 using Infrastructure.Persistence;
 using Infrastructure.Persistence.Contexts;
 using Infrastructure.Shared;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Identity;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
+using Microsoft.Extensions.Logging;
 using WebApi.Extensions;
 using WebApi.Services;
 
@@ -36,7 +40,7 @@ public void ConfigureServices(IServiceCollection services)
         services.AddScoped<IAuthenticatedUserService, AuthenticatedUserService>();
     }
 
-    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
+    public async void Configure(IApplicationBuilder app, IWebHostEnvironment env)
     {
         if (env.IsDevelopment())
         {
@@ -71,5 +75,30 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             var context = serviceScope.ServiceProvider.GetService<IdentityContext>();
             context.Database.Migrate();
         }
+
+        using (var scope = app.ApplicationServices.GetRequiredService<IServiceScopeFactory>().CreateScope())
+        {
+            var services = scope.ServiceProvider;
+
+            var loggerFactory = services.GetRequiredService<ILoggerFactory>();
+            try
+            {
+                var userManager = services.GetRequiredService<UserManager<ApplicationUser>>();
+                var roleManager = services.GetRequiredService<RoleManager<IdentityRole>>();
+
+                 await Infrastructure.Identity.Seeds.DefaultRoles.SeedAsync(userManager, roleManager);
+                 await Infrastructure.Identity.Seeds.DefaultSuperAdmin.SeedAsync(userManager, roleManager);
+                 await Infrastructure.Identity.Seeds.DefaultBasicUser.SeedAsync(userManager, roleManager);
+              
+            }
+            catch (Exception ex)
+            {
+                
+            }
+            finally
+            {
+                
+            }
+        }
     }
 }

Api/WebApi/Startup.cs

@@ -1,6 +1,6 @@
 # Full Stack (dotnet, angular and postgres) boilerplate with Docker
 ### About (Dotnet - Angular - PostgresSQL)
-This project is intended to provide a starting point for building full-stack web applicatioin. The stack is made of Dotnet(7) WebApi, Angular (17.0.3), PostgresSQL. The focus of this project to show case the possible way to run a real application (Dotnet, Angular and PostgresSQL) using docker for development enviornment and produciton mode.
+This project is intended to provide a starting point for building full-stack web applicatioin. The stack is made of Dotnet(7) WebApi, Angular (18.1.0), PostgresSQL. The focus of this project to show case the possible way to run a real application (Dotnet, Angular and PostgresSQL) using docker for development enviornment and produciton mode.
 
 This is a simple web application. It has working user registration, login page and there is a complete example of CRUD which contains example for Angular Routing and dotnet rest api samples. Also, rest services are secure using JWT. 
 
@@ -27,7 +27,7 @@ The apps written in the following JavaScript frameworks/libraries:
 | **WebApi** | [Rest Api using **dotnet**](https://github.com/nitin27may/angular-dotnet-core-docker/tree/master/WebApi) |
 
 ### Built With
-#### Angular (17.0.3)
+#### Angular (18.1.0)
 
 The fronend of this project is developed in Angular. As we are using Server Side Rendering (SSR) we have used Nodejs alpine image in place of other lightweight docker image like nginx to run Angular app.
 

README.md

@@ -9,7 +9,7 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.ts]
-quote_type = double
+quote_type = single
 
 [*.md]
 max_line_length = off

frontend/.browserslistrc

@@ -1,47 +1,42 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
-*/cache/
-# dependencies
-/node_modules
 
-# profiling files
-chrome-profiler-events*.json
-speed-measure-plugin*.json
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
 
-# misc
+# Miscellaneous
 /.angular/cache
-/.sass-cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db

frontend/.editorconfig

@@ -1,8 +1,11 @@
 {
-  "useTabs": false,
-  "printWidth": 140,
-  "tabWidth": 2,
-  "singleQuote": false,
-  "trailingComma": "none",
-  "semi": true
+  "printWidth": 80,
+  "semi": true,
+  "bracketSameLine": false,
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
 }

frontend/.gitignore

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

frontend/.prettierignore

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

frontend/.prettierrc

@@ -0,0 +1,2 @@
+{
+}

frontend/.vscode/extensions.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

frontend/.vscode/launch.json

@@ -1,29 +1,30 @@
-# Create image based off of the official Node 10 image
-FROM node:21-alpine as builder
-
-# Copy dependency definitions
-COPY package.json package-lock.json ./
-
-## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
-RUN npm i --legacy-peer-deps && mkdir /app && mv ./node_modules ./app
-
-# Change directory so that our commands run inside this new directory
-WORKDIR /app
-
-# Get all the code needed to run the app
-COPY . /app/
-
-# Build  bundles
-RUN npm run build:output
-
-FROM node:21-alpine
-## From 'builder' copy published folder
-COPY --from=builder /app /app
-
-WORKDIR /app
-# Expose the port the app runs in
-EXPOSE 4000
-
-USER node
-
-CMD ["node", "dist/frontend/server/main.js"]
+# Create image based off of the official Node 10 image
+FROM node:21-alpine as builder
+
+# Copy dependency definitions
+COPY package.json package-lock.json ./
+
+## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
+## --legacy-peer-deps as ngx-bootstrap still depends on Angular 14
+RUN npm i && mkdir /app && mv ./node_modules ./app
+
+# Change directory so that our commands run inside this new directory
+WORKDIR /app
+
+# Get all the code needed to run the app
+COPY . /app/
+
+# Build server side bundles
+RUN npm run build
+
+FROM node:21-alpine
+## From 'builder' copy published folder
+COPY --from=builder /app /app
+
+WORKDIR /app
+# Expose the port the app runs in
+EXPOSE 4000
+
+USER node
+
+CMD ["node", "dist/contacts/server/server.mjs"]