The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Angular with Webpack - Introduction

Angular with Webpack - Introduction

4:20
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.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?