Angular Universal: Cannot find a differ supporting object 'xxx' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

[S1nPur1ty]

Current behavior

After installing Angular Universal for enabling Seo, I had to solve many issues. The last issue that I am facing is that I get to see the following message when serving my project with ssr:

Node Express server listening on http://localhost:4000
ERROR Error: Cannot find a differ supporting object 'home-services-items' of type 'string'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2866855)
    at callHook (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2041370)
    at callHooks (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2040999)
    at executeInitAndCheckHooks (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2040372)
    at selectIndexInternal (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2079475)
    at Module.ɵɵadvance (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2078970)
    at HomeComponent_Template (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:1367657)
    at executeTemplate (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2087004)
    at refreshView (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2083473)
    at refreshComponent (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2099892)
ERROR Error: Cannot find a differ supporting object 'home-teaser-development-items' of type 'string'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2866855)
    at callHook (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2041370)
    at callHooks (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2040999)
    at executeInitAndCheckHooks (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2040372)
    at selectIndexInternal (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2079475)
    at Module.ɵɵadvance (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2078970)
    at HomeComponent_Template (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:1368421)
    at executeTemplate (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2087004)
    at refreshView (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2083473)
    at refreshComponent (/Users/logan/Development/angular/Nobel-Panda/dist/nobelpanda/server/main.js:1:2099892)
ERROR [NetworkError]

I tried to find for solutions, but I just don't understand what the exact problem is right now. I don't know how I am able to fix this issue with Angular Universal.

Expected behavior

Ngx-translate should would without any issues using Angular Universal.

How do you think that we should fix this?

No idea.

Environment

"dependencies": {
    "@agm/core": "^1.1.0",
    "@angular-devkit/schematics": "~9.1.0",
    "@angular/animations": "~9.0.0",
    "@angular/cdk": "^9.2.2",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/fire": "^6.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/material": "^9.2.2",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/platform-server": "~9.0.0",
    "@angular/router": "~9.0.0",
    "@angular/youtube-player": "^9.2.2",
    "@ng-toolkit/universal": "^1.1.21",
    "@nguniversal/express-engine": "^9.1.1",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@schematics/angular": "~9.1.0",
    "bootstrap": "^4.4.1",
    "core-util-is": "^1.0.2",
    "express": "^4.17.1",
    "firebase": "^7.13.2",
    "localstorage-polyfill": "^1.0.1"
  },


Browser:
- [ x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

assets/i18n/en.json content:

"home-services-items": [
        {
            "icon":"design.svg",
            "title":"Design",
            "text":"Creating a timeless corporate identity for your company."
        },
        {
            "icon":"development.svg",
            "title":"Development",
            "text":"Developing with the most modern and safest techniques."
        },
        {
            "icon":"video.svg",
            "title":"Video Content",
            "text":"Filming your company message and vacancies, in full 4K."
        },
        {
            "icon":"smile.svg",
            "title":"User Experience",
            "text":"Ensuring the best experience for your end users."
        },
        {
            "icon":"horse.svg",
            "title":"Strategy & Research",
            "text":"Thinking along with the customer in order to achieve the best end result together."
        },
        {
            "icon":"help.svg",
            "title":"Service",
            "text":"Keeping your website and applications up-to-date to grow together."
        }
    ]

Html content:

<div class="row service-row">
            <div *ngFor="let item of (('home-services-items' | json) | translate)" class="col-md-4 col-12">
                <div class="features mt-5">
                    <img src="assets/images/service-icons/{{ item.icon }}" alt="service icon" />

                    <div class="content mt-4 text-center">
                        <h4 class="title-2">{{ item.title }}</h4>
                        <p class="text-muted mb-0">{{ item.text }}</p>
                    </div>
                </div>
            </div><!--end col-->
        </div><!--end row-->

Any help is much appreciated!

[ihor-zinchenko]

+1

[mrobledor]

same problem here, any solution?

[Amith278]

I have a quick workaround.

Using keyvalue pipe : <*ngFor="let data of 'analysis_service.info-swiper' | translate | keyvalue ">

        {{ data?.value | unknow: "header" }}
        
          {{ data?.value | unknow: "body" }}
        
      

</>

And using a Custom pipe to tackle the "Object Unknown" issue while accessing any value

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'unknow', }) export class UnknowPipe implements PipeTransform { transform(value: any, text?: any): unknown { if ( value != null && value != undefined && value != '' && text != null && text != undefined && text != '' ) return value[text]; return null; } }

---