Parse on load add using declaratively ChildWidget.

2021/12/dojo_demo1/index.html

@@ -8,12 +8,12 @@
   <!--dojoConfig-->
   <script>
     var dojoConfig = {
-      parseOnLoad: false,
+      parseOnLoad: true,
       async: true,
       cacheBust: true, // Get "fresh" resources,
       baseUrl: "/app",
       packages: [ 
-        {name: "dojo", location: "/node_modules/dojo"}
+        {name: "dojo", location: "/node_modules/dojo"},
         {name: "dojox", location: "/node_modules/dojox"},
         {name: "dijit", location: "/node_modules/dijit"},
       ]

2021/12/dojo_demo2/app/widgets/ChildWidget.js

@@ -0,0 +1,11 @@
+define([
+	"dijit/_TemplatedMixin",
+	"dijit/_WidgetBase",
+	"dojo/_base/declare"
+], function(_TemplatedMixin, _WidgetBase, declare, template) {
+	return declare("app/widgets/ChildWidget", [_WidgetBase, _TemplatedMixin], {
+		templateString: "<div>"
+			+ "ChildWidget!!!" 
+			+ "</div>"
+	});
+});

2021/12/dojo_demo2/app/widgets/MainWidget.html

@@ -1,3 +0,0 @@
-<div>
-	Hello World!!!
-</div>

2021/12/dojo_demo2/app/widgets/MainWidget.js

@@ -1,10 +1,16 @@
 define([
 	"dijit/_TemplatedMixin",
+	"dijit/_AttachMixin",
 	"dijit/_WidgetBase",
-	"dojo/_base/declare",
+	"dojo/_base/declare"
-	"dojo/text!./MainWidget.html"
+], function(_TemplatedMixin, _AttachMixin, _WidgetBase, declare, template) {
-], function(_TemplatedMixin, _WidgetBase, declare, template) {
+	return declare("app/widgets/MainWidget", [_WidgetBase, _AttachMixin, _TemplatedMixin], {
-	return declare("app/widgets/MainWidget", [_WidgetBase, _TemplatedMixin], {
+		templateString: "<div>"
-		templateString: template
+			// + "Hello World!!! <input data-dojo-type=\"dijit/form/TextBox\" />" 
+			// this works as it's dijit
+			+ "<div data-dojo-type=\"./ChildWidget\"></div>"
+			// this doesn't work as it's trying to fetch ./node_modules/dojo/ChildWidget which seems to be 
+			// relative to dojo/parser dojo/parser
+			+ "</div>"
 	});
 });

2021/12/dojo_demo2/index.html

@@ -8,14 +8,14 @@
   <!--dojoConfig-->
   <script>
     var dojoConfig = {
-      parseOnLoad: false,
+      parseOnLoad: true,
       async: true,
       cacheBust: true, // Get "fresh" resources,
       baseUrl: "/app",
       packages: [ 
-        {name: "dojo", location: "/node_modules/dojo"}
+        {name: "dojo", location: "/node_modules/dojo"},
-        {name: "dojox", location: "/node_modules/x/dojox"},
+        {name: "dojox", location: "/node_modules/dojox"},
-        {name: "dijit", location: "/node_modules/x/dijit"},
+        {name: "dijit", location: "/node_modules/dijit"}
       ]
     };
   </script>
@@ -26,9 +26,11 @@
     <script>
       require([
         "dojo/dom",
+        "dojo/parser",
         "app/widgets/MainWidget.js",
         "dojo/domReady!"
-      ], function (dom, MainWidget) {
+      ], function (dom, parser, MainWidget) {
+          parser.parse(); // parseOnLoad: true doesn't run this. Why???
           var greeting = dom.byId('root');
           var widget = new MainWidget();
           widget.placeAt(greeting);