It's really frustrating me. I have an angular module that is injected into different apps. Whenever I attempt to use templateUrl with a relative path in the shared module, it throws a 404 error.
angular.min.js:99 GET http://localhost:8001/modals/modal.html/ 404 (Not Found)
This is how my directories are structured:
order-request
|- modals
|- modal.html
|- index.js
|- InitiateTransaction.js
index.js
import * as angular from 'angular';
import InitiateTransaction from './InitiateTransaction';
export default angular
.module('orders', [])
.component('initiateTransaction', InitiateTransaction);
InitiateTransaction.js
export default {
template: `<div>
<div class="btn-group">
<div uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-flat btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Initiate Transaction <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu dropdown-menu text-left" role="menu" aria-labelledby="single-button">
<li role="menuitem"><a class="clickable" ng-click="$ctrl.open('subscription')">Subscription</a></li>
<li role="menuitem"><a class="clickable" ng-click="$ctrl.open('redemption')">Redemption</a></li>
</ul>
</div>
</div>
</div>`,
controller: class InitiateTransaction {
constructor($scope, $uibModal) {
this.$scope = $scope;
this.$uibModal = $uibModal;
this.modalInstance = null;
}
open(transactionType) {
this.modalInstance = this.$uibModal.open({
templateUrl: modals/modal.html',
size: 'lg',
scope: this.$scope
});
}
}
};
I am not using webpack and have not been able to import html files at the top of InitiateTransaction.js
I've always believed templateUrl searches from the level of the index file for the module? Is this correct?
Is there something I should do in the app that injects this?
import '<some-working-path>/order-requests/index';
const app = angular.module('PortfolioApp', ['orders']);