unable to fetch url content by using ui.router
my html code
<!doctype Html>
<html lang="en">
<head >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.16/angular-ui-router.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="first.js"></script>
</head>
<body ng-app="myApp">
<a href="first">firstname</a>
<div ui-view></div>
</body>
and my js goes down here
var app=angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider,) {
$stateProvider.state('home', {
url: 'first',
templateUrl: 'msg.html '
})
});
and msg.html
<div >
hello world
</div>
I dont know why i am unable to fetch the url content its throwing an error like object not found any help is appreciated