До того, как я добавил angular -route, мое приложение работало правильно с productlistview. Поскольку я хотел работать с несколькими представлениями, я добавил productDetailsView. html, а затем ng-view в моем индексе. html. Все, что я получил при компиляции, это заголовок из индекса "Управление продуктами Acme", никаких ошибок на консоли. Проверьте мой код.
module app {
// var views = angular.module('views', []);
var main = angular.module("productManagement",
['ngRoute',
'common.services',
'productResourceMock']);
main.config(routeConfig);
routeConfig.$inject = ["$routeProvider"];
function routeConfig($routeProvider: ng.route.IRouteProvider): void {
$routeProvider
.when('/productList', {
templateUrl: '/app/products/productListView.html',
controller: 'productListCtrl as vm'
})
.when('/productDetail/:productId', {
templateUrl: '/app/products/productDetailView.html',
controller: 'productDetailCtrl as vm'
})
.otherwise('/productList');
}
}
Индекс. html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Acme Product Management</title>
<!-- Library Scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-mocks.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-route.min.js"></script>
<!--Application Script-->
<script src="app/app.js"></script>
<!-- Domain Classes -->
<script src="app/products/product.js"></script>
<!-- Services -->
<script src="app/common/services/common.service.js"></script>
<script src="app/common/services/dataAccessService.js"></script>
<script src="app/common/services/productResourceMock.js"></script>
<!-- Controllers -->
<script src="app/products/productListCtrl.js"></script>
<script src="app/products/productDetailCtrl.js"></script>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body ng-app="productManagement">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">Acme Product Management</div>
</div>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
пакетов. json с папкой npm с соответствующими angular версиями
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"@types/angular": "1.6.57",
"@types/angular-mocks": "1.7.0",
"@types/angular-resource": "1.5.15",
"@types/angular-route": "1.7.0",
"gulp": "4.0.2",
"@types/jquery": "3.3.33",
"del": "5.1.0"
},
"resolutions": {
"**/@types/angular": "1.6.57"
}
}