Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1071 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Angular with Webpack - Introduction

4:20 Angular 1.x lesson by

Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.

Avatar
Dana

Hey Ken,

Great series so far. One question..how do I get the Angular logo to appear in my browser's omnibar?

In reply to egghead.io
Avatar
James

I get this error when running npm start

basedir=dirname "$0"
^
SyntaxError: Unexpected token ILLEGAL
at exports.runInThisContext (vm.js:73:16)
at Module.compile (module.js:443:25)
at Object.Module.
extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3

Avatar
Kent C.

I'm sorry James, I'll need a little more context to be able to help you. Can you give me any kind of reproduction steps?

In reply to James
Avatar
Willie Streeter

Hi Kent,
I was wondering how you went about setting up the test server.
Do you use 'webpack-dev-server'?
I do note see it set up in the config and it appears as though your webstorm configuration does not show debug or run configuration.

Thanks
will

Avatar
Yonatan

I've followed the video:
1) Created a new directory "gridApp" with /app in it.
2) Inside "gridApp" I've typed "npm install webpack webpack-dev-server -D
3) This did not create node_modules for me, so I did the same with --save instead of -D.
4) Now I continued the tutorial, and created the other config files.
5) when I typed "webpack" in the cmd, it said "webpack" is not recognized.
6) Did npm install webpack -g, and now I have cli
7) I run webpack, but it has problems with windows path I guess. Says:
ERROR in Entry module not found: Error: Cannot resolve module 'index.js' in C:\Users\Yonk\Documents\gridApp/app
resolve module index.js in C:\Users\Yonk\Documents\gridApp/app
Any idea how to get over this one?

P.S.
I'm not using webstorm on the current workstation

Avatar
Yonatan

My bad... forgot the './' in the entry file.

In reply to Yonatan
Avatar
Kent C.

Sounds like you're missing your entry file index.js. Does your app directory have an index.js?

In reply to Yonatan
Avatar
Kumar Pratik

It's my humble request that you guys should do a video on Lazy loading of directives, controllers and other components from another module.

Avatar
Kent C.

Fantastic idea. Until I can get to it, I recommend you take a look at John's lessons on ocLazyLoad

In reply to Kumar Pratik
Avatar
Van

Hi, i get the error

ERROR in ./app/index.js
Module not found: Error: Cannot resolve module 'angular' in .../webpack-angular/app
@ ./app/index.js 1:14-32

angular is still on the package.json as dependencies.

in the index.js the same as in the video

var angular = require('angular');
var ngModule = angular.module('app', []);
console.log(ngModule);

Avatar
Kent C.

First thing I would double check is that you can find the angular directory in your node_modules. Make sure you not only have angular referenced in your dependencies in your package.json, but that you've also run $ npm install and that the angular directory appears in your node_modules. Once you're sure of that, fire up webpack again and see if that works.

In reply to Van
Avatar
Clinton

Hey James,

I am on a windows machine. Not sure if that has anything to do with it. Anyways, try changing the package.json "start" line to:
"start": "webpack-dev-server --content-base app",

It worked for me. Here is the reference: https://github.com/webpack/webpack/issues/1020

In reply to James
Avatar
Van

The problem my me is solved by reinstalling python 2.7, cause i uninstalled it before. Thanks!

In reply to Kent C.
Avatar
milad

The first thing I hear when I start a tutorial normally is a explanation of "What we're going to learn and why ".
But in your tutorials , you just start coding ! no explanation , no nothing .
Seems you've written your codes somewhere and you just copy and paste it here , with no explanation.
What is webpack ?
Why we should use it ?
What is it good for ?

Avatar
hima

I agree they start with no explanation... i don't know why most videos in egghead start like that..

In reply to milad
Avatar
Kent C.

This lesson series assumes you already know what Webpack and angular are. If you don't know what Webpack is, you may benefit from this playlist: https://egghead.io/playlists/learning-webpack

In reply to hima
Avatar
marshallformula

Just an FYI. In your npm scripts - you don't need to give the full path the the node_modules/.bin directory. npm scripts resolve anything in the .bin automatically. so you could just have:

"start": "webpack-dev-server --content-base app"

Avatar
Andrew

