网站搜索

angularjs - 从 Angular 1.5 迁移到 Angular 6 时组件中的模板 URL 无法工作


我正在将一个 Angular 1.5 项目迁移到 Angular 6。Angular 1.5 组件中使用的 templateUrl 无法工作。我使用以下包:

Angular CLI 6.0.8 TypeScript 2.7.2 Angular 6.0.7

我有 Angular 1.5 组件,其 templateUrl 已映射。我成功构建了这个混合应用程序,我的 Angular 1 和 Angular 6 组件都能被渲染。但是每当我加载项目时,templateUrl 的路径会显示 404 not found,因此 AngularJS 1.5 组件无法渲染。而如果我使用 'template' 并使用内联 HTML 字符串,则可以正常工作。

我的 Angular 1.5 代码是用 JavaScript 编写的,而我的 Angular 6 代码是用 TypeScript 编写的

有人对此有想法吗?我在这个问题上卡了好几天了

谢谢

编辑

angular.
module('app.users').
component('userDetails', {
    templateUrl : './ng1/app/src/users/user-details.html',
    //template: 'This is user detail',
    controller: UserController
});

使用 template 时工作正常。而 templateUrl 不起作用。我尝试过以下链接 ./ng1/app/src/users/user-details.html
./app/src/users/user-details.html
../user-details.html
./users/user-details.html

我的组件 js 文件位于 ./ng1/app/src/users 下,但在使用 gulp 构建时,生成的捆绑 js 会创建在根文件夹

编辑

我收到的错误如下,

zone.js:2969 GET http://localhost:8082/ng1/app/src/users/user-details.html 404(未找到)

angular.js:13236 错误: [$compile:tpload] 无法加载模板: ./ng1/app/src/users/user-details.html (HTTP 状态: 404 未找到)

编辑 浏览器网址 : http://localhost:8082/users

路线指定为

$routeProvider.when('/users', {
      template: '<user-details></user-details>'
    })

答案#1

尝试导入顶部的文件

import '/ng1/app/src/users/user-details.html';

在组件中,

templateUrl: 'users.user-details.html';