Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Nacho Vazquez
    @NachoVazquez
    Hello to all and thanks for this awesome library!!
    Nacho Vazquez
    @NachoVazquez

    I'm been reading the docs and I facing the same problem as @mailok.

    The project where I'm planning to use transloco is an Nx monorepo where every app is practically empty.

    All the code is in the libraries and libraries are shared across many apps.

    What I need is to have the i18n .json files contained into each lib to avoid duplication.

    There is an approach to deal with this use case yet?

    Thanks again!

    Shahar Kazaz
    @shaharkazaz
    @NachoVazquez I'm not quite sure I understand.
    Can you please show an example/create a small reproduction?
    Nacho Vazquez
    @NachoVazquez
    Hi, @shaharkazaz thanks for the quick feedback. Sure I can create a Stackblitz for tonight.
    Shahar Kazaz
    @shaharkazaz
    @NachoVazquez cool, waiting to check it out :thumbsup:
    Nacho Vazquez
    @NachoVazquez

    Ok, so apparently Stackblitz and CodeSandbox have some issues with Nx.

    Anyway, this is the repo, I tried to keep it as simple as posible.

    https://github.com/NachoVazquez/transloco-with-nx-libs

    Nacho Vazquez
    @NachoVazquez

    In master, it is using a custom loader and it is not working. I managed to make it work in branch dynamic-translations but I would prefer to use a loader.

    Also, when loading a lib module eagerly, and the translation key is repeated in the app or another lib, it gets overwritten.

    To run the app, just ng serve.

    Thierry
    @ThierryDD

    Hi @shaharkazaz

    Is there anything preventing us to use transloco@2 and angular@8 with transloco-messageformat@1.1.1 ?

    npm WARN @ngneat/transloco-messageformat@1.1.1 requires a peer of @angular/common@^7.2.0 but none is installed. You must install peer dependencies yourself.
    npm WARN @ngneat/transloco-messageformat@1.1.1 requires a peer of @angular/core@^7.2.0 but none is installed. You must install peer dependencies yourself.
    npm WARN @ngneat/transloco-messageformat@1.1.1 requires a peer of @ngneat/transloco@^1.6.0 but none is installed. You must install peer dependencies yourself.

    Or can we safely ignore these warnings?

    Colum Ferry
    @Coly010

    Hi, i'm in the middle of hooking up the Transloco Optimize plugin, but the readme isn't perfect in explanation of using it as a function.
    This:

    const locales = `${config.paths.dist}${config.paths.assets.locales}`;

    could realistically point to a path of any structure.
    Can anyone confirm that the path should look like this:

    const pathToLocales = `${__dirname}/dist/${appName}/assets/i18n`;

    And if so, i'll make a PR to update this to be more specific

    Shahar Kazaz
    @shaharkazaz
    @NachoVazquez cool I'll check it out.
    @ThierryDD Don't think you should have any issues, LMK if you do have :)
    Thierry
    @ThierryDD
    @shaharkazaz So far, so good.
    Shahar Kazaz
    @shaharkazaz
    @Coly010 I'll get back to you on that :slight_smile:
    Colum Ferry
    @Coly010
    @shaharkazaz awesome!
    Nacho Vazquez
    @NachoVazquez
    @shaharkazaz great thanks!
    Shahar Kazaz
    @shaharkazaz
    @Coly010 I updated the README, check it out :slight_smile:
    Shahar Kazaz
    @shaharkazaz
    @Coly010 Thanks for bringing it to our attention, I just saw you wanted to PR that sry I missed that
    Colum Ferry
    @Coly010
    @shaharkazaz no worries! Was just trying to save you time fixing it lol
    @shaharkazaz I have something else i can PR, it seems that the translocoOptimize function isn't a default export from the index.js, however, the docs in the README say to import it as though it was a default export. I'll submit a PR to fix the docs for that
    Colum Ferry
    @Coly010
    Just double checking it all first

    So if i do this:

    import translocoOptimize from '@ngneat/transloco-optimize';

    I get this error

    ERROR! TypeError: transloco_optimize_1.default is not a function

    and if i do this:

    import { translocoOptimize } from '@ngneat/transloco-optimize';

    I get this error

    ERROR! TypeError: transloco_optimize_1.translocoOptimize is not a function

    To fix this I had to use:

    const translocoOptimize = require('@ngneat/transloco-optimize')
    I could submit a PR to update the docs to say to use require or i guess(?) const translocoOptimize = import('@ngneat/transloco-optimize')
    Or I could submit a PR to change the export in that module
    Nacho Vazquez
    @NachoVazquez

    @shaharkazaz I realize that using a unique scope for the eagerly loaded lib modules can solve the problem of the overwritten translations. This is using dynamic translations.

    What remains that I would like you to help me in is achieving the use of loaders in libs. Encapsulating its translation files inside the lib.

    Shahar Kazaz
    @shaharkazaz
    @NachoVazquez I see what you mean, what do you think about the solution offered here: ngneat/transloco#121
    inline loaders
    @Coly010 It works for me, we need to see maybe why are you having issues
    Shahar Kazaz
    @shaharkazaz
    maybe you need allowJS in your tsConfig?
    Colum Ferry
    @Coly010
    @shaharkazaz ahhh that may be it! No worries then!
    Shahar Kazaz
    @shaharkazaz
    Nacho Vazquez
    @NachoVazquez
    Thanks @shaharkazaz . I'll check it out and let you know.
    Nacho Vazquez
    @NachoVazquez
    Hey @shaharkazaz, that's great!. Thank you very much and thanks also to Netanel for creating the example repo. When this feature is going to be shipped??
    Shahar Kazaz
    @shaharkazaz
    @NachoVazquez hopefully soon :slight_smile:
    Thierry
    @ThierryDD

    Minor error in Transloco Documentation for MessageFormat: ngneat/transloco#132
    It should be customFormatters instead of formatters.

    I also noticed that if your customFormatter name begins with one of the default formatters [date, time, duration, etc...], it fails.

    Example:

        TranslocoMessageFormatModule.init({
          customFormatters: {
            time24: v => translateTime(v)
          }
        })

    It fails with the error message: "Expected "," or "}" but "2" found."

    Shahar Kazaz
    @shaharkazaz
    @ThierryDD The 2nd issue doesn't seem to be related to Transloco, this doesn't reproduce when using MF directly?
    Colum Ferry
    @Coly010
    @shaharkazaz potentially bizarre use case or a dumb question.
    We have a situation where we have two URLs in an an accept policy and terms of service string
    So like this
    I accept the <a>policy</a> and the <a>terms of use</a>
    Will we need to run this through a Dom somitizer, or will Transloco allow this?
    Colum Ferry
    @Coly010
    We have thought of a solution using the service api, renderer2 and a pipe, but it's not the nicest solution
    Nacho Vazquez
    @NachoVazquez

    Hello @shaharkazaz, how are you? I just tested the new release, everything is working smoothly. Thanks for the effort!

    There is only one thing I wanted to ask you. Do you know, why I can't use kebab-case as an alias for my libs scope?

    You can try it in the last commit of my master branch in the same repo as before.
    https://github.com/NachoVazquez/transloco-with-nx-libs

    Use lib-a instead of libA in the configuration of the TranslocoLibAModule.
    I can live without it, but I just wanted to ask.

    Thanks again for everything!

    Thierry
    @ThierryDD
    @shaharkazaz
    Here is a demo of the 2nd issue: https://stackblitz.com/edit/transloco-example-qo4qhw
    I defined a customFormatter 'time24'
    Shahar Kazaz
    @shaharkazaz
    @NachoVazquez I'll get back to you on that
    @ThierryDD as I said, I don't think this is related to Transloco, the config you are passing is used by MessageFormat.
    When you try to work directly with MessageFormat (creating a new class and passing the options not related to Transloco) time24 is valid?
    @Coly010 just pass I accept the <a>policy</a> and the <a>terms of use</a> via innerHTML binding and Angular will sanitize it for you if it's inside an html.
    This isn't related to Transloco.
    Correct me if I missunderstood.
    Colum Ferry
    @Coly010

    @shaharkazaz sorry for my lack of clarity. Our usage was <p>{{ t('policyAgreement') }}</p> where in our i18n json files we had:

    {
       "policyAgreement": "I accept the <a>policy</a> and the <a>terms of use</a>"
    }

    If I understand you correctly, you are suggesting we do:
    <p [innerHtml]="t('policyAgreement')"></p>

    Shahar Kazaz
    @shaharkazaz
    @Coly010 exactly, should work for you
    Colum Ferry
    @Coly010
    @shaharkazaz Thanks!
    Colum Ferry
    @Coly010

    @shaharkazaz Doing this has issues with Angular's sanitizer. It strips out the routerLink binding. However, i think this points to a bigger issue. Dynamically adding html to Angular loses any binding to angular directives as angular does not process this new html.
    To counter this we could do:

    <span>{{ t('firstPartReferral') }} <a routerLink="location">{{ t('referralText') }}</a> {{ t('joinWord') }} <a routerLink="terms">{{ t('terms') }}</a></span>

    However, this will fall over itself when we are trying to translate to languages that change word order.

    I know this isn't a transloco issue, but any ideas?