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.
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 ... - email@example.com node_modules\open - firstname.lastname@example.org node_modules\optimist - email@example.com node_modules\stream-cache - firstname.lastname@example.org node_modules\webpack-core - email@example.com node_modules\webpack\node_modules\enhanced-resolve firstname.lastname@example.org C:\Users\stephen\git\100-days-of-angular2 +-- UNMET PEER DEPENDENCY @email@example.com +-- UNMET PEER DEPENDENCY @firstname.lastname@example.org +-- UNMET PEER DEPENDENCY @email@example.com +-- UNMET PEER DEPENDENCY @firstname.lastname@example.org +-- UNMET PEER DEPENDENCY email@example.com | +-- firstname.lastname@example.org | +-- email@example.com | | +-- firstname.lastname@example.org | | `-- email@example.com | | `-- firstname.lastname@example.org | +-- email@example.com | +-- firstname.lastname@example.org | +-- email@example.com ...
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 @firstname.lastname@example.org requires a peer of @email@example.com but none was installed. npm WARN @firstname.lastname@example.org requires a peer of @email@example.com but none was installed. npm WARN @firstname.lastname@example.org requires a peer of @email@example.com but none was installed. npm WARN @firstname.lastname@example.org requires a peer of @email@example.com but none was installed.
These initially didn't make sense either, because in my
package.json I list
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:
And just to clear any potential cache issues, I wiped out my
node_modules directory and did a fresh
The output of that looked a lot better.
webpack 2.1.0-beta.27 installed, time to fire it up
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
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 firstname.lastname@example.org C:\Users\stephen\git\universal-starter +-- @email@example.com +-- @firstname.lastname@example.org +-- UNMET PEER DEPENDENCY @email@example.com | +-- @firstname.lastname@example.org | | `-- email@example.com | | +-- firstname.lastname@example.org | | `-- email@example.com | | `-- firstname.lastname@example.org | `-- email@example.com +-- UNMET PEER DEPENDENCY @firstname.lastname@example.org +-- @email@example.com +-- @firstname.lastname@example.org +-- @email@example.com +-- @firstname.lastname@example.org +-- @email@example.com | `-- firstname.lastname@example.org +-- @email@example.com +-- @firstname.lastname@example.org +-- @email@example.com +-- @firstname.lastname@example.org +-- @email@example.com ... (snip) ... +-- firstname.lastname@example.org | +-- email@example.com ... (snip) ... `-- firstname.lastname@example.org npm WARN optional Skipping failed optional dependency /chokidar/fsevents: npm WARN notsup Not compatible with your operating system or architecture: email@example.com npm WARN @firstname.lastname@example.org requires a peer of @email@example.com but none was installed. npm WARN @firstname.lastname@example.org requires a peer of @email@example.com 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
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.