Just before I go into the issue here is an overview of my project structure
-- Common
--services
--views
--viewmodels
-- Product1
--services
--views
-- mywork
-- overview.html
-- sections
-- audit.html
-- completed.html
-- attention.html
-- index.html
--viewmodels
-- mywork
-- overview.js
-- sections
-- audit.js
-- completed.js
-- attention.js
-- index.js
Now I've set up a section in Product1 called mywork that contains a child-router. The core route in shell.js is set using a splat.
{ route: 'myWork*details', moduleId: 'product1/viewmodels/myWork/overview', title: 'My Work' }
Then the child route is created as
var childRouter = router.createChildRouter()
.makeRelative({ moduleId: 'product1/viewmodels/mywork/sections', fromParent: true })
.map([
{ route: [''], moduleId: 'index', title: 'Overview', icon: 'fa-cogs', nav: false },
{ route: 'audits', moduleId: 'audits', title: 'Audits', icon: 'fa-list', nav: true },
{ route: 'completed', moduleId: 'completed', title: 'Tracked Records', icon: 'fa-list', nav: true },
{ route: 'attention', moduleId: 'attention', title: 'Requires Attention', icon: 'fa-list', nav: true }
]).buildNavigationModel();
The main issue is that when accessing any of the pages through a navigation bar I'm given the error...
View Not Found. Searched for "product1/views/mywork/sections/audits" via path "text!product1/views/mywork/sections/audits.html".
Yet the view for the overview page works fine defined by the route ['']. Any ideas as to why my other views are not found even though the viewmodels are and what is text! before the path in the error?
Note made, Child routes require at least a <div></div>
tag in the html files which I assume is due to some type of id assignment otherwise the view will not be found by a child router.