AngularJS with Webpack - Requiring Templates

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

With Angular, most of the time you're specifying a templateUrl for your directives and states/routes. This means you need to make sure that you're loading in these templates into the $templateCache for your tests and production. Oh, and don't forget to update all your URLs whenever you move the files around! When you add in Webpack and the raw-loader, you don't need to do this anymore. Simply require the html file and your work is done!

John
John
~ 6 years ago

how does it handle ng-include in the view?

Kent C. Dodds
Kent C. Doddsinstructor
~ 6 years ago

You can get ng-include to work with webpack, you'd just need to pre-load the $templateCache with all the templates you want by hand which shouldn't be a big deal.

However, I would highly recommend against using ng-include and instead use an element directive with isolate scope. It is impossible to know the API to a template using ng-include but with an isolate scope directive, you define your API so from a maintainability/reasonability standpoint, you're much better off.

John
John
~ 6 years ago

got it, thanks Kent

Sander
Sander
~ 6 years ago

It seems that in order to have webpack require a referenced image from a directive template (e.g. <img src="../../logo.png" />), html-loader is needed instead of raw-loader.

Kent C. Dodds
Kent C. Doddsinstructor
~ 6 years ago

Very good point! Thank you for correcting me there. I don't actually use img tags in my app at all so it works fine for me to use the raw-loader. But most people should probably be using the html-loader.

Elia
Elia
~ 5 years ago

I've tried to use raw loader for my component's templates, but (sometimes) i get this error:

In Chrome dev tools: http://localhost:8080/%3Cdiv%20class='page-header'%3E%20%20%3Ch1%3E%7B%7B%2…%20%20%20%20%20%3C/div%3E%20%20%20%20%3C/div%3E%20%20%3C/form%3E%3C/div%3E 414 (Request-URI Too Large)

In console: ENAMETOOLONG

How i can fix it? Thanks

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

That's probably happening because you're still using templateUrl rather than template

Elia
Elia
~ 5 years ago

You right! I've found that i use it in my router. I've changed my components template, but not the router. Now works, but i've an error: "jQuery is not defined". Strange because i don't use it, maybe it's some package. Webpack can't include it automatically if it's a dependency?

Elia
Elia
~ 5 years ago

I've figured it out installing jquery with npm and adding this loader:

test: /bootstrap/js//, loader: 'imports?jQuery=jquery'

J.C. Francis III
J.C. Francis III
~ 5 years ago

What do the package.json scripts look like for Windows? I can't get the build script working.

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

Yeah, sorry. Try installing and using cross-env for the build script:

npm install -D cross-env

Then update build to:

"build": "cross-env NODE_ENV=production webpack && cp app/index.html dist/index.html"

Note, I edited the script a bit because you don't need node or to point directly to node_modules/.bin/webpack.

Good luck!

J.C. Francis III
J.C. Francis III
~ 5 years ago

Thanks this worked. I used xcopy [source] [destination] /Y to cp. Thanks again.

Tim
Tim
~ 5 years ago

Followed steps in this video but I'm getting a termial error when I ran webpack. Any ideas?

ERROR in ./scripts/Directive/socialMediabuttons.js Module not found: Error: Cannot resolve 'file' or 'directory' ./components/social-media-buttons.html in /app/scripts/Directive resolve file

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

That error would seem to indicate that webpack is unable to find a file in /app/scripts/Directive/components/social-media-buttons.html. If the file is actually there, my guess is that you may be setting your context incorrectly with the leading / in /app (it needs to be a full path, but it you probably don't mean the app directory in your root directory).

Good luck!

Joseph
Joseph
~ 5 years ago

I'm getting the following error:

Module parse failed: /Users/joe/Dev/angular-webpack/app/directives/kcd-hello.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)````

In my webpack config: 

modules: { loaders: [ { test: /.js$/, loader: 'babel', exclude: '/node_modules' }, { test: /.html$/, loader: "raw", exclude: '/node_modules' } ] }


And in my directive:

module.exports = function (ngModule) { ngModule.directive("kcdHello", function () { return { restrict: 'E', scope: {}, template: require('./kcd-hello.html'), controllerAs: 'vm', controller: function (){ var vm = this; vm.greeting = 'hello webpack' } } }) }

Any ideas why i'm still getting the error? My template is just a simple div with {{vm.greeting)).  I also tried html-loader, but that failed too. 
Joseph
Joseph
~ 5 years ago

So after tearing my hair out for a while, i think this was the issue. Webpack config should have been:

module: {
        loaders: [ ...

not:

modules: {
        loaders: [....
Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

Sorry to hear that you had that trouble! I recommend that you give webpack-validator a look. You would have caught that spelling error with webpack-validator :-)