Template Url in component not working while Angular 1.5 to Angular 6 migration using Angular cli 6

[sagarwasule]

Bug Report or Feature Request (mark with an x)

- [ X] bug report -> please search issues before submitting
- [ ] feature request

Area

- [ X] devkit
- [ ] schematics

Versions

Node : 8.11.1
npm : 5.6.0

Repro steps

I'm working on migrating a Angular 1.5 project to Angular 6. The templateUrl used in Angular 1.5 component is not working. I'm using following packages,

Angular cli 6.0.8 typescript 2.7.2 Angular 6.0.7

I have Angular 1.5 components which has templateUrl mapped. I successfully was able to build this hybrid app where my angular 1 and angular 6 components are getting rendered. Whenever I load the project the templateUrl gets the path as 404 not found, hence angularjs 1.5 component does not get rendered. While if I use 'template' with inline html strings then it works.

My Angular 1.5 code is in javascript while I'm using typescript for my Angular 6 code

angular.
module('app.users').
component('userDetails', {
templateUrl : './ng1/app/src/users/user-details.html',
//template: 'This is user detail',
controller: UserController
});
When using template it works fine. While templateUrl is not working. I have tried the following links ./ng1/app/src/users/user-details.html
./app/src/users/user-details.html
../user-details.html
./users/user-details.html

My component js file is present under ./ng1/app/src/users but while build happens using gulp the bundle js gets created at root folder

The log given by the failure

Error that I'm receiving is below,

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

angular.js:13236 Error: [$compile:tpload] Failed to load template: ./ng1/app/src/users/user-details.html (HTTP status: 404 Not Found)

Desired functionality

TemplateUrl should work with relative path of html file for the components

[SpeCT]

I experience the very same issue. Tried to upgrade from hybrid app from ng4 to ng6, but now got my ng1 components not working because of these 404.

[sagarwasule]

@SpeCT how did you resolved this issue ?

[SpeCT]

@sagarwasule Replace templateUrl: “...” with template: require(“...”)

[filipesilva]

We never really intended the functionality of replacing AngularJS templateUrls, it just so happened they had the same property name as Angular. I'm sorry to hear this changed, but this isn't a feature we are looking at adding explicitely.

[devniz]

I have a similar issue where I created a hybrid app of AngularJS 1.7.3 running next to Angular 6. The app builds successfully and there is no error in the log. When I do ng serve I can see Angular 6 looking at the default routing of AngularJS and redirect, but the screen is white and nothing happens. If I replace template : <component><component> by template: <h1>Hello World<h1> it is working. Anyone knows why my hybrid app does not seems to load my AngularJS component from the router?

[kostyash11]

I think its some sort of regression:

it worked perfect with: "@angular-devkit/build-angular": "~0.7.4",
and started get problem when we updated to :
"@angular-devkit/build-angular": "~0.11.3" (during upgrade to angular 7.1.3 from 6)

We never really intended the functionality of replacing AngularJS templateUrls, it just so happened they had the same property name as Angular. I'm sorry to hear this changed, but this isn't a feature we are looking at adding explicitely.

[Camo30]

Same here, worked perfectly with

"@angular-devkit/build-angular": "0.8.9"

ever since we updated to >0.10.x it fails in the browser

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}