client-side source code

The client-side source code is under the src/main/webapp folder, as we saw earlier. The structure is as follows:

The most noteworthy among these are:

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 JIT (Just-in-time) compilation in the browser. This is ideal for development:

platformBrowserDynamic().bootstrapModule(StoreAppModule)
.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 providers, and imports other modules for the application. It also bootstraps the main application component:

@NgModule({
    imports: [
        BrowserModule,
        ...
        StoreEntityModule,
        // jhipster-needle-angular-add-module JHipster 
         will add new module here
    ],
    declarations: [
        JhiMainComponent,
        ...
        FooterComponent
    ],
    providers: [
        ProfileService,
        ...
        UserRouteAccessService
    ],
    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.
- blocks: This folder consists of HTTP interceptors and other configs used by the application.
- entities: This is where entity modules will be created.
- home: The homepage module.
- layouts: This folder has layout components like the navbar, footer, error pages, and so on.
- shared: This module contains all the shared services (auth, tracker, user), components (login, alert), entity models, and utilities required for the application.
content: This folder contains static content like images, CSS, and SASS files.
i18n: This is where the i18n JSON files live. Each language has a folder with numerous JSON files organized by modules.
swagger-ui: This folder has the Swagger UI client used in development for 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 some commented out utility code like 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 the sw.js.