100 days of Angular 2 - Day 12: Angular Universal Woes

Editor's Note: This was written in the days (and then weeks) after posting Day 11. However I got stuck trying to incorporate Angular Universal, and after weeks of frustration, my interest wavered in this '100 days of Angular' project. Most of the following was written about 6 months ago, and now today, I have decided to just post it instead of it sitting in my draft folder unseen. I will evaluate in the next few days/weeks if I want to continue with this series.

The original post below:

So day 11 turned out to be... frustrating. I had hoped to incorporate Angular Universal into the project, but ran into a number of issues.

Version mismatch is likely to blame. Despite the fact that I spent a number of days creating development and production configurations with Webpack 1, I now need to migrate to Webpack 2, as Angular Universal's documentation and seed projects use that.

It all starts with updating my package.json. I wasn't sure if I should use 2.1.0-beta.27 as the Universal Starter project uses or 2.2.0-rc.3 as the Angular 2 Starter project uses, which is referenced in the Angular Universal quickstart guide.

I decided to go with the 2.1.0-beta.27 since I was able to build and run the Angular Universal project on my machine a few days ago during some initial tests. If I can get that working, or if I run into trouble, I'll then try upgrading.

npm install

Okay, so I changed my package.json webpack dependencies to the following, which matches the Angular Universal starter project.

"webpack": "2.1.0-beta.27",
"webpack-dev-server": "2.1.0-beta.11",
"webpack-merge": "~0.16.0"

I got some weird warnings after running npm install regarding "UNMET PEER DEPENDENCY" but they didn't make much sense.

Here's what it looks like:

$ npm install
- open@0.0.5 node_modules\open
- optimist@0.6.1 node_modules\optimist
- stream-cache@0.0.2 node_modules\stream-cache
- webpack-core@0.6.8 node_modules\webpack-core
- enhanced-resolve@0.9.1 node_modules\webpack\node_modules\enhanced-resolve
angular-quickstart@1.0.0 C:\Users\stephen\git\100-days-of-angular2
+-- UNMET PEER DEPENDENCY @angular/common@2.2.4
+-- UNMET PEER DEPENDENCY @angular/compiler@2.2.4
+-- UNMET PEER DEPENDENCY @angular/core@2.2.4
+-- UNMET PEER DEPENDENCY @angular/platform-browser@2.2.4
+-- UNMET PEER DEPENDENCY webpack@2.1.0-beta.27
| +-- acorn@4.0.4
| +-- ajv@4.10.3
| | +-- co@4.6.0
| | `-- json-stable-stringify@1.0.1
| |   `-- jsonify@0.0.0
| +-- ajv-keywords@1.5.0
| +-- async@2.1.4
| +-- interpret@1.0.1

I don't understand what this means. Which package doesn't have its peers?

And below that, there are some of the warnings:

npm WARN @angular/platform-server@2.4.1 requires a peer of     @angular/core@2.4.1 but none was installed.
npm WARN @angular/platform-server@2.4.1 requires a peer of @angular/common@2.4.1 but none was installed.
npm WARN @angular/platform-server@2.4.1 requires a peer of @angular/compiler@2.4.1 but none was installed.
npm WARN @angular/platform-server@2.4.1 requires a peer of @angular/platform-browser@2.4.1 but none was installed.

These initially didn't make sense either, because in my package.json I list

"@angular/platform-server": "^2.2.0",

But I realize that the ^ tells npm to install anything up to minor release (in other words 2.x) so if 2.4.1 is available, install that. There's more info on npm semantic versioning here.

So I changed my package.json to read:

"@angular/platform-server": "~2.2.0",

And just to clear any potential cache issues, I wiped out my node_modules directory and did a fresh npm install.

The output of that looked a lot better.

With webpack 2.1.0-beta.27 installed, time to fire it up

npm start

Seriously? This is the same issue I had yesterday.

I have Webpack 2 installed, so it should understand export. Let's check the versions of everything and see if there's something odd.

stephen@stephen MINGW64 ~ (master)
$ node --version

stephen@stephen MINGW64 ~ (master)
$ npm --version

stephen@stephen MINGW64 ~ (master)
$ webpack --version

Okay, so even though my project might have Webpack 2 installed, it looks like I have a global installation somewhere stuck on 1.13.2. Could that be the issue? Is my project somehow using the global version instead of the local version?

$ which webpack

$ npm uninstall -g webpack
(lots of packages printed to screen)

$ webpack --version
bash: /c/Users/stephen/AppData/Roaming/npm/webpack: No such file or directory

Okay, let's try npm start

Okay, you're killing me now.

Is it me or is it you?

I'm beginning to question a bunch of things (such as my environment and dependencies), but first I'll perform a simple test.

I'll clone the Angular Universal seed project that my package.json is based upon, run npm install and then npm start. If I can get that working, I know it's at least possible to get my project working.

If that fails, well, there are bigger issues with the framework.

$ git clone https://github.com/angular/universal-starter
$ cd universal-starter
$ npm install

Interesting there's issues with UNMET PEER DEPENDENCY. Here's part of the long installation log:

$ npm install
universal-starter@2.0.0 C:\Users\stephen\git\universal-starter
+-- @angular/common@2.1.2
+-- @angular/compiler@2.1.2
+-- UNMET PEER DEPENDENCY @angular/compiler-cli@2.1.2
| +-- @angular/tsc-wrapped@0.3.0
| | `-- tsickle@0.1.7
| |   +-- source-map@0.4.4
| |   `-- source-map-support@0.3.3
| |     `-- source-map@0.1.32
| `-- minimist@1.2.0
+-- UNMET PEER DEPENDENCY @angular/core@2.1.2
+-- @angular/forms@2.1.2
+-- @angular/http@2.1.2
+-- @angular/platform-browser@2.1.2
+-- @angular/platform-browser-dynamic@2.1.2
+-- @angular/platform-server@2.1.2
| `-- parse5@2.2.3
+-- @angular/router@3.1.2
+-- @angular/upgrade@2.1.2
+-- @angularclass/bootloader@1.0.1
+-- @angularclass/idle-preload@1.0.4
+-- @ngtools/webpack@1.1.9
+-- webpack@2.1.0-beta.27
| +-- acorn@4.0.4
`-- zone.js@0.6.26

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.15
npm WARN @ngtools/webpack@1.1.9 requires a peer of @angular/compiler-cli@2.2.3 but none was installed.
npm WARN @ngtools/webpack@1.1.9 requires a peer of @angular/core@2.2.3 but none was installed.

I didn't attempt to address these warnings. I just performed an npm start and got the following:

Opening up Chrome and navigating to localhost:3000

Well, now I know that it's just me. My project has an issue, but I can't figure out what it is.

A crazy, last resort idea

Well, one thing I can try doing is to copy over all of the dependencies from the (now confirmed) working Angular Universal seed project's package.json.

I thought I incorporated the important ones already, but as you saw in Day 10 I had missed the latest version of Webpack.

This didn't work either.

I give up

I will need to decide if I want to continue with incorporating Angular Universal, or give up on Angular Universal, or maybe even give up on this '100 days of Angular' project altogether. Stay tuned.