This project was generated with Angular CLI version 17.1.3.
Target node version: 18.13.0
Use nmv-windows to install, and use target node version.
- install
nvm install 18
- use/switch:
nvm use 18.13.0
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.
ng new demo-app --style=scss --ssr=false
ng add @angular/material --skip-confirmation --defaults
ng add @angular-eslint/schematics --skip-confirmation
npm install prettier prettier-eslint eslint-config-prettier eslint-plugin-prettier --save-dev
The backend is built with .NET 8 in C# and available in github as demo-app5-api. We are also providing API via the Open API Standard and publishing the swagger.json.
Swagger UI hosted at https://demo-app5-api.azurewebsites.net/swagger/index.html
In order to expedite the process of consuming the backend API, we will use the Open API Standard with Swagger Codegen utilities to help us scaffold the client module using the pre-built Typescript template.
Procedure:
- Install @openapitools/openapi-generator-cli
npm install @openapitools/openapi-generator-cli -g
- Of many ways to generate the client from the swagger.json file, the following is one:
- refer to online docs and the README.md files in the generate api client project
- add a script to the package.json, like:
"openapi-gen-v1": "openapi-generator-cli generate -g typescript-angular -i http://localhost:5071/swagger/v1/swagger.json -o ..\\demo-app5-backend-clients\\v1 -p npmName=demo-app5-api-v1"
- run the script like
npm run openapi-gen-v1
- cd to the output folder, and run
npm install
, thennpm run build
- it is possible to reference this work like:
import { WeatherForecast, WeatherForecastService, } from '../../../../../demo-app5-backend-clients/v1';
- configure the module in
app.config.ts
likeexport function apiConfigFactory(): Configuration { const params: ConfigurationParameters = { basePath: 'https://demo-app5-api.azurewebsites.net', }; return new Configuration(params); } export const appConfig: ApplicationConfig = { providers: [ // .. // .. importProvidersFrom(ApiModule.forRoot(apiConfigFactory)), ] }
- make sure to add CORS policy to the API service so that the client has access
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
- .prettierrc
-
Create a page
ng g c page/error-page
- Angular Material Theming System: Complete Guide
- Install Schematics
- NG Add Schematic
- Tutorial: Build and deploy your app to Azure Container Apps
- Tutorial: Communication between microservices in Azure Container Apps
- How to Setup ESLint and Prettier in an Angular Project
- Visual Studio Code Keyboard Shortcuts for Windows
Migrating to MDC-based Angular Material Components Using Angular Flex-Layout to achieve Responsive Web Design
Modern CSS in Angular: Layouts Button Over Image The Tailwind CSS Components Library For Coding 10x Faster
Keeping state with a Service using Signals Angular and IndexedDB: A Perfect Pair for Progressive Web Apps
- Keeping state with a Service using Signals (May 18, 2023)
- Signalstory
- InDepth Guide for Customizing Angular Material Button
- How to Build a Scheduling App like Calendly
- Conventional Commits
- How to Leverage Signals in Angular Services for Better Data Communication
- Deborah Korata's Angular-Signals github repo
- ng-select-with-footer (Stackblitz)
- ng-select-with-footer-reactive (Stackblitz)
- FileHelpers
See git history for additions to the package.json script area related to the attempts while following articles:
These attempts were not successful. More research is required in to dockerfile configurations, and Azure App Container service.
Deployed resources in Azure Resource Group named demo-apps
- Azure Account
- VSCode
- Azure App Service Extension for VSCode
-
Create App Service for Linux (i.e. app-demo5b)
-
Build app
ng build
-
Deploy app from App Service Extension, and select folder ./dist/<app_folder>
-
Configure App Service
a. Application Settings / SCM_DO_BUILD_DURING_DEPLOYMENT
SCM_DO_BUILD_DURING_DEPLOYMENT = false
b. General Settings / Startup Command
pm2 serve /home/site/wwwroot/browser --no-daemon --spa