AngularJS 1.6. component templateUrl

Question

I'm using the ES6, Webpack and AngularJS component based architecture to try and make a starter boilerplate. I have my app directory and inside it there is an index.js where I export the app module:

import { AppComponent } from './ng/app.component.js';

export default angular
    .module('appModule',[])
    .component('app', AppComponent)

as well as two other directories ng for js files and templates for htmls.

Inside app.component.js I'm tring to include the .html file like so:

export const AppComponent = {
    templateUrl: '../templates/app.html',
    controller: class AppController {
        constructor() {
            this.title = "App Page";
        }
    }
}

Using this method I get the following error:

GET http://localhost:8080/templates/app.html 404 (Not Found)

But when I type the full path to the file src/app/templates/app.html or template: require('../templates/app.html') it works as expected.

Is there a way I can make the templateUrl work without having to type the full path of requiring it ?

Answer 1

For access one page without read full path you need to create Routes.

AngularJs 1.x https://www.w3schools.com/angular/angular_routing.asp

Angular 2 or higher https://angular.io/tutorial/toh-pt5

Answer 2

I have seen a way to add the code by using a session constant for example templateUrl: CONFIG.baseUrl +'/templates/app.html'

I would try also templateUrl: ../../templates/app.html'