Getting "Invalid recursion selector value 'model' " error after adding a custom component and trying to add the message value.

[#1]

Hi,
I am using AEM 6.5 and following the tutorial https://experienceleague.adobe.com/docs/experience-manager-learn/spa-angular-tutorial. However after adding custom-component to the page on adding the value I am getting Invalid recursion selector value.

I also checked out the source code from https://github.com/adobe/aem-guides-wknd-spa.git but on deploying it to my AEM instance I am still getting the same issue.

Since I am new to AEM I am not able to resolve it.

[#2 · Accepted solution]

Hi,

I am unable to open the first link, but based on the error it could be that the resourceType resolution is failing? eg pointing to a page instead of page/jcr:content

[khaitanPriya24]

Can you show the detailled error message? I would assume that you are using the "model" selector at the wrong location/resource type.

[khaitanPriya24]

Invalid recursion selector value 'model' Cannot serve request to /content/wknd-spa-angular/us/en/home/jcr:content/root/responsivegrid/custom_component.model.json in org.apache.sling.servlets.get.DefaultGetServlet Request Progress: 0 TIMER_START{Request Processing} 1 COMMENT timer_end format is {<elapsed microseconds>,<timer name>} <optional message> 7 LOG Method=GET, PathInfo=null 8 TIMER_START{handleSecurity} 1388 TIMER_END{1378,handleSecurity} authenticator org.apache.sling.auth.core.impl.SlingAuthenticator@52647b5f returns true 1613 TIMER_START{ResourceResolution} 1737 TIMER_END{122,ResourceResolution} URI=/content/wknd-spa-angular/us/en/home/jcr:content/root/responsivegrid/custom_component.model.json resolves to Resource=JcrNodeResource, type=wknd-spa-angular/components/custom-component, superType=null, path=/content/wknd-spa-angular/us/en/home/jcr:content/root/responsivegrid/custom_component 1748 LOG Resource Path Info: SlingRequestPathInfo: path='/content/wknd-spa-an

[Jörg_Hoh]

Hi

 1780 TIMER_END{31,ServletResolution} URI=/content/wknd-spa-angular/us/en/home/jcr:content/root/responsivegrid/custom_component.model.json handled by Servlet=org.apache.sling.servlets.get.DefaultGetServlet

 2443 LOG Using org.apache.sling.servlets.get.impl.helpers.JsonRenderer to render for extension=json

for me that's the problem, because it should not resolve to the DefaultGetServlet, but to a servlet of the SlingModels package.

At which step in the tutorial does this problem occurr?

[khaitanPriya24]

The problem occured when trying to add any new value to card component

[Jörg_Hoh]

Hm, that's strange. According to the information provided the error happens during a GET request, and adding a component is typically handled by a POST request. Can you confirm that your implementation looks like this: https://github.com/adobe/aem-guides-wknd-spa/blob/Angular/extend-json-model-solution/core/src/main/j...

[#8]

@Ankur_Khare below is the code for custom component java class:

import org.apache.sling.models.annotations.*;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import com.adobe.cq.export.json.ComponentExporter;
import com.adobe.cq.export.json.ExporterConstants;
import org.apache.commons.lang3.StringUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import com.adobe.aem.guides.wknd.spa.angular.core.models.CustomComponent;

@Model(adaptables = SlingHttpServletRequest.class, adapters = { CustomComponent.class,
ComponentExporter.class }, resourceType = CustomComponentImpl.RESOURCE_TYPE, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)
public class CustomComponentImpl implements CustomComponent {

static final String RESOURCE_TYPE = "wknd-spa-angular/components/custom-component";

@ValueMapValue
private String message;

@Override
public String getMessage() {
return StringUtils.isNotBlank(message) ? message.toUpperCase() : "";
}

@Override
public String getExportedType() {
return CustomComponentImpl.RESOURCE_TYPE;
}

}

and below is my customComponent.ts file:

import { Component, Input, OnInit } from '@angular/core';

import {MapTo} from '@adobe/cq-angular-editable-components';

const CustomEditConfig = {

  emptyLabel: 'Custom Component',

  isEmpty: cqModel =>

    !cqModel || !cqModel.message || cqModel.message.trim().length < 1

};

@Component({

  selector: 'app-custom',

  templateUrl: './custom.component.html',

  styleUrls: ['./custom.component.css']

})

export class CustomComponent implements OnInit {

  @Input() message: string;

  constructor() { }

  ngOnInit(): void {

  }

}

MapTo('wknd-spa-angular/components/custom-component')(CustomComponent, CustomEditConfig);

[#9]

Check your custom component for the selector which you are trying to use is not getting resolved.

If u can add ur custom component code then we can help u out more