The client-side source code is in the src/main/webapp folder, as we saw earlier. The structure is as follows:
The most noteworthy pieces of information are as follows:
- app: This folder holds the Angular application's Typescript source code, which is organized with a folder per feature:
- app.main.ts: This is the main file for the Angular app. This bootstraps the Angular application. Notice that it uses platformBrowserDynamic, which lets the application work with Just-in-Time (JIT) compilation in the browser. This is ideal for development:
platformBrowserDynamic()
.bootstrapModule(StoreAppModule, { preserveWhitespaces:
true })
.then(success => console.log(`Application started`))
.catch(err => console.error(err));
- app.module.ts: This is the main module for the Angular app. It declares app-level components and imports other modules for the application. It also bootstraps the main application component:
@NgModule({
imports: [
BrowserModule,
StoreSharedModule,
StoreCoreModule,
StoreHomeModule,
// jhipster-needle-angular-add-module JHipster will
// add new module here
StoreEntityModule,
StoreAppRoutingModule
],
declarations: [JhiMainComponent, ..., FooterComponent],
bootstrap: [JhiMainComponent]
})
export class StoreAppModule {}
- account: This module consists of account-related features such as activate, password, password-reset, register, and settings. Each typical component consists of component.html, component.ts, route.ts, and service.ts files.
- admin: This module consists of admin-related features such as audits, configuration, docs, health, logs, metrics, tracker, and user-management. Each typical component consists of component.html, component.ts, route.ts, and service.ts files.
- core: This module contains all core services (auth, tracker, user, login, language) and configures shared providers for the application.
- blocks: This folder consists of HTTP interceptors and other configs that are used by the application.
- entities: This is where entity modules will be created.
- home: The home page module.
- layouts: This folder has layout components such as the navbar, footer, error pages, and so on.
- shared: This module contains all shared components (login, auth, alert), entity models required for the application, and utilities required for the application.
- content: This folder contains static content such as images, CSS, and SASS files.
- i18n: This is where i18n JSON files live. Each language has a folder with numerous JSON files organized by modules.
- swagger-ui: This folder contains the Swagger UI client that's used in developing API documentation.
- index.html: This is the web application's index file. This contains very minimal code for loading the Angular application's main component. It is a single-page Angular application. You will also find a simple loading page and some commented out utility code such as a Google analytics script and service worker scripts on this file. These can be enabled if required:
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
...
</head>
<body>
...
<jhi-main>
...
</jhi-main>
<noscript>
<h1>You must enable javascript to view this page.</h1>
</noscript>
...
</body>
</html>
To enable PWA mode using service workers, just uncomment the corresponding code in src/main/webapp/index.html to register the service worker. JHipster uses Workbox (https://developers.google.com/web/tools/workbox/), which creates the respective service worker and dynamically generates service-worker.js.
Now that we have learned everything about the application code let's start the application.