Solvedangular Guide – Angular Universal: server-side rendering – Not working or docs not updated

I tried to setup the universal example provided on the angular.io guide page: https://angular.io/guide/universal

Unfortunately, it fails with that error:

......
chunk {3} main.5455f303c46ef36adeb1.js (main) 346 kB [initial] [rendered]
Target 'server' could not be found in project 'angular.io-example'.
Error: Target 'server' could not be found in project 'angular.io-example'.
    at Architect._getProjectTarget (/Users/marvinheilemann/Downloads/toh-pt6/node_modules/@angular-devkit/architect/src/architect.js:90:19)
    at Architect.getBuilderConfiguration (/Users/marvinheilemann/Downloads/toh-pt6/node_modules/@angular-devkit/architect/src/architect.js:97:29)
    at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (/Users/marvinheilemann/Downloads/toh-pt6/node_modules/@angular/cli/models/architect-command.js:77:55)
    at MergeMapSubscriber._tryNext (/Users/marvinheilemann/Downloads/toh-pt6/node_modules/rxjs/internal/operators/mergeMap.js:122:27)
    at MergeMapSubscriber._next (/Users/marvinheilemann/Downloads/toh-pt6/node_modules/rxjs/internal/operators/mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (/Users/marvinheilemann/Downloads/toh-pt6/node_modules/rxjs/internal/Subscriber.js:103:18)
    at TapSubscriber._next (/Users/marvinheilemann/Downloads/toh-pt6/node_modules/rxjs/internal/operators/tap.js:109:26)
    at TapSubscriber.Subscriber.next (/Users/marvinheilemann/Downloads/toh-pt6/node_modules/rxjs/internal/Subscriber.js:103:18)
    at MergeMapSubscriber.notifyNext (/Users/marvinheilemann/Downloads/toh-pt6/node_modules/rxjs/internal/operators/mergeMap.js:141:26)
    at InnerSubscriber._next (/Users/marvinheilemann/Downloads/toh-pt6/node_modules/rxjs/internal/InnerSubscriber.js:30:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular-io-example@1.0.0 build:client-and-server-bundles: `ng build --prod && ng run angular.io-example:server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-io-example@1.0.0 build:client-and-server-bundles script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/marvinheilemann/.npm/_logs/2018-05-09T11_30_03_776Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular-io-example@1.0.0 build:ssr: `npm run build:client-and-server-bundles && npm run webpack:server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-io-example@1.0.0 build:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/marvinheilemann/.npm/_logs/2018-05-09T11_30_03_801Z-debug.log

It does not create any server or browser folder, just an angular.io-example folder. The download of the finished sample code is working… maybe someone just needs to update the page

12 Answers

✔️Accepted Answer

For me, it was because I needed to replace angular.io-example in the build:ssr script to the name of my project as seen under projects in /angular.json.

Easy to see if you just search angular.io-example in the sample project they give you on the SSR docs.

/angular.json

...
  "projects": {
    "foobar": { // this is the name of the project
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
... etc

/package.json
"build:client-and-server-bundles": "ng build --prod && ng run foobar:server",

Other Answers:

@BrendanHenryGithub is right, I was able to fix the build by:

  1. creating a /src/main.server.ts file with:
export { AppServerModule } from './app/app.server.module';
  1. adding a server target to /angular.json right under lint:
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        }

Should end up looking kinda like this:

...
       "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        }
...
  1. In /angular.json change:
"options": {
            "outputPath": "dist",

to:

"options": {
            "outputPath": "dist/browser",

This is where the server expects to look for resources

// server.ts
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

I get a similar error, Project 'angular.io-example' could not be found in workspace. when trying to follow the tutorial with all the latest package versions. :(

More Issues: