You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-We are using multiple projects in one Angular environment so that we can help users to improve
8
-
code reusability, scalability, maintainability, and customization. It can also help in increase productivity, reduce risks, and improve the quality of application.
8
+
-The boilerplate using multiple projects in one Angular environment so that the boilerplate help users
9
+
to improve code reusability, scalability, maintainability, and customization. It can also help in increase productivity, reduce risks, and improve the quality of application.
9
10
10
-
-Code Reusability: I have multiple applications or parts of applications that share common functionality,
11
-
using multiple projects can help you avoid duplicating code. You can create a shared library project and use it across all the projects. This approach can help you maintain consistency and reduce code duplication.
11
+
-The multiple applications or parts of applications that share common functionality, using multiple
12
+
projects can help you avoid duplicating code. You can create a shared library project and use it across all the projects. This approach can help you maintain consistency and reduce code duplication.
12
13
13
-
- Isolation: Each project can be developed and tested independently, which allows you to isolate changes and
14
-
minimize the risk of breaking other parts of the application. This approach can help you increase productivity and reduce the time spent on debugging and fixing issues.
14
+
Following are the steps to get started with it:
15
15
16
-
- Scalability: As your application grows, it can become more complex and harder to maintain. Using multiple
17
-
projects can help you manage complexity by breaking down the application into smaller, more manageable pieces. You can also use different teams to work on different projects, which can help you scale the development process.
16
+
# Prerequisite
18
17
19
-
- Customization: Each project can have its own configuration and dependencies, which allows to
20
-
customize the build process and optimize each project for its specific use case. This approach can help to improve the performance and reduce the size of the application.
18
+
#### Step 1: Install NodeJS
19
+
20
+
Install the latest LTS version from here: https://nodejs.org/en/download/.
21
+
22
+
#### Step 2: Install Angular CLI
23
+
24
+
Angular provides a very useful command line utility that help in easily developing angular applications, models, services, etc. as a boilerplate, which saves a lot of time.
25
+
26
+
```sh
27
+
npm install -g @angular/cli
28
+
```
29
+
30
+
#### step 3 : Install Nebular
31
+
32
+
Similarly Angular also Provides Nebular which supports init configuration with Angular Schematics. This means you can simply add it to your project, and Angular Schematics will do the rest
33
+
34
+
```sh
35
+
ng add @nebular/theme
36
+
```
37
+
38
+
After this, it will take a few minutes to set everything up, once that is done, you will see a folder structure generated like below:
39
+
40
+
```
41
+
BOILER-PLATE
42
+
├── .github
43
+
├── .husky
44
+
├── projects
45
+
├── .czferc.js
46
+
├── .npmrc
47
+
├── .cz-config.js
48
+
├── .gitignore
49
+
├── commitlint.config.js
50
+
├── CODE_OF_CONDUCT.md
51
+
├── lerna.json
52
+
├── package-lock.json
53
+
├── package.json
54
+
├── README.md
55
+
└── tsconfig.json
56
+
```
57
+
As can be seen above, scaffold has initialized and set up a lot, such as:
58
+
59
+
1. GitHub PR template inside `.github`
60
+
2. Conventional commits enablement using commitizen (`.cz-config.js`), commitlint (`commitlint-config.js`) and husky for githooks.
61
+
3.`.gitignore` for ignoring files from source code. Important for secure coding and keeping the repo clean on SCM (git)
62
+
4.`lerna.json` which contains the setup for lerna commands. Lerna is going to be our monorepo manager and build tool going forward. It is one of the most popular monorepo managers in the industry, used by Jest, NestJS, LoopBack, and Nx.
63
+
5.`package.json` and `package-lock.json` for npm to work.
64
+
6. The folder named `projects`:
65
+
- Projects will hold the multi application pattern and will always be completely independent
66
+
67
+
#### Step 4: The Structure is main project folder
68
+
69
+
```
70
+
PROJECTS
71
+
├── arc
72
+
├── arc-lib
73
+
│ └── src
74
+
└──lib
75
+
│ ├── assets
76
+
│ ├── components
77
+
│ ├── core
78
+
│ └── theme
79
+
├── (...other files)
80
+
```
21
81
22
82
# Projects
23
-
24
83
1. Arc:
25
-
- This boilerplate project is a project set up that can be easily altered to create new projects. The user
26
-
is able to use in the original project, its foundation, and its structure to set up a new one without changing the original.
27
-
28
-
- This project is based on Angular CLI on version 14.0.0.
84
+
- This boilerplate arc project is a project set up that can be easily altered to create new projects.
85
+
The user is able to use in the original project, its foundation, and its structure to set up a new one without changing the original.
29
86
30
87
FOR further reference you can refer [here]()
31
88
32
89
2. Arc-Lib
33
-
- A shared library can include components, services, pipes, directives, and other modules that can be used
34
-
by other projects in the workspace. By using a shared library, you can avoid duplicating code and functionality across multiple projects, which can save time and effort.
90
+
- A arc-lib shared library can include components, services, pipes, directives, and other modules that can be used by other projects in the workspace. By using a shared library, we avoid duplicating code and functionality across multiple projects, which can save time and effort.
35
91
36
92
For further reference you can refer [here](../arc-sf/projects/arc-lib/README.md)
37
93
38
-
# Prerequisite
39
-
40
-
Run `npm install -g @angular/cli` for Angular CLI & NPM installed
41
-
Run `npm i @angular/material` for Angular material
42
-
43
-
# MainProject
44
-
45
-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.6.
46
-
47
-
# Code scaffolding
48
-
49
-
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.
50
-
51
-
1. Create a workspace
52
-
ng new <workspace-name> --no-create-application
53
94
54
-
2. Generate applications/projects
55
-
ng generate application <application-name>
95
+
### Step 5: Start the Server
56
96
57
-
3. Generate a library - which will act as a shared util/files/pages
58
-
ng generate library <library-name>
97
+
Go to the terminal and change the directory into your service folder:
59
98
99
+
```sh
100
+
ng serve
101
+
```
60
102
61
-
## Development server
103
+
You'll see a message saying `Server is running at http://localhost:4200/` Navigate to this URL. The application will automatically reload if you change any of the source files.
62
104
63
-
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.
105
+
### Step 6: Build the Application
64
106
65
-
## Build
107
+
To build the project. The build artifacts will be stored in the `dist/` directory.
66
108
67
-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
109
+
```sh
110
+
ng build
111
+
```
68
112
69
-
## Running unit tests
113
+
###Running unit tests
70
114
71
115
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
- In an Angular multiproject workspace, a shared library is a package that contains reusable code and
8
6
functionality that can be used across multiple projects within the workspace.
9
7
10
-
- A shared library can include components, services, pipes, directives, and other modules that can be used
11
-
by other projects in the workspace. By using a shared library, you can avoid duplicating code and functionality across multiple projects, which can save time and effort.
8
+
- A shared library can include components, services, pipes, directives, and other modules that can be
9
+
used by other projects in the workspace. By using a shared library, you can avoid duplicating code and functionality across multiple projects, which can save time and effort.
12
10
13
11
- By separating your reusable code into a shared library, you can also maintain consistency and
14
12
standardization across your projects. If you need to make changes to the shared code, you can update the library and all projects that use it will be automatically updated as well. a shared library is a powerful tool for managing code and functionality in an Angular multiproject workspace, and can help improve code quality, reduce duplication, and increase productivity.
15
13
16
-
This project is based on Angular CLI on version 14.0.0.
17
-
18
-
# Prerequisite
19
-
20
-
Run `npm install -g @angular/cli` for Angular CLI & NPM installed
21
-
Run `npm i @angular/material` for Angular material
22
-
23
-
# Code scaffolding
14
+
### Structure of the arc-lib is
24
15
25
-
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`.
16
+
The Structure of the arc-lib is as follows
17
+
```
18
+
├── arc-lib
19
+
│ └── src
20
+
└──lib
21
+
│ ├── assets
22
+
│ ├── components
23
+
│ ├── core
24
+
│ └── theme
25
+
```
26
26
27
-
Generate a library - which will act as a shared util/files/pages
28
-
ng generate library <library-name>
29
-
30
-
## Project Features
31
-
32
-
Angular shared library provides various features and components to help developers get started with their projects quickly. Here are some of the features and components that provides:
27
+
- Angular arc library provides various features and components to help developers get started with
28
+
their projects quickly. Here are some of the features and components that provides:
33
29
34
30
# Core Module:
35
31
@@ -42,7 +38,7 @@ Angular shared library provides various features and components to help develop
42
38
`get-list-api.command`,`patch-api.command`,`post-api.command` and `put-api.command`.These are used for modifying the data through API.These serves as a base class for other classes that inherit from it and provide specific implementation details.
43
39
44
40
- Models: We are using 3 models named `count.model`,`named-id-required.model` and
45
-
`named-id. model`. In these models we are using model based validations.
41
+
`named-id. model`. In these models The boilerplate usingmodel based validations.
46
42
47
43
## Auth:
48
44
@@ -72,46 +68,42 @@ We are using 2 decorators named `required.decorator` and `validate.decorator`.
72
68
73
69
## Interceptors:
74
70
75
-
We are using 3 Interceptors named `auth.interceptor`,`error.interceptor` and `session-recovery.interceptor`. These interceptors are responsible for adding an authorization header to requests that require authentication, checks for errors that occur during HTTP requests and
71
+
The boilerplate using 3 Interceptors named `auth.interceptor`,`error.interceptor` and `session-recovery.interceptor`. These interceptors are responsible for adding an authorization header to requests that require authentication, checks for errors that occur during HTTP requests and
76
72
displays error messages and also refreshes the user's authentication token when the session gets expired.
77
73
78
74
## Localization:
79
75
80
-
We are using i18n module as a language translator where we are using 3 files as follows :
76
+
The boilerplate using i18n module as a language translator where The boilerplate using 3 files as follows :
81
77
82
78
- Enums: `language.enum` defines the set of named values for various languages.
83
79
84
-
- Module: We are using `localization.module` while using the module we are using data from enum
85
-
too and according to enums value we translate the language and `translation service` is called
80
+
- Module: The boilerplate using `localization.module` while using the module The boilerplate using data from enum too and according to enums value we translate the language and `translation service`
86
81
87
82
- Service: The translationService provides localization functionality to the application. It
88
83
depends on `@ngx-translate/core` library to handle translations allowing users to select their preferred language for the application & to provide appropriate translations based on that preference.
89
84
90
85
## Env Resolver Service:
91
86
92
-
The purpose of this service (implements the Resolve interface and is responsible for resolving the environment configuration ) is to retrieve environment configuration data from a store (SystemStoreFacadeService) and make it available to components before they are displayed.
87
+
The purpose of this service (implements the Resolve interface and is responsible for resolving the environment configuration ) is to retrieve environment configuration data from a store (`SystemStoreFacadeService`) and make it available to components before they are displayed.
93
88
94
89
## Store:
95
90
96
-
Store module provides `store-keys.enum`,`user-session-store.service` and
97
-
`system-store-facade.service`. These are used to fetch and update environment configurations.
98
-
It also updates the environment configurations in memory and logs the change in the logging system.Also, provides methods to save, retrieve, and remove user session data such as access token, refresh token, user information, and last accessed URL.
91
+
Store module provides `store-keys.enum`,`user-session-store.service` and`system-store-facade.service`. These are used to fetch and update environment configurations.It also updates the environment configurations in memory and logs the change in the logging system.Also, provides methods to save, retrieve, and remove user session data such as access token, refresh token, user information, and last accessed URL.
99
92
100
93
## Toaster:
101
94
102
-
- In this we are using toaster named Itoaster this is a user interface component that displays
95
+
- In this The boilerplate using toaster named `Itoaster` this is a user interface component that displays
103
96
notifications or alerts to users in a non-intrusive way. Itoaster notifications typically appear as small pop-up messages that provide feedback or information.
104
97
105
-
- In order to use it ,one can incorporate `ToasterService`[here]()
106
-
provided in theme module which provides methods to display toast messages using the NbToastrService from the `@nebular/theme package`. The service has methods to show different types of toast messages such as success, info, warning, error, and default, and allows customization of the toast messages through an optional config parameter. The `ToasterAdapterService` is used to adapt the config object to the format expected by the NbToastrService. The service implements the IToaster interface which defines the method signatures for displaying toast messages.
98
+
- In order to use it ,one can incorporate `ToasterService` provided in theme module which provides methods to display toast messages using the NbToastrService from the `@nebular/theme package`. The service has methods to show different types of toast messages such as success, info, warning, error, and default, and allows customization of the toast messages through an optional config parameter. The `ToasterAdapterService` is used to adapt the config object to the format expected by the NbToastrService. The service implements the IToaster interface which defines the method signatures for displaying toast messages.
107
99
108
100
For more detail about Core Module, refer [here](./src/lib/core/readme.md)
109
101
110
102
## Theme:
111
103
112
-
Theme module in our microservice is usually used in conjunction with Nebular, Nebular is a customizable Angular UI Library and styles designed to create a consistent, modern user interface. Nebular includes a set of pre-defined themes, but you can also create your own custom themes also.
104
+
Theme module in arc is usually used in conjunction with Nebular, Nebular is a customizable Angular UI Library and styles designed to create a consistent, modern user interface. Nebular includes a set of pre-defined themes, but you can also create your own custom themes also.
113
105
114
-
Also, provides methods to register icon packs with the NbIconLibraries service. The NbIconLibraries service is a part of the nebular UI library and is used to manage icon libraries and packs.
106
+
Also, provides methods to register icon packs with the NbIconLibraries service. The `NbIconLibraries` service is a part of the nebular UI library and is used to manage icon libraries and packs.
115
107
116
108
For more details about Theme Module,refer [here](./src/lib/theme/readme.md)
117
109
@@ -124,7 +116,7 @@ For more details about Theme Module,refer [here](./src/lib/theme/readme.md)
124
116
125
117
## Gantt Component:
126
118
127
-
In this microservice we are using bb.gantt,bb.gantt charts,bb.gantt bars a Gantt chart is a user interface component that displays project tasks or events over a timeline, allowing users to visualize the schedule and progress of a project.
119
+
In this The boilerplate usingbb.gantt,bb.gantt charts,bb.gantt bars a Gantt chart is a user interface component that displays project tasks or events over a timeline, allowing users to visualize the schedule and progress of a project.
128
120
129
121
## Login Component:
130
122
@@ -138,19 +130,22 @@ For more details about Theme Module,refer [here](./src/lib/theme/readme.md)
138
130
139
131
- Auth component is a module that handles the authentication and authorization of users. It is responsible
140
132
for managing user sessions, verifying user credentials, and granting access to protected resources based on the user's role and permissions.
141
-
- The auth component typically includes a login as well as a registration form for new users to create an
142
-
account. The component may also handle password reset functionality and provide options for users to manage their accounts
133
+
- The auth component typically includes a login as well as a registration form for new users to create
134
+
an account. The component may also handle password reset functionality and provide options for users to manage their accounts
143
135
144
136
For more details about Components ,refer [here](./src/lib/components/readme.md)
145
137
146
138
# Usage
147
139
148
140
Clone the boilerplate project repository to your local machine:
0 commit comments