Using Pipes - ExpressionChangedAfterItHasBeenCheckedException

[NathanWalker]

<Label [text]="'LOVE_TECH' | translate"></Label>

Using ng2-translate for that. Standard pipe though. Everything is setup correctly with it in terms of loading locales via .json files.
Throws this error:

[NathanWalker]

This is with these dependencies:

"angular2": "2.0.0-beta.7",
    "nativescript-angular": "0.0.35",
    "ng2-translate": "^1.7.3",
    "parse5": "1.4.2",
    "punycode": "1.3.2",
    "querystring": "0.2.0",
    "reflect-metadata": "0.1.2",
    "rimraf": "^2.5.1",
    "rxjs": "5.0.0-beta.2",
    "tns-core-modules": "^1.7.0-angular-0",
    "url": "0.10.3",
    "zone.js": "0.5.15"

[NathanWalker]

Could this be because I need ChangeDetectionStrategy.OnPush on the component?
Trying to figure out the exact cases where thats needed vs. not.

[matt4446]

Oddly enough that might be why I added that line to one of my decorators. I'm pretty sure I had some directives working at one point or another (to make all text upper case for headers) but I don't have it on anymore. I'll check later on when I get back from work.

[matt4446]

ChangeDetectionStrategy.OnPush was not needed by the looks of it. I have it on my control directive, but I added the pipe to my page directive.

title pipe - It was going to make my life easier making everything caps... good example .. undecided whether I will use it.
decorator - adding pipes: [MyPipe] should work fine in the @component decorator

page view - the pipe is hidden away in the page decorator.

[NathanWalker]

Interesting. good insight. I'm seeing strange issues with change detection. will need to dive deeper when I get the chance.

[matt4446]

What kind of issues?

I have added a pipe using moment.js to format some dates. It worked except for the hours are off for some reason (I wonder what the local settings are on Genymotion). This is within *ng-for template. The items form correctly when the HTTP request is completed and the empty array is replaced with a collection.

I've taken away the change detection on the other directive (so it should be what nativescript uses by default now).

[NathanWalker]

Just what is posted above... changed after it was checked... just in advanced seed on a branch when I use the translate pipes. I also see it with [(ngModel)]. Strange as I see other examples that work with that so need to look deeper.

[hdeshev]

I tried reproducing that here, but it seems to work fine on my end. Of course, I tested it with a very simple scenario, and we probably need to look deeper.

---

I took the opportunity to play with ng2-translate, and it looks really nice. I think we can easily implement a proper (instead of this one) static file translation loader and provide a plugin for nativescript.

[NathanWalker]

@hdeshev excellent, thanks for trying it out. Curious though, shouldn't it work just fine with ng2-translate's default static loader which uses Http? Shouldn't need to provide a custom one I wouldn't think as long as you set the location properly:

translate.useStaticFilesLoader('~/assets/i18n');

Shouldn't that work to just load .json files from that 'local to project directory' resource via Http as normal?

This is all the built-in one does under hood:

public getTranslation(lang: string): Observable<any> {
        return this.http.get(`${this.sfLoaderParams.prefix}/${lang}${this.sfLoaderParams.suffix}`)
            .map((res: Response) => res.json());
    }

I would expect that to work if the directory location was right?
Unfortunately, I have not been able to make that work, not sure why, would appreciate some insight here.

[hdeshev]

AFAIK Http does HTTP requests via the XHR object, which would work if your localization resources are stored on a server somewhere. (That almost feels like a valid use case.) That's why I wanted to try using the NativeScript file system API's first.

[NathanWalker]

@hdeshev Thanks. Since a milestone was added to this, I'm curious if you are thinking of adding a proper static loader as you mentioned above - basic example here - to nativescript-angular itself (would not make sense IMO) or since this supports a 3rd party library, adding as a separate npm module?

I'm thinking we may want to take a brief moment and define a standard practice to follow for things like this.

I would like to start building some supporting things for nativescript-angular that aren't specific to core but would be utilities or like this (supporting a 3rd party library) and curious what you're thinking is with regards to how to publish stuff like that.

• Standard naming convention? prefix? nativescript-ng2-translate-loader? tns-angular-translate-loader?
• Add docs on a wiki here describing how to use them?

This is the type of stuff that would also be well served to highlight in a nativescript-angular cookbook with different recipe's detailing how to do things and integrate with other libs, etc. I could help with such a cookbook. Similar to what angular team is doing here:
https://angular.io/docs/ts/latest/cookbook/
How to do modals as mentioned here would also be nice in the cookbook (once they work).

Just want to be sure I'm on the same page with what the core team is thinking about stuff like this.

[NathanWalker]

@hdeshev I went ahead and implemented a working loader for {N} here which loads .json locale files from local resources: 👍

https://github.com/NathanWalker/angular2-seed-advanced/blob/master/nativescript/app/shared/core/services/ng2-translate-loader.service.ts

It allowed me to do this :)