1

I'm trying to include an html file in to another html using ng-include. Followed this with no luck, maybe due to webpack version differences.

404 errors trying to find the file in the ng-include

package.json

"devDependencies": {
    ..//other dependencies
    "required-loader": "^1.3.15",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    ..//other dependencies
}

index.js (entry point to app)

import angular from 'angular'
import uirouter from 'angular-ui-router'
import routes from './routes'

//trying to require all files inside views/all dir/all html files
//@require "../views/**/*.html"

angular.module('app', [uirouter])
  .config(routes)
  .controller('LoginCtrl', function() {})

index.html file that needs to include navbar.html file

index.html
views
 --> common
     --> navbar.html

index.html

<div ng-include="'navbar.html'">
isherwood
  • 58,414
  • 16
  • 114
  • 157
Sanath
  • 4,774
  • 10
  • 51
  • 81

1 Answers1

3

I found a better approach to solving this problem instead of using ng-include. I created an angular component for navbar and injected that in to html.

<navbar></navbar>

in the component definition, I use import statement to call the html template

import navbarTemplate from '../PATH';

angular.module('app')
    .component('navbar', {
        template: navbarTemplate,
        ...
});
Sanath
  • 4,774
  • 10
  • 51
  • 81
  • 3
    This is a much better approach in general and a pattern you'll appreciate as you move to Angular in the future. I'm not sure what the empty div tags do, but they may not be necessary. In the outer component/app simply style the navbar element as needed. – isherwood Nov 27 '17 at 21:43
  • true. it makes the code future proof and easily testable and maintainable as well. – Sanath Nov 27 '17 at 23:12