$templatecache.get returns undefined

[atgillette]

I'm using webpack in conjunction with oclazyload. Although I see that the html template is properly processed when running webpack, when I load the bundle file using oclazyload and execute $templatecache.get('filename.html'), it returns undefined.

[WearyMonkey]

Could be because configuration phase has already passed. I'll take a look.

[WearyMonkey]

@atgillette The problem is that the template is loaded into $templatcache using a run block. Run blocks of lazy loaded modules don't get run by default, so templates in the lazy loaded modules wont be loaded.

Luckily ocLazyLoad has a work around rerun: true. Described: https://oclazyload.readme.io/v1.0/docs/oclazyload-service https://github.com/ocombe/ocLazyLoad/issues/89

Could you give it a shot and tell me how it goes?

[atgillette]

Thanks for getting back to me. Unfortunately, still no luck.

As an experiment, I tried requiring the html file in the main webpack bundle that is used for bootstrapping the app:

require('./mytemplate.html');

On:

.run(['$templateCache', function ($templateCache) { console.log('$templateCache', $templateCache.info()); }])

outputs to: $templateCache Object {id: "templates", size: 0}

So it looks like even though the template is embedded in the bundle, but is not executing as part of the bootstrapping process.

Here's what the ngtemplate code portion looks like in the bundle:

function(module,exports,webpack_require){module.exports="var path = 'myTemplate.html'; window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, \"

Test Test

\") }]); module.exports = path;"}

[atgillette]

When I console log the result for require('./mytemplate.html'), this is what I got:

" var path = 'myTemplate.html'; window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, "

Test Test

") }]); module.exports = path; "

[WearyMonkey]

Thats strange. Could you share your webpack.conf? Or better yet, do you have a sample project with oclazyload setup?

[atgillette]

I think the problem was that I was using this in conjunction with html-loader.

I'm no longer using either, instead opting to go with raw-loader for my project.

Thanks for responding.

[WearyMonkey]

@atgillette I've been using ngtemplate-loader with html-loader with no issues.

Do you mind just pasting in your webpack.config.js so I can check for any bugs?

Cheers!

[atgillette]

var webpackConfig = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
    },
    module: {
        loaders: [
        // if you're going to do both ng-cache and normal html loading, comment out the two loaders
        // and explicitly write the loader type yourself, e.g. require('html!./blah.html') or require('ng-cache!./blah.html')
        { test: /\.css$/, loader: 'style!css'},
        { test: /\.scss$/, loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'},
        { test: /\.png$/, loader: 'url-loader?limit=100000&mimetype=image/png'},
        { test: /\.jpg$/, loader: 'file-loader'},
      { test: /\.html$/, loader: 'html-loader' },
      { test: /\.html$/, loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './src')) + '/!html'}
        ]
    },
    plugins: [
        new webpack.optimize.DedupePlugin(),
        // new webpack.ProvidePlugin({
        //  _: 'lodash',
        // }),
        // uncomment for production. comment out during dev
        new webpack.optimize.UglifyJsPlugin({
            mangle: true
        })
    ],
  externals: {
    // require("angular") is external and available
    //  on the global var angular
    'angular': 'angular'
  }
};

[WearyMonkey]

Thanks, looks like the problem is that you have two html loaders defined:

{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.html$/, loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './src')) + '/!html'}

When what you really want is just:

{ test: /\.html$/, loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './src')) + '/!html'}

The way it works with that one line, is that HTML files will first be passed to the html-loader (!html) before being passed to ngtemplate-loader for more processing. ngtemplate-loader returns a snippet of JS to be included.

With the two tests that you have setup, the same thing as above happens, but then the JS returned by the ngtemplate-loader is passed again to the html-loader, which interprets the JS as HTML and converts it into a string like you're seeing.

[marksyzm]

It seems the use of window.angular causes havoc with OSX, I've worked out. If you're using this with ExtractTextPlugin, the use of window shows up as undefined. I would suggest using this instead of window so it works with all environments.

[thebigredgeek]

^I am also getting this issue.

[marksyzm]

In fact this also happens on ubuntu

[lxghtless]

this happens on windows as well

[WearyMonkey]

@wakurth can you send me your webpack.config please

[morungos]

Yes, I'm getting this too. And it's definitely a timing issue. Adding the extra require 'template/x.html' does seem to warm up the template cache.

[amaschas]

I am also running into this problem. I can send my webpack.config if it would be helpful.

Just a note: I tried both using providePlugin to map window.angular to angular and just removing window in the generated bundle, and neither worked for me.