Angular Universal: "Project could not be found in workspace."

Question

I'm trying to convert my existing Angular Project to work with Angular Universal (https://universal.angular.io/). I'm following this tutorial: https://github.com/angular/angular-cli/wiki/stories-universal-rendering. I'm stuck at the end of Step 3 (Building the Bundle). The name of my project is "fundercat". When I try to run:

ng run fundercat:server

I get the error:

Project 'dist/fundercat' could not be found in workspace.

Following the tutorial, I modified the following line in app.module.ts:

@NgModule({
  imports: [
    // Modified this line:
    BrowserModule.withServerTransition({appId: 'fundercat'}),

And I added the following to angular.json:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "fundercat": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "architect": {
                ...
                // added this block:
                "server": {
                    "builder": "@angular-devkit/build-angular:server",
                    "options": {
                        "outputPath": "dist/fundercat",
                        "main": "src/main.server.ts",
                        "tsConfig": "src/tsconfig.server.json"
                    }
                }

Any idea what I'm doing wrong?

Answer 1

Double check that fundercat is the name of your project by looking at what is listed as the name in your package.json file. If the name is something other than fundercat, you will have to use that name in the command in order to build the server. For example, if your project is actually named FunderCat then you need to run ng run FunderCat:server to run the server.

I ran into a similar issue when I tried to add angular universal to the angular-tour-of-heroes project. The way the documentation was worded made it seem like "my-project" was some kind of special angular cli command for running the server. It's not. "my-project" refers to the name of the project you're working on. So I had to run ng run angular-tour-of-heroes:server to run the server in the tutorial project instead of ng run my-project:server.