Search code examples
node.jsangularnode-modulescommonjsangular2-universal

Angular 2 Universal Quickstart - require 'ProvideRouter' not working


I'm trying to set up my project for Angular Universal by using the quickstart

But it's not going well, there were a lot of errors trying to install typings:

Benjamins-MBP:vepo Ben$ sudo typings install node express body-parser serve-static express-serve-static-core mime --ambient
typings ERR! deprecated The "ambient" flag is deprecated. Please use "global" instead
Benjamins-MBP:vepo Ben$ sudo typings install node express body-parser serve-static express-serve-static-core mime --global
typings ERR! message Unable to find "express-serve-static-core" ("npm") in the registry.
typings ERR! message However, we found "express-serve-static-core" for 1 other source: "dt"
typings ERR! message You can install these using the "source" option.
typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/npm/express-serve-static-core/versions/latest responded with 404, expected it to equal 200
typings ERR! 
typings ERR! cwd /Users/Ben/Development/vepo
typings ERR! system Darwin 16.1.0
typings ERR! command "/usr/local/bin/node" "/usr/local/bin/typings" "install" "node" "express" "body-parser" "serve-static" "express-serve-static-core" "mime" "--global"
typings ERR! node -v v6.9.1
typings ERR! typings -v 2.0.0
typings ERR! 
typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>
Benjamins-MBP:vepo Ben$ 

Then I added the server.js file and tried to run it with node server.js:

I asked a question about it and got an answer so accepted it, but am not able to successfully implement the answer:

require('angular2-universal-polyfills');
require ('path');
require ('express');

// Angular 2 Universal
require ('@angular/router/provideRouter');
require ('@angular/core/enableProdMode');
require ('angular2-universal/*');

// replace this line with your Angular 2 root component
require ('./app/AppModule');
require ('./app/app.routes')

got this error:

Benjamins-MBP:vepo Ben$ node server.js
module.js:471
    throw err;
    ^

Error: Cannot find module '@angular/router/provideRouter'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/Ben/Development/vepo/server.js:8:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
Benjamins-MBP:vepo Ben$ 

Because there is no provideRouter at that level. How do I import that with require?

Here is my @angular folder:

enter image description here

How do I edit my require statements to correctly import the required modules?

my package.json to show versions being used:

{
  "name": "vepo",
  "version": "1.0.0",
  "scripts": {
    "coverage": "istanbul cover ./test.js",
    "lite-server-test": "lite-server --config=liteserver-test-config.json",
    "test": "karma start karma.config.js",
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"sass --watch app\" \"sass --watch index.scss\" \"sass --watch global-constants.scss\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "bin": {
    "e2e-test-start": "bin/e2e-test-start.js"
  },
  "license": "ISC",
  "moduleResolution": "node",
  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "@types/bootstrap": "^3.3.32",
    "@types/google-maps": "^3.1.28",
    "@types/jasmine": "^2.5.38",
    "@types/jquery": "^2.0.34",
    "@types/node": "^6.0.51",
    "angular-in-memory-web-api": "~0.1.15",
    "angular2-google-maps": "^0.15.0",
    "angular2-modal": "^2.0.0",
    "angular2-universal": "^2.1.0-rc.1",
    "angular2-universal-polyfills": "^2.1.0-rc.1",
    "body-parser": "^1.15.2",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "express": "^4.14.0",
    "jquery": "v3.1.1",
    "jshint": "^2.9.4",
    "ng2-bs3-modal": "^0.10.4",
    "ng2-popover": "0.0.9",
    "preboot": "^4.5.2",
    "protractor": "4.0.11",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "tslint": "^4.0.2",
    "typings": "^2.0.0",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/google-maps": "^3.1.28",
    "angular-mocks": "^1.5.8",
    "codelyzer": "1.0.0-beta.0",
    "concurrently": "^3.0.0",
    "core-js": "^2.4.1",
    "del": "latest",
    "gulp": "^3.9.1",
    "gulp-changed": "^1.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-jshint": "^2.0.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-sass": "latest",
    "gulp-sourcemaps": "latest",
    "gulp-strip-debug": "^1.1.0",
    "gulp-tslint": "latest",
    "gulp-typescript": "latest",
    "gulp-uglify": "^2.0.0",
    "istanbul": "^0.4.5",
    "jasmine": "~2.4.1",
    "karma": "latest",
    "karma-chrome-launcher": "latest",
    "karma-cli": "^1.0.1",
    "karma-coverage": "latest",
    "karma-htmlfile-reporter": "^0.3.4",
    "karma-jasmine": "latest",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha-reporter": "latest",
    "karma-phantomjs2-launcher": "latest",
    "karma-story-reporter": "latest",
    "lite-server": "latest",
    "path": "latest",
    "phantomjs2": "latest",
    "protractor-jasmine2-html-reporter": "0.0.6",
    "require-dir": "latest",
    "systemjs-builder": "latest",
    "tslint": "latest",
    "typescript": "latest"
  }
}

Solution

  • I think you should use provideRoutes instead of provideRouter.