✨ Kh-admin template will save angular developers +20 working hours ✨
- Features
- Coming Features
- Demo Overview
- Getting Started
- How to Run the Application
- Development Commands
- Nx Guide
- CI/CD Setup
- Commands for Libraries
- Version Information
- Logging: Configure and control log levels for production.
- Localization: Multi-language support for global applications.
- RTL/LTR Support: Fully supports right-to-left and left-to-right layouts.
- Shared Global Assets: Assets shared across all apps.
- Nebular Components: Integrates shared Nebular components.
- Environment Files: Centralized environment configuration.
- Dashboard Layout: Multi-theme support with an advanced layout.
- Dynamic Module Federation: Example provided for dynamically loading modules.
- Angular Material: Full integration with Angular Material components.
- Graphs and Charts: Example integrations using D3.js and ECharts.
- Reactive Forms: Scalable forms with custom input support.
- Paginated Tables: Using
ngx-easy-tablefor advanced data table functionality. - Google Maps: Seamless integration with Google Maps.
- Permission Management: Role-based route protection and content visibility.
- Chatbot: Built-in chatbot functionality.
- Calendar: Interactive and user-friendly calendar component.
- Toast Notifications: Beautiful and customizable toast messages.
- Authentication: Integration with Keycloak.
- Backend Template: A robust backend template using .NET 8.
Have recommendations? Share your feedback with us!
- E-Proc App: A single Angular application using shared libraries.
- Host App: Demonstrates dynamic module federation. It calls a remote service (Angular or React) on another domain and uses the shared Angular libraries.
This project explores common features and principles related to Angular Micro Frontends Architecture.
- Node.js: Ensure Node.js is installed on your system.
- Nx CLI: Install Nx CLI globally using
npm install -g nx.
- Clone the repository:
git clone https://github.com/khalifa005/e-proc.git cd e-proc nx serve e-proc npx nx serve host --devRemotes=service1 npx nx graph npx nx run host:build:production //Development Commands npx nx run host:build:production --skip-nx-cache npx nx g @nx/angular:lib <lib-name> npx nx g @nx/angular:lib <lib-name>
npx nx serve e-proc
npx nx serve host --devRemotes=service1
npx nx graph
npx nx run host:build:production
npx nx run host:build:production --skip-nx-cache
npx nx g @nx/angular:lib dashboard
npx nx g @nx/angular:lib nebular
npx nx g @nx/angular:component header --project=nebular --export
npx nx g @nx/angular:lib core
npx nx g @nx/angular:service services/i18n --project=core --skip-tests
npx nx g @nx/angular:lib products --routing true --lazy true parent-module=apps/host/src/app/app.module.ts
To execute tasks with Nx use the following syntax:
nx <target> <project> <...options>
You can also run multiple targets:
nx run-many -t <target1> <target2>
..or add -p to filter specific projects
nx run-many -t <target1> <target2> -p <proj1> <proj2>
1- Authentication via Keycloak
2- backend tempalte using .Net 8
if you have any recommendation please share it with us
- Building and Configuration Commands
- Nx Workspace Commands
- Setup and Cleanup
- Official Nx Documentation
- To-Do and Pending Tasks
- Debugging and Testing
- Additional Notes
- References
ng build --configuration=production --base-href=/FolderAppNameBasedOnIIS/
ng build --configuration=production --base-href=/CrmPortalClient/
npm run build:prod
ng build --configuration=staging
ng serve --configuration=production
npm uninstall @rxweb/reactive-form-validators
npm uninstall @angular/material
npx create-nx-workspace amana --preset=angular
npx create-nx-workspace workspace --cli=angular --preset=angular --appName=tiny-app --style=scss
-
Generate a shared library:
npx nx g library assets --directory=shared --tags="scope:shared,type:assets" --style=css -
Clean up unnecessary files:
npx rimraf ./apps/tiny-app/src/assets ./libs/shared/assets/.js ./libs/shared/assets/.json ./libs/shared/assets/src/.
npx mkdirp ./libs/shared/assets/src/assets/fonts ./libs/shared/assets/src/assets/icons ./libs/shared/assets/src/assets/images
-
Generate libraries:
npx nx g @nx/angular:lib core
npx nx g @nx/angular:lib material
npx nx g @nx/angular:lib nebular -
Generate components:
npx nx g @nx/angular:component components/header --project=nebular --export
npx nx g @nx/angular:component containers/login --project=auth --export
nvm ls
npx create-nx-workspace@latest
- Ensure shared configurations in webpack.config.ts:
- Use "singleton: true" for shared modules.
- Disable Hot Module Replacement if not needed.
-
Create a host:
npx nx g @angular:host dashboard -
Add remotes to a host:
npx nx g @angular:remote firstService --host=dashboard
npx nx graph
- Import shared styles:
@import 'libs/nebular/src/lib/styles/themes';
- Demo link: https://www.youtube.com/watch?v=0HqI4uRKxZc
npx nx test common-ui
npx nx lint common-ui
npx nx run admin:build:production
npx nx run admin:serve --ssl=true
npx nx serve e-proc --prod
npx nx serve dashboard --devRemotes=service1,service2
npx create-nx-workspace@latest --preset=angular-monorepo --skipTests
npx create-nx-workspace workspace --cli=angular --preset=angular --appName=tiny-app --style=scss
nx generate library assets --directory=shared --tags="scope:shared,type:assets" --style=scss npx rimraf ./apps/tiny-app/src/assets ./libs/shared/assets/.js ./libs/shared/assets/.json ./libs/shared/assets/src/. ./libs/shared/assets/src/lib
- Nx Workspace JSON: https://nx.dev/deprecated/workspace-json
- Nx and Angular Concepts: https://nx.dev/concepts/more-concepts/nx-and-angular
- Storybook Configuration: https://nx.dev/packages/storybook/documents/angular-configuring-styles
- Jay Bishtawi
- Duncan Hunter