My main objective is to enable users to view products by clicking on the item itself. For each product item displayed in main.html, the URL format is like this...
<a href="/products/{{ product.id }}">{{ product.title }}</a>
For instance, when currently navigating through localhost:8000/products/4/, the itemDetails.html page appears but with several 404 errors and
Error: $injector:nomod Module Unavailable Module 'productFind' is not available
The content of my items.route.js looks as follows:
(function () {
'use strict';
angular
.module('items')
.config(routerConfig);
function routerConfig($stateProvider) {
$stateProvider
.state('itemDetails', {
url: '/products/:id',
templateUrl: 'items/itemDetails.html',
controller: 'ItemDetailsController',
controllerAs: 'itemDetails'
})
}
})();
And in my index.html, I have
<div ng-view></div>
The index.module.js file contains
import { config } from './index.config';
import { routerConfig } from './index.route';
import { runBlock } from './index.run';
import { MainController } from './main/main.controller';
import '../app/components/items/items.module.js';
import { ItemDetailsController } from '../app/components/items/items.controller';
import { GithubContributorService } from '../app/components/githubContributor/githubContributor.service';
import { WebDevTecService } from '../app/components/webDevTec/webDevTec.service';
import { NavbarDirective } from '../app/components/navbar/navbar.directive';
import { MalarkeyDirective } from '../app/components/malarkey/malarkey.directive';
angular.module('productFind', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngRoute', 'toastr', 'items'])
.constant('malarkey', malarkey)
.constant('moment', moment)
.config(config)
.config(routerConfig)
.run(runBlock)
.service('githubContributor', GithubContributorService)
.service('webDevTec', WebDevTecService)
.controller('MainController', MainController)
.controller('ItemDetailsController', ItemDetailsController)
.directive('acmeNavbar', NavbarDirective)
.directive('acmeMalarkey', MalarkeyDirective);
The structure of my files appears like so...
productFind
...
src
app
components
items
itemDetails.html
items.controller.js
items.module.js
items.route.js
itemsDataService.js
main
main.controller.js
main.html
index.module.js
index.route.js
I suspect this issue is related to routing, hence my question: What mistakes could be causing this error message when trying to access the details of an item or product: localhost:8000/products/4/?