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.