What Is ng-include?
In AngularJS, ng-include is used to embed an external HTML file or template into your current view.
Syntax:
<div ng-include="'template.html'"></div>
Common Issues and Fixes
Let’s go through the most common problems one by one:
1. Wrong Path to Template File
Absolute vs. Relative Paths
Wrong:
<div ng-include="'views/header.html'"></div>
…when your file is actually in partials/header.html
Fix:
- Use browser dev tools → Network tab to confirm if the file is 404.
- Correct the path:
<div ng-include="'partials/header.html'"></div>
Tip:
Always quote the path and use single quotes inside the expression.
2. Missing Quotes Around Template Path
Wrong:
<div ng-include=template.html></div>
Fix:
<div ng-include="'template.html'"></div>
AngularJS interprets ng-include as an expression, so without quotes, it looks for a variable.
3. Template File Not Served by Server
If you’re opening the HTML file directly in the browser (file:///), ng-include will not load external templates due to CORS and browser restrictions.
Fix:
- Always test AngularJS apps via a local server like:
- VS Code Live Server
http-server(Node.js)- Python:
python -m http.server - Apache/Nginx
4. Template Contains Angular Code But Not Compiled
If the included template has Angular expressions ({{ }}) but they don’t render, the problem may be:
- Wrong controller scope
- Template loaded too late
- Data not yet available
Fix:
- Use
ng-controllerinside the included template. - Or wrap your
ng-includewith a controller:
<div ng-controller="HeaderCtrl">
<div ng-include="'header.html'"></div>
</div>
5. ng-include Binding to a Variable That Is Undefined
Wrong:
<div ng-include="templateUrl"></div> <!-- undefined -->
Fix:
Make sure templateUrl is defined in your controller:
$scope.templateUrl = 'partials/header.html';
6. Using Double Quotes Wrongly Inside ng-include
Angular evaluates expressions. If you write it like this:
<div ng-include="partials/header.html"></div>
It will break.
Fix:
Use quotes:
<div ng-include="'partials/header.html'"></div>
OR use a scope variable:
<div ng-include="dynamicTemplate"></div>
7. $templateRequest or Interceptors Causing Block
If you’ve overridden $http or $templateRequest for authentication or token-based access, Angular might silently fail to load the template.
Fix:
- Check for console errors
- Allow template file types through interceptors
8. Wrong MIME Type or Not Returned as Text/HTML
When serving .html files from a custom backend, ensure they’re served with the correct headers.
Fix:
Make sure server response has:
Content-Type: text/html
Debug Checklist
| Check | How |
|---|---|
| File path | Use DevTools > Network tab (404 error?) |
| Console errors | Check for CORS or injection errors |
| Serving from a server | Use http://, not file:/// |
| Quotes in ng-include | 'template.html' |
| Controller scope | Wrap in correct controller |
| Correct content type | text/html |
Full Example
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div ng-include="'header.html'"></div>
</div>
</body>
</html>
app.js
angular.module('myApp', [])
.controller('MainCtrl', function($scope) {
$scope.title = "My App";
});
header.html
<h1>{{ title }}</h1>