Sitecore jss angular sample application having empty body

Question

I have Sitecore 9.0 update -1 version and followed (https://jss.sitecore.com/docs/getting-started/jss-server-install) to setup JSS server.

After deploying angular sample app, Site ui has empty body other than logo and navigation.

Case 1: Open site via newly added binding

No errors or warnings in console.

I can see the content items,placeholder,renderings,template details in sitecore.

Refer site definition below,

 <site patch:before="site[@name='website']"
            inherits=""
            name="fresh-angular"
            hostName="fresh-angular.dev.local"
            rootPath="/sitecore/content/fresh-angular"
            startItem="/home"
            database="master" />
    </sites>

Case 2: Open site in experience editor

Here also same case but with error message like below:

"An error occurred. [Log message: Value cannot be null. Parameter name: fieldNameTranslator]"

Case 3: open as jss start:connected

Here i try to run command jss start:connected, Same issue with warning message.

Warning error below

Placeholder 'jss-main' was not found in the current rendering data {
  "name": "Home",
  "displayName": "Home",
  "fields": {
    "Text": {
      "value": "<p style=\"line-height: 22px;\">From a single connected platform that also integrates with other customer-facing platforms, to a single view of the customer in a big data marketing repository, to completely eliminating much of the complexity that has previously held marketers back, the latest version of Sitecore makes customer experience highly achievable. Learn how the latest version of Sitecore gives marketers the complete data, integrated tools, and automation capabilities to engage customers throughout an iterative lifecycle &ndash; the technology foundation absolutely necessary to win customers for life.</p>\n<p>For further information, please go to the <a href=\"https://doc.sitecore.net/\" target=\"_blank\" title=\"Sitecore Documentation site\">Sitecore Documentation site</a></p>\r",
      "editable": "<input id='fld_110D559FDEA542EA9C1C8A5DF7E70EF9_A60ACD61A6DB41828329C957982CEC74_en_1_38ea58d9bd7f4a73b43127ecce83b8f7_16' class='scFieldValue' name='fld_110D559FDEA542EA9C1C8A5DF7E70EF9_A60ACD61A6DB41828329C957982CEC74_en_1_38ea58d9bd7f4a73b43127ecce83b8f7_16' type='hidden' value=\"&lt;p style=&quot;line-height: 22px;&quot;&gt;From a single connected platform that also integrates with other customer-facing platforms, to a single view of the customer in a big data marketing repository, to completely eliminating much of the complexity that has previously held marketers back, the latest version of Sitecore makes customer experience highly achievable. Learn how the latest version of Sitecore gives marketers the complete data, integrated tools, and automation capabilities to engage customers throughout an iterative lifecycle &amp;ndash; the technology foundation absolutely necessary to win customers for life.&lt;/p&gt;\n&lt;p&gt;For further information, please go to the &lt;a href=&quot;https://doc.sitecore.net/&quot; target=&quot;_blank&quot; title=&quot;Sitecore Documentation site&quot;&gt;Sitecore Documentation site&lt;/a&gt;&lt;/p&gt;\r\" /><span class=\"scChromeData\">{\"commands\":[{\"click\":\"chrome:field:editcontrol({command:\\\"webedit:edithtml\\\"})\",\"header\":\"Edit Text\",\"icon\":\"/temp/iconcache/office/16x16/pencil.png\",\"disabledIcon\":\"/temp/pencil_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Edit the text\",\"type\":null},{\"click\":\"chrome:field:execute({command:\\\"bold\\\", userInterface:true, value:true})\",\"header\":\"\",\"icon\":\"/temp/iconcache/office/16x16/font_style_bold.png\",\"disabledIcon\":\"/temp/font_style_bold_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Bold\",\"type\":null},{\"click\":\"chrome:field:execute({command:\\\"Italic\\\", userInterface:true, value:true})\",\"header\":\"\",\"icon\":\"/temp/iconcache/office/16x16/font_style_italics.png\",\"disabledIcon\":\"/temp/font_style_italics_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Italic\",\"type\":null},{\"click\":\"chrome:field:execute({command:\\\"Underline\\\", userInterface:true, value:true})\",\"header\":\"\",\"icon\":\"/temp/iconcache/office/16x16/font_style_underline.png\",\"disabledIcon\":\"/temp/font_style_underline_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Underline\",\"type\":null},{\"click\":\"chrome:field:insertexternallink\",\"header\":\"\",\"icon\":\"/temp/iconcache/office/16x16/earth_link.png\",\"disabledIcon\":\"/temp/earth_link_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Insert an external link into the text field.\",\"type\":null},{\"click\":\"chrome:field:insertlink\",\"header\":\"\",\"icon\":\"/temp/iconcache/office/16x16/link.png\",\"disabledIcon\":\"/temp/link_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Insert a link into the text field.\",\"type\":null},{\"click\":\"chrome:field:removelink\",\"header\":\"\",\"icon\":\"/temp/iconcache/office/16x16/link_broken.png\",\"disabledIcon\":\"/temp/link_broken_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Remove link.\",\"type\":null},{\"click\":\"chrome:field:insertimage\",\"header\":\"Insert image\",\"icon\":\"/temp/iconcache/office/16x16/photo_landscape.png\",\"disabledIcon\":\"/temp/photo_landscape_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Insert an image into the text field.\",\"type\":null},{\"click\":\"chrome:common:edititem({command:\\\"webedit:open\\\"})\",\"header\":\"Edit the related item\",\"icon\":\"/temp/iconcache/office/16x16/cubes.png\",\"disabledIcon\":\"/temp/cubes_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Edit the related item in the Content Editor.\",\"type\":\"common\"},{\"click\":\"chrome:rendering:personalize({command:\\\"webedit:personalize\\\"})\",\"header\":\"Personalize\",\"icon\":\"/temp/iconcache/office/16x16/users_family.png\",\"disabledIcon\":\"/temp/users_family_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Create or edit personalization for this component.\",\"type\":\"sticky\"}],\"contextItemUri\":\"sitecore://master/{110D559F-DEA5-42EA-9C1C-8A5DF7E70EF9}?lang=en&ver=1\",\"custom\":{},\"displayName\":\"Text\",\"expandedDisplayName\":\"Please enter text of the item here.\"}</span><span scFieldType=\"rich text\" scDefaultText=\"[No text in field]\" contenteditable=\"true\" class=\"scWebEditInput\" id=\"fld_110D559FDEA542EA9C1C8A5DF7E70EF9_A60ACD61A6DB41828329C957982CEC74_en_1_38ea58d9bd7f4a73b43127ecce83b8f7_16_edit\"><p style=\"line-height: 22px;\">From a single connected platform that also integrates with other customer-facing platforms, to a single view of the customer in a big data marketing repository, to completely eliminating much of the complexity that has previously held marketers back, the latest version of Sitecore makes customer experience highly achievable. Learn how the latest version of Sitecore gives marketers the complete data, integrated tools, and automation capabilities to engage customers throughout an iterative lifecycle &ndash; the technology foundation absolutely necessary to win customers for life.</p>\n<p>For further information, please go to the <a href=\"https://doc.sitecore.net/\" target=\"_blank\" title=\"Sitecore Documentation site\">Sitecore Documentation site</a></p>\r</span>"
    },
    "Title": {
      "value": "Sitecore Experience Platform",
      "editable": "<input id='fld_110D559FDEA542EA9C1C8A5DF7E70EF9_755773843C9745DAA84781B00500E250_en_1_38ea58d9bd7f4a73b43127ecce83b8f7_17' class='scFieldValue' name='fld_110D559FDEA542EA9C1C8A5DF7E70EF9_755773843C9745DAA84781B00500E250_en_1_38ea58d9bd7f4a73b43127ecce83b8f7_17' type='hidden' value=\"Sitecore Experience Platform\" /><span class=\"scChromeData\">{\"commands\":[{\"click\":\"chrome:common:edititem({command:\\\"webedit:open\\\"})\",\"header\":\"Edit the related item\",\"icon\":\"/temp/iconcache/office/16x16/cubes.png\",\"disabledIcon\":\"/temp/cubes_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Edit the related item in the Content Editor.\",\"type\":\"common\"},{\"click\":\"chrome:rendering:personalize({command:\\\"webedit:personalize\\\"})\",\"header\":\"Personalize\",\"icon\":\"/temp/iconcache/office/16x16/users_family.png\",\"disabledIcon\":\"/temp/users_family_disabled16x16.png\",\"isDivider\":false,\"tooltip\":\"Create or edit personalization for this component.\",\"type\":\"sticky\"}],\"contextItemUri\":\"sitecore://master/{110D559F-DEA5-42EA-9C1C-8A5DF7E70EF9}?lang=en&ver=1\",\"custom\":{},\"displayName\":\"Title\",\"expandedDisplayName\":\"Please enter title of the item here.\"}</span><span id=\"fld_110D559FDEA542EA9C1C8A5DF7E70EF9_755773843C9745DAA84781B00500E250_en_1_38ea58d9bd7f4a73b43127ecce83b8f7_17_edit\" sc_parameters=\"prevent-line-break=true\" contenteditable=\"true\" class=\"scWebEditInput\" scFieldType=\"single-line text\" scDefaultText=\"[No text in field]\">Sitecore Experience Platform</span>"
    }
  },
  "databaseName": "master",
  "deviceId": "fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3",
  "itemId": "110d559f-dea5-42ea-9c1c-8a5df7e70ef9",
  "itemLanguage": "en",
  "itemVersion": 1,
  "layoutId": "14030e9f-ce92-49c6-ad87-7d49b50e42ea",
  "templateId": "76036f5e-cbce-46d1-af0a-4143f9b557aa",
  "templateName": "Sample Item",
  "placeholders": {}
}

What is missing in the sample application , why the body content not rendering.

Answer 1

Based on the error message Placeholder 'jss-main' was not found in the current rendering data and the data you're showing along with that error, it looks like your requests are not resolving to the correct <site />.

I noticed in the Experience Editor screenshot that you're browsing to sc90.local but your JSS <site /> definition hostName is set to fresh-angular.dev.local. That is the URL/host you need to browse to.

Also, for connected mode, be sure that the layoutServiceHost value in the scjssconfig.json file in your JSS app matches the host name of your site definition. e.g.

{
  "sitecore": {
    // other values omitted for brevity
    "layoutServiceHost": "http://fresh-angular.dev.local"
  }
}