Generator-jhipster: Alert not working for user management with angular 6 frontend.

[alexis-puska]

Overview of the issue

AlertService don't produce Alert on angular6 front end.
inside the template component is placed.
in the http response, i create an header with the message to display inside the component like that :

ResponseEntity.created(new URI("/api/users/" + newUser.getLogin()))
.headers(HeaderUtil.createAlert("userManagement.created", newUser.getLogin())).body(utilisateurMappeur.toDTO(newUser));

Inside the notification interceptor service angular, the alert is created, but nothing is displayed inside the page.

JHipster Version(s)

jhipster version 5.3.4

JHipster configuration

Using JHipster version installed locally in current project's node_modules
Executing jhipster:info
Options: from-cli: true
Welcome to the JHipster Information Sub-Generator

JHipster Version(s)

[email protected] C:\dev\workspace\masterHipster2
`-- [email protected]

##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "",
      "nativeLanguage": "fr"
    },
    "jhipsterVersion": "5.3.4",
    "applicationType": "monolith",
    "baseName": "",
    "packageName": "",
    "packageFolder": "",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "postgresql",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "l",
    "clientFramework": "angularX",
    "useSass": true,
    "clientPackageManager": "npm",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "fr",
    "languages": [
      "fr",
      "en"
    ]
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

ls: no such file or directory: .jhipster/*.json

JDL entity definitions

Environment and Tools

java version "1.8.0_101"
Java(TM) SE Runtime Environment (build 1.8.0_101-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.101-b13, mixed mode)

git version 2.7.1.windows.2

node: v8.11.3

npm: 6.4.1

yeoman: 2.0.2

yarn: 1.10.0

Congratulations, JHipster execution is complete!

Browsers and Operating System

All browser are impacted by this bug

[atomfrede]

thx @alexis-puska for the bug report, I am able to reproduce it.
@deepu105 Not sure whats going on, but putting the <jhi-alert></jhi-alert> into main.component.html (so basically in the main layout) works fine. But of course now the alert is above the table, not sure if that is ok.

Strange enough, we don't have a problem for normal entities, just the users. looking into it.

It makes sense when it comes e.g. to alert after create (we change the screen from detail to list and have destroyed the alert) but why is also not shown when e.g. deleting an entity is strange.

[atomfrede]

Just did some small debugging, I don't know why but the alerts are always empty in the user management component. Alerts from the user management component also appear in the books screen when removing the timeout. So somehow it looks the alert service are somehow different.

[deepu105]

I need to check, I think the best idea is to switch to toast as we have in
React, since this custom alert we have always been problematic

On Tue, 16 Oct 2018, 10:02 pm Frederik Hahne, [e-mail]
wrote:

thx @alexis-puska https://github.com/alexis-puska for the bug report, I
am able to reproduce it.
@deepu105 https://github.com/deepu105 Not sure whats going on, but
putting the into main.component.html (so
basically in the main layout) works fine. But of course now the alert is
above the table, not sure if that is ok.

It makes sense when it comes e.g. to alert after create (we change the
screen from detail to list and have destroyed the alert) but why is also
not shown when e.g. deleting an entity is strange.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/8498#issuecomment-430379939,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF-lheQ0GpBs_MUHeGPnfmLpDUGfpks5uljs_gaJpZM4XMp-v
.

[atomfrede]

I don't know the ngx code very well, but do we need to register something such that the response headers are evaluated and the alert service creates an alert? Will have a look later.

[jdubois]

This is quite an important bug, I'm adding a $100 bug bounty to it

[atomfrede]

Just to let you know. When putting the alert in the main view (e.g. underneath the footer) all alert do appear there correctly, even from user management component, so the interceptor works just fine. The problem lies somehow in the user management component. It looks like another alert service is injected there (don't know if that is possible with angular's di), because the alerts are always empty, although I can see the existing alerts underneath the user table. No idea whats going on there :(

[atomfrede]

EDIT: Found something about lazy loading and angular creating an instance per module. As we are now lazy loading the admin module it could be something about that...

[atomfrede]

Okay, so I have a half working solution. Indeed it is about lazy loading modules. Mostly we do already a forRoot but not for our shared module (and it seems not to work for nested modules). As a result e.g. the JhiAlertService is used in the interceptors (which are global). When the admin module is loaded it creates a copy of the alert service. Therefore we don't see any alert in the user management screen, but the interceptors still add alerts to the service (which is the one from the global application).

My current state is as follows: I have removed the NgJhipsterModule from the share module and put it into the app module. Now alerts are working just fine, but the translations are not working. Will go on tomorrow.

[atomfrede]

I have a working solution. Give me some time to prepare a PR and let's see if some angular expert can give a complete explanation why its working (I have only a half baked explanation).

[atomfrede]

+1 Thats what I did too. Will create the PR this evening.

Am Mi., 7. Nov. 2018 um 10:08 Uhr schrieb lllllpylllll <
[email protected]>:

Hi All

I had made the below changes and the Alert is able to show after editing a
User Information in User Management.

1. Move the NgJhipsterModule.forRoot to app.module.ts.
2. Set Providers for admin.module.ts.
3. Remove .root from shared-libs.module.ts.

app.module.ts
imports: [ NgJhipsterModule.forRoot({ // set below to true to make alerts
look like toast alertAsToast: false, // alertTimeout: 5000, i18nEnabled:
true, defaultI18nLang: 'en' }) ]

admin.module.ts
providers: [ { provide: JhiLanguageService, useClass: JhiLanguageService
}, { provide: JhiLanguageHelper, useClass: JhiLanguageHelper }, ],

shared-libs.module.ts
imports: [ NgJhipsterModule, ],

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/8498#issuecomment-436554648,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAMaieF-QWXzkMn9YJuUHbkvQE9sPCpDks5usqMNgaJpZM4XMp-v
.

[lllllpylllll]

Hi atomfrede

Based on Angular Provider behavior, if we have Lazy Module that does not provide a service it will use the instance created from root injector (AppModule).

If Providers for admin.module.ts is not set, the translation will not work. It does not seem to be aligned with the behavior, do you have any clue?

[atomfrede]

Yes, observed that too. Still not sure why thats the case. Thats what I mean with I have only a half baked explanation :)

[lllllpylllll]

The translation will also work if we only set the JhiLanguageService within the providers section in Step 2.

Does that mean it has something to do with "JhiLanguageService"?

admin.module.ts
providers: [ { provide: JhiLanguageService, useClass: JhiLanguageService }, ],

[atomfrede]

Yes. I used the translation service directly but with the service it seems
cleaner

On Wed, Nov 7, 2018, 18:17 lllllpylllll <[email protected] wrote:

The translation will also work if we only set the JhiLanguageService
within the providers section in Step 2.

Does that mean it has something to do with "JhiLanguageService"?

admin.module.ts
providers: [ { provide: JhiLanguageService, useClass: JhiLanguageService
}, ],

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/8498#issuecomment-436703837,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAMaibi4HVdgsoawtCoQil3RCK7R8kR1ks5usxWggaJpZM4XMp-v
.