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

Question

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

Does anyone has some idea on this I'm struck in this issue for last couple of days

Thanks

EDIT

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

EDIT

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)

EDIT Browser url : http://localhost:8082/users

Route is specified as

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

It looks like a path issue. You need to check 404 url against your folder structure. — hurricane
– hurricane, Commented Jul 11, 2018 at 11:16
How do you build the Angular 6 app? What is the templateUrl value? — kvetis
– kvetis, Commented Jul 11, 2018 at 11:16
@hurricane .. This path provided is correct as far as folder structure is concerned, it was working fine when angular 1.5 code is run independently. Is there something with cli ? do you have any idea ? — Sagar Wasule
– Sagar Wasule, Commented Jul 11, 2018 at 11:47
@kvetis I build it using angular cli. Template url used in angular 1.5 component is not working — Sagar Wasule
– Sagar Wasule, Commented Jul 11, 2018 at 11:48
@SagarWasule as i told you, you need to share with us 404 url and folder structure. — hurricane
– hurricane, Commented Jul 11, 2018 at 11:48

Aditya Mhamunkar · Accepted Answer · 2018-10-19 20:06:20Z

1

Try importing the file on the top

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

And in the component,

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

answered Oct 19, 2018 at 20:06

Aditya Mhamunkar

261 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related