Skip to content
This repository was archived by the owner on Nov 22, 2024. It is now read-only.

Angular 12 Universal Configuration 'development' is not set in the workspace #2158

Closed
1 task
TetianaNazarova opened this issue Jun 8, 2021 · 9 comments
Closed
1 task

Angular 12 Universal Configuration 'development' is not set in the workspace #2158

TetianaNazarova opened this issue Jun 8, 2021 · 9 comments
Labels
area: express-engine type: bug/fix

Comments

@TetianaNazarova
Copy link

TetianaNazarova commented Jun 8, 2021 •
edited
Loading

I created new project - client - on Angular 11. Then updated ng version to 12 Angular. Then installed Universal: ng add @nguniversal/express-engine

Then I'm trying to run my Universal Angular, but it throws error:

npm run dev:ssr

client@0.0.0 dev:ssr ng run client:serve-ssr

This is a simple server for use in testing or debugging Angular applications locally. It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!

Configuration 'development' is not set in the workspace. npm ERR! code 1 npm ERR! path E:\PRACTICE\MYPETPROJECTS\tanechka\client npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c ng run client:serve-ssr

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\1\AppData\Local\npm-cache_logs\2021-06-08T14_35_07_681Z-debug.log

angular.json

`{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "client": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "client:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "client:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "client:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "client:serve:production"
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/client/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "optimization": false,
            "sourceMap": true,
            "extractLicenses": false
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "sourceMap": false,
              "extractLicenses": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "configurations": {
            "development": {
              "browserTarget": "client:build:development",
              "serverTarget": "client:server:development"
            },
            "production": {
              "browserTarget": "client:build:production",
              "serverTarget": "client:server:production"
            }
          },
          "defaultConfiguration": "development"
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production",
              "serverTarget": "client:server:production"
            },
            "development": {
              "browserTarget": "client:build:development",
              "serverTarget": "client:server:development"
            }
          },
          "defaultConfiguration": "production"
        }
      }
    }
  },
  "defaultProject": "client"
}

`

package.json:

`{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run client:serve-ssr",
    "serve:ssr": "node dist/client/server/main.js",
    "build:ssr": "ng build && ng run client:server",
    "prerender": "ng run client:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/forms": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/platform-server": "~12.0.3",
    "@angular/router": "~12.0.3",
    "@nguniversal/express-engine": "^12.0.1",
    "express": "^4.15.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "~12.0.3",
    "@angular/compiler-cli": "~12.0.3",
    "@nguniversal/builders": "^12.0.1",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.6.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.2.4"
  }
}
`

🐞 Bug report

What modules are related to this issue?

  • express-engine

Is this a regression?

No, as I know, the previous version in which this bug was not present was.

Description

🔬 Minimal Reproduction

I tried to add 'development' to 'configurations' of serve:

`"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "client:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            },
            "development": {
              "browserTarget": "client:build:production"
            }
          }
        },`

But it didn't work.

I tried to delete all node_modules and then install it, but it didn't work too.
Please, help.
@DavidCMeier
Copy link

Could you try to delete this line on serve-ssr: "defaultConfiguration": "development" and "configuration.development path. Then add options below builder like this:
"options": { "browserTarget": "client:build", "serverTarget": "client:server", },

I think the problem is that if you use a development configuration they try to use the same configuration on server and build, so if you don't have it have this problem.

@alan-agius4
Copy link
Collaborator

We are wrongly assuming that users are using the @angular/cli opt-in migration ng update @angular/cli --migrate-only production-by-default to convert their projects to production by default, which will also create a development configuration.

Note, in version 12, there is also a new experimental way of SSR, To opt-in you can use ng add @nguniversal/common.

@TetianaNazarova
Copy link
Author

Could you try to delete this line on serve-ssr: "defaultConfiguration": "development" and "configuration.development path. Then add options below builder like this:
"options": { "browserTarget": "client:build", "serverTarget": "client:server", },

Thank you, this helps. Now app is running. But for me as a newbie it is not obviously why after installing Angular 12 and Universal I can't run app by command from package.json.

Thank you for this bug fix. Now I will upgrade my new pet app to 12 Angular and will try TailWind with it.

@TetianaNazarova
Copy link
Author

Note, in version 12, there is also a new experimental way of SSR, To opt-in you can use ng add @nguniversal/common.

I created new Angular 12 app and install Universal with
ng add @nguniversal/common

Then I tried to run app with npm run prerender and got this error:
D:\PRACTICE\universal-angular12>npm run prerender

universal-angular12@0.0.0 prerender D:\PRACTICE\universal-angular12
ng run universal-angular12:prerender

An unhandled exception occurred: Could not find any routes to generate.
See "C:\Users\tanyamt\AppData\Local\Temp\ng-DOX2nI\angular-errors.log" for further details.
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file C:\WINDOWS\system32\cmd.exe
npm ERR! errno ENOENT
npm ERR! universal-angular12@0.0.0 prerender: ng run universal-angular12:prerender
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the universal-angular12@0.0.0 prerender 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! C:\Users\tanyamt\AppData\Roaming\npm-cache_logs\2021-06-19T15_54_57_513Z-debug.log

In log:
[error] Error: Could not find any routes to generate.
at D:\PRACTICE\universal-angular12\node_modules@nguniversal\builders\src\static-generator\index.js:49:23
at Generator.next ()
at fulfilled (D:\PRACTICE\universal-angular12\node_modules@nguniversal\builders\src\static-generator\index.js:11:58)

This command runs properly: npm run build:client-and-server

This command runs properly: npm run serve:ssr

Thank you for answer, but error in npm run prerender will take me off using this experimental command in my real pet project.

@alan-agius4
Copy link
Collaborator

@TatyanaMolchanova, ummm its strange that a no routes cannot be found when prerendering. Might sharing the project? Also, ideally this should be reported as a separate issue.

@TetianaNazarova
Copy link
Author

@TatyanaMolchanova, ummm its strange that a no routes cannot be found when prerendering. Might sharing the project? Also, ideally this should be reported as a separate issue.

I created new issue:
#2179

This is the link to my repo with npm run prerender error: https://github.com/TatyanaMolchanova/angular12-universal-prerender-error

@cevaris
Copy link

cevaris commented Oct 4, 2021 •
edited
Loading

We are wrongly assuming that users are using the @angular/cli opt-in migration ng update @angular/cli --migrate-only production-by-default to convert their projects to production by default, which will also create a development configuration.

I ran into this issue as well.
The above advise was tricky to follow, so here is my interpretation as a snippet..

angular.json

        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "app:build",
            "serverTarget": "app:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production",
              "serverTarget": "app:server:production"
            }
          }
        },

@alan-agius4
Copy link
Collaborator

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 16, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: express-engine type: bug/fix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@cevaris @alan-agius4 @DavidCMeier @TetianaNazarova