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
v6.5.0

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

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

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
/c/Users/stephen/AppData/Roaming/npm/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
...
(snip)
...
+-- webpack@2.1.0-beta.27
| +-- acorn@4.0.4
...
(snip)
...
`-- 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.

Stephen

Read more posts by this author.


View or post Comments