I'm have an issue with reloading once I've set up the webpack-dev-server. When the dev-server is running and I add the console.log(ngModule) line to my code save it and refresh the browser the changes never get picked up. After fussing with it for about an hour I decided to download from github your code and switched to the finished/intro branch and tried the same thing, but still couldn't get webpack-dev-server to pick up the change after it was already started. The only way I can get it to pick up the changes is by restart webpack-dev-server. Do you have any ideas as what would be causing this. I'm on a windows 7 pc running webstorm 11.0.1. Also, I did do your tutorial on the basic webpack intro where everything is in node's route (./) and not and any sub folders and it was able to pick up the changes that way. Not sure if that's helpful. Any advice would be appreciated.

Avatar
Kent C.

Huh, that's odd. I'd recommend you reach out to the webpack support channels to see if they can help you there. Good luck!

In reply to Andrew
Avatar
Andrew

Thanks Kent!

Found the solution. For windows users you have to use absolute path in the config file.

Reference:
https://webpack.github.io/docs/troubleshooting.html

In reply to Kent C.
Avatar
Aid19801

I'm probably being stupid here but i cannot get webpack to fire up just by typing 'webpack' into the terminal. Did you miss out a step or am i missing something myself?

Avatar
Tim

I had the same problem, I just installed globally and it worked just fine.
npm install webpack -g

In reply to Aid19801
Avatar
Ricardo Hofstetter Dias

I was having trouble running npm start, had to remove the "node node_modules/.bin/" portion from the package.json script. Just "start": "webpack-dev-server --content-base app", worked fine. Hope it helps someone (ps: i'm on windows).

Avatar
Sergei

You might want to include the windows code for the npm start and npm build since both provided examples on github only work on unix based systems. At least as commented out code on the repo.

Avatar
Zeeshan

Hi, I'm running Webpack with angular-i18n and angular-dynamic-locale. Issue is that when I build the project for distribution, the localization for the time is not loading correctly. Everything is loading into the browser and the dist folder correctly (so no files are missing), but the locale is not changing the time to the correct format. It's working fine in development however.

Any thoughts on best practices for this?

My webpack.config.js is loading the .js files as follows:

test: /angular-locale_.+js$/,
loader: 'file-loader?name=[path][name].[ext]?[hash]'

Avatar
Manuel Carrera

When I run my start script and load my page, I get an error that require is not defined. What am I missing?

The first thing that we're going to want to do, obviously, is install Webpack. We'll also install webpack-dev-server. We'll install these as dev dependencies, so we'll add that -D. Then we'll create a webpack.config.js with a module.exports, our config object.

We'll set our context to be the context of our application. This will be...Whoops. Need to spell that correctly. dirname plus /app. The context of our app is right there in the app directory. Our entry file is going to be index.js. That will be in relation to our context.

We'll put our index.js there, and then we'll have our output, where the path is the same -- dirname plus /app. The filename will be bundle.js. That's it for our webpack.config. We're going to create our index.js here with an alert of "Hello."

We'll run Webpack. This will create the bundle for us. In our index.html, we'll add that bundle as a script, where the src is bundle. We save. If we refresh, we get the "Hello" there. We're going to actually delete this bundle, the file, just to illustrate something here.

Instead of using Webpack, we want to have a server that will automatically rebuild every single time. We can accomplish this same thing with Webpack watch, but we're going to use webpack-dev-server instead.

I recommend in your package.json, you'll add a script called "start," where it points to the webpack-dev-server in your local known modules, with a content base pointing to your context or where your app will be served up.

With that configuration, if I say "npm start," it will run that script for me. Now it's serving up my app on port 8080. If I switch this to localhost:8080, I get the "Hello." Now we're running using webpack-dev-server.

Again, you'll notice that the bundle.js is not inside the app directory, but it's still running. That is because webpack-dev-server is actually serving that file in memory. When a request comes for that bundle.js, it will send that file to us instead.

Now let's make this an Angular app. The first thing we'll do is we'll say, "ng-app="app." Inside of our index.js, we are going to require dependencies a little bit different than you may be used to. The first thing we'll do is we'll npm install angular, and in here, we'll say, "var angular = require('angular')." That's common JS syntax that Webpack enables us to do.

We'll create our app module with no dependencies. From here, everything should work if I assign this to ngModule and then say "console.log(ngModule)." Save, refresh. In here, we have our object, which is our module. We also have the Angular logo up there. This is an Angular app.

Everything is up and running with Webpack using this configuration here, where the context is pointing to the app directory where our app is living. We have an entry of our index.js file, and then our output is pointing to the same directory and a bundle.js file. In here, in our index.html, we're referencing that bundle.js file.

That is how you get started with Angular and Webpack. More to come.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?