Webpack ngTemplate-loader won't include my templates into the bundle: how to debug?

Question

I use webpack to build an angular project. My webpack configuration is copied from another project, where it works successfully.

But in my project it won't include .html templates into the resulting javascript bundle.

Here's the part of webpack configuration of interest:

const webpackConfig = {
    ...
    module: {
        ...
        plugins: [
            new HtmlWebpackPlugin({
                inject: "body",
                template: "app/index.html",
                filename: "index.html"
             })
        ],
        loaders: [
            ...
            {
                test: /\.html$/,
                exclude: `${path.join(__dirname, "/app/index.html")}`,
                loaders: [`ngtemplate?relativeTo=${path.join(__dirname, "/app")}`, "html"]
            }
        ]
    }
}

The scaffold of my project is as follows:

├── app
│   ├── app.js
│   ├── components
│   │   ├── auth
│   │   │   ├── auth.module.js
│   │   │   ├── auth.service.js
│   │   │   └── user.service.js
│   │   ├── footer
│   │   │   └── footer.html
│   │   ├── header
│   │   │   └── header.html
│   │   ├── home
│   │   │   ├── home.html
│   │   │   └── home.module.js
│   │   ├── navigation
│   │   │   └── navigation.html
│   │   ├── right_sidebar
│   │   │   └── right_sidebar.html
│   │   └── util
│   │       ├── util.module.js
│   │       └── util.service.js
│   ├── index.html
│   └── shared
├── assets
├── package.json
├── gulpfile.js
└── webpack.config.js

In index.html I say:

<div id="header" ng-include="'/components/header/header.html'"></div>

and header template is not included in the resulting app.<hash>.js bundle. How to debug this?

Bob Sponge · Accepted Answer · 2016-03-16T09:48:40.123

2

Html-loader not parsed ng-include attribute by default. So, you need to pass attrs parameter to loader:

html?attrs[]=div:ng-include

edited Mar 16 '16 at 09:48

answered Mar 16 '16 at 09:36

Bob Sponge

4,708
1
23
25

Thanks for suggestion, but it didn't help. I guess, "html&attrs" is a typo error, it should be "html?attrs"? Still, doesn't work with '?'. – Boris Burkov Mar 16 '16 at 09:46
Yep, it should be '?'. You excluded `index.html` from '*.html' loader - this file processed with other loader? – Bob Sponge Mar 16 '16 at 09:52
Ah, you're right! I excluded it as new `ngTemplate-loader` curses about index.html. I use `HtmlWebpackPlugin` to inject `app..js` and friends into index.html. So, as it's excluded, I can't use `ng-include` on it or I have to manually require all the templates, `ng-included` in it in `app.js`? – Boris Burkov Mar 16 '16 at 10:03
As described in `HtmlWebpackPlugin ` docs ( https://github.com/ampedandwired/html-webpack-plugin ) `template` parameter supports loaders: `ngtemplate!./index.html` – Bob Sponge Mar 16 '16 at 10:10
I found a reference to why I excluded index.html from loading with `html-loader` version 2: https://github.com/ampedandwired/html-webpack-plugin/issues/212. So, do you suggest that I keep `index.html` excluded for html loader, but should set `template: "ngtemplate!app/index.html"` in HtmlWebpackPlugin configuraiton? Sorry, I can't figure out the function of ngTemplate-loader from its documentation. It does something before invoking `html-loader`, but I don't understand, what. – Boris Burkov Mar 16 '16 at 10:25
You are right, you must add loader to `template` parameter. – Bob Sponge Mar 16 '16 at 10:34
Loaders are applying from right to left, so `html-loader` will be first. `ngtemplate-loader` putting loaded template into `$templateCache` in order to angular can render it. – Bob Sponge Mar 16 '16 at 10:34
Thank you very much, Bob Sponge. – Boris Burkov Mar 16 '16 at 10:36
NP. Seems I've missed `html-loader`: `template: "ngtemplate!html!app/index.html"` – Bob Sponge Mar 16 '16 at 10:44
When I said in `HtmlWebpackPlugin({template: "ngtemplate!html!app/index.html", ... })`, it started to curse about `html-webpack-loader` `ReferenceError: window is not defined` again. I guess, I'd better manually `require` ng-includes of `index.html` in `app.js` - no big deal and this solution works. Though, It curses about images, referenced in templates. But that's another story – Boris Burkov Mar 16 '16 at 10:52
Were you able to make it work? Seems the issue is with single quotes. " 'someting.html' " will not be touched by html loader. But "something.html" will be. In this case something.html will be in the app.js but ng-include will not work! – norekhov Jul 30 '17 at 06:20

Webpack ngTemplate-loader won't include my templates into the bundle: how to debug?

1 Answers1