This project was generated with Angular CLI version 18.0.3.
Firebase is used for:
- authentication
- firestore
- hosting
Find firebase API keys in firebase console under project parameters, and create the .env file at the root of the project:
FIREBASE_API_KEY="XXXX"
FIREBASE_AUTH_DOMAIN="XXXX"
FIREBASE_PROJECT_ID="XXXX"
FIREBASE_STORAGE_BUCKET="XXXX"
FIREBASE_MESSAGING_SENDER_ID="XXXX"
FIREBASE_APP_ID="XXXX"
FIREBASE_MEASUREMENT_ID="XXXX"
where XXXXs are replaced with actual values. These values are injected in the environment.ts file at build time, with the help of custom-webpack package.
Edit %LINK% for email templates (firebase console/authnetication/models/edit). Replace
https://ng-base-2b40d.firebaseapp.com/__/auth/action
- with prod link:
http://ng-base-2b40d.firebaseapp.com/en/action
- with dev link when testing locally:
http://localhost:4200/action
Run the following command to generate (en) localization file:
ng extract-i18n --output-path src/locale
This generates the src/locale/messages.xlf file for transaltion.
Then translate and create the src/locale/messages.fr.xlf file, either manually or with dedicated translation tools like localazy.
More information on angular internationalization and localization here.
Run ng build --localize to build the project. The build artifacts will be stored in the dist/ directory:
dist/ng-base/endist/ng-base/fr
Then copy /utils/404.html to dist/ng-base directory with and start a local http server:
cp ./utils/404.html ./dist/ng-base
cd dist/ng-base
http-server -p 8080
http-server is an nodejs http server.
Build & deploy on firebase hosting with:
npm run build
firebase deploy
Ng-base defines the Material Design 3 palette for a light and dark theme. A palette defines 6 sets of colors (primary, secondary, terciary, neutral, neutral-variant and error), each set containing 16 colors (26 for neutral), hence a total of 106 colors! However Angular CLI provides a tool to generate a palette from one to four 'seed' colors:
ng generate @angular/material:m3-theme
Check the default light and dark themes.
Tier tool like themes.angular-material.dev may be used to visualize the material components from seed colors.
The 'outline' font set is used by default. Remove line:
{ provide: MAT_ICON_DEFAULT_OPTIONS, useValue: { fontSet: 'material-icons-outlined' } }from app.config.ts file to use the default plain font set.
The login typewriter effect is inspired by this source.
The login image is from www.cleanpng.com (online source).
