ng-jhipster - TranslateHttpLoader should use SERVER_URL for translation currently using the relative path

vidhya03 commented 6 years ago

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)

mycloud-app@0.0.0 C:\onecloud\irepo\mycloud-app
`-- generator-jhipster@5.5.0

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

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.labkit.sci.mycloud",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "5.5.0",
    "applicationType": "monolith",
    "baseName": "mycloudApp",
    "packageName": "com.labkit.sci.mycloud",
    "packageFolder": "com/labkit/sci/mycloud",
    "serverPort": "8383",
    "authenticationType": "oauth2",
    "cacheProvider": "no",
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "gradle",
    "enableSwaggerCodegen": false,
    "clientFramework": "angularX",
    "useSass": true,
    "clientPackageManager": "npm",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en",
      "de"
    ]
  }
}

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

JDL entity definitions

Environment and Tools

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

git version 2.19.1.windows.1

node: v8.12.0

npm: 6.4.1

yarn: 1.10.1

Overview of the issue

Jhipster JhiLanguageService always points to relative path

I have configured the SERVER_API_URL in webpack.common.js to

SERVER_API_URL: 'http://localhost:9000/'

however the JhiLanguageService is always pointed to relative path

i have also configured in mycloud-app\src\main\webapp\app\app.constants.ts

export const SERVER_API_URL = 'http://localhost:9000/'; still the url pointing to relative path http://localhost:9000/site/product/i18n/en.json?buildTimestamp=1540574017051

however rest of the api calls are using the SERVER_API_URL, for eg

http://localhost:9000/management/info
http://localhost:9000/api/account

is it bug or where do we configure the languageservice path.

Motivation for or Use Case

If SERVER_API_URL is configured , it should use the SERVER_API_URL, or base href or some other way to configure the translate service path in TranslateHttpLoader

export function translatePartialLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, 'i18n/', `.json?buildTimestamp=${process.env.BUILD_TIMESTAMP}`);
}

Reproduce the error

I am integrating the jhipster in to the static sites. which has path to multiple pages, I have added an entry in webpack.common.js under the CopyWebpackPlugin Before:

 new CopyWebpackPlugin([
            { from: './node_modules/swagger-ui/dist/css', to: 'swagger-ui/dist/css' },
            { from: './node_modules/swagger-ui/dist/lib', to: 'swagger-ui/dist/lib' },
            { from: './node_modules/swagger-ui/dist/swagger-ui.min.js', to: 'swagger-ui/dist/swagger-ui.min.js' },
            { from: './src/main/webapp/swagger-ui/', to: 'swagger-ui' },
            { from: './src/main/webapp/content/', to: 'content' },
            { from: './src/main/webapp/favicon.ico', to: 'favicon.ico' },
            { from: './src/main/webapp/manifest.webapp', to: 'manifest.webapp' },
            // jhipster-needle-add-assets-to-webpack - JHipster will add/remove third-party resources in this array
            { from: './src/main/webapp/robots.txt', to: 'robots.txt' }
        ]),

After: Added this { from: './src/main/webapp/site/', to: 'site' }, hence the file looks like the below

 new CopyWebpackPlugin([
            { from: './node_modules/swagger-ui/dist/css', to: 'swagger-ui/dist/css' },
            { from: './node_modules/swagger-ui/dist/lib', to: 'swagger-ui/dist/lib' },
            { from: './node_modules/swagger-ui/dist/swagger-ui.min.js', to: 'swagger-ui/dist/swagger-ui.min.js' },
            { from: './src/main/webapp/swagger-ui/', to: 'swagger-ui' },
            { from: './src/main/webapp/content/', to: 'content' },
            { from: './src/main/webapp/favicon.ico', to: 'favicon.ico' },
            { from: './src/main/webapp/manifest.webapp', to: 'manifest.webapp' },
            // Added for site - my cloud static pages
            { from: './src/main/webapp/site/', to: 'site' },
            // jhipster-needle-add-assets-to-webpack - JHipster will add/remove third-party resources in this array
            { from: './src/main/webapp/robots.txt', to: 'robots.txt' }
        ]),

Under the site/ directory they are multiple index.html , i have added the js in all index.html , so that where ever user navigate our angular will load on that page.

<script type="text/javascript" src="/app/polyfills.bundle.js"></script>
<script type="text/javascript" src="/app/main.bundle.js"></script>
<script type="text/javascript" src="/app/global.bundle.js"></script>

Suggest a Fix

As mention here https://github.com/ngx-translate/core/issues/802#issuecomment-375880371 we can change the logic here

export function translatePartialLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, 'i18n/', `.json?buildTimestamp=${process.env.BUILD_TIMESTAMP}`);
}

deepu105 commented 6 years ago

@vidhya03 can you do a PR?

vishal423 commented 6 years ago

As per my understanding, SERVER_API_URL is meant to point to remote server (when server side code is deployed separately from frontend code) and shouldn't be used to access frontend i18n resources (i18n access should always be relative to frontend deployment).

If I have correctly understood this issue, then, the requirement is to provide a way to customize i18n bundle path and that should be done in ng-jhipster

vidhya03 commented 6 years ago

Hi @deepu105 , thanks a lot, i expected your reply..
Could you please help. so that i can fix

export function translatePartialLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, ${process.env.SERVER_API_URL}+'/i18n/', `.json?buildTimestamp=${process.env.BUILD_TIMESTAMP}`);
}

ruddell commented 6 years ago

@vidhya03 I think @vishal423 is right that the SERVER_API_URL is only used to specify the backend API URL. Your i18n resources should be hosted relative to your client.

Have you tried setting the <base href="./" /> to / instead of ./ in your custom index.html files?

deepu105 commented 6 years ago

Vishal is right. We can't change the lib for non standard use cases.

On Fri, 2 Nov 2018, 9:24 pm Jon Ruddell <notifications@github.com wrote:

@vidhya03 https://github.com/vidhya03 I think @vishal423 https://github.com/vishal423 is right that the SERVER_API_URL is only used to specify the backend API URL. Your i18n resources should be hosted relative to your client.

Have you tried setting the to / instead of ./ in your custom index.html https://github.com/jhipster/jhipster-sample-app/blob/master/src/main/webapp/index.html#L4 files?

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

vidhya03 commented 6 years ago

@ruddell yes i tried setting base href, however I'm integrating jhipster into static sites hugo, there were multiple places we use jhipster app. (sample jhipster app but different pages we redirect the router based on webcomb.html/esb.html) this page has both static and dynamic content. https:///site/product/webcomb.html#/ https:///site/product/webcom/esb.html#/

my concern is at-least we can customize the i18n path , instead of relative .

deepu105 commented 6 years ago

@vidhya03 if you can do a PR to update the lib in such a way that it doesnt affect the normal applications then I can take a look and merge it

deepu105 commented 6 years ago

i'm closing this as its not a bug

coolduebtn commented 5 years ago

Hi @vidhya03 , How did you fix your issue. I need to add a prefix to my json file.

vidhya03 commented 5 years ago

Hi Chandan, @coolduebtn

I have tricked it in my webpack scripts webpack.common.js,

 new MergeJsonWebpackPlugin({
            output: {
                groupBy: [
                    { pattern: './src/main/webapp/i18n/en/*.json', fileName: './i18n/en.json' },
                    { pattern: './src/main/webapp/i18n/en/*.json', fileName: './site/i18n/en.json' },
                    { pattern: './src/main/webapp/i18n/de/*.json', fileName: './i18n/de.json' },
                    { pattern: './src/main/webapp/i18n/de/*.json', fileName: './site/i18n/de.json' }
                    // jhipster-needle-i18n-language-webpack - JHipster will add/remove languages in this array
                ]
            }
        })

gioma68 commented 3 years ago

Hi, I have developed a site using Jhipster, for customer need it must be deployed using a web context different from / , e.g. /CustomerPortal. Setting servlet context and BaseHrefWebpackPlugin({ baseHref: '/CustomerPortal' }), all work well. Only the resolution of file i18n path is wrong. I follow @vidhya03 suggestion to set prefix for i18 resource resolution in webpack.common.js, but it dosen't work for me, when I inspect chrome I always see error 404 (not found) for i18n files because the base context in the requests is omitted. The request url is always http://my.base.portal/i18n/en.json instead of http://my.base.portal/CustomerPortal/i18n/en.json Any suggestion? Thanks in advance, Giovanni

jhipster / generator-jhipster