AngularJS with Webpack - Requiring Templates

how does it handle ng-include in the view?

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.

got it, thanks Kent

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.

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.

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

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

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?

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

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

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

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!

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

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

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!

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. 

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: [....

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 :-)