CODEWITHSUNDEEP
angularjsangulartypescript
Sagar Wasule
Sagar Wasule

Reputation: 49

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

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>'
    })

Upvotes: 2

Views: 2022

Answers (1)

Aditya Mhamunkar
Aditya Mhamunkar

Reputation: 26

Try importing the file on the top

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

And in the component,

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

Upvotes: 1

Related Questions