AngularJS 1.6。组件模板Url答案

【问题标题】：AngularJS 1.6. component templateUrlAngularJS 1.6。组件模板Url
【发布时间】：2017-12-19 16:30:12
【问题描述】：

我正在使用基于 ES6、Webpack 和 AngularJS 组件的架构来尝试制作入门样板。我有我的 app 目录，里面有一个 index.js，我可以在其中导出 app 模块：

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

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

还有另外两个目录 ng 用于 js 文件，templates 用于 htmls。

在app.component.js 中，我想像这样包含 .html 文件：

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

使用这种方法我得到以下错误：

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

但是当我输入文件src/app/templates/app.html 或template: require('../templates/app.html') 的完整路径时，它会按预期工作。

有没有一种方法可以让templateUrl 工作而无需输入要求它的完整路径？

【问题讨论】：

../templates/app.html 是组件的.ts 文件（不是主文件）的相对路径吗？
@AdrienBrunelat 是的。

标签： javascript angularjs webpack

【解决方案1】：

要访问一个页面而不读取完整路径，您需要创建路由。

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

Angular 2 或更高版本 https://angular.io/tutorial/toh-pt5

【讨论】：

【解决方案2】：

我已经看到了一种通过使用会话常量来添加代码的方法，例如 templateUrl: CONFIG.baseUrl +'/templates/app.html'

我也想试试 templateUrl: ../../templates/app.html'

【讨论】：