search

angular / universal

Server-side rendering and Prerendering for Angular
MIT License
4.03k stars 482 forks source link

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

Closed TatyanaMolchanova closed 1 year ago

TatyanaMolchanova commented 3 years ago

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?

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 commented 3 years ago

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 commented 3 years ago

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.

TatyanaMolchanova commented 3 years ago

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.

TatyanaMolchanova commented 3 years ago

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 commented 3 years ago

@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.

TatyanaMolchanova commented 3 years ago

@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: https://github.com/angular/universal/issues/2179

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

cevaris commented 2 years ago

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 commented 1 year ago

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

angular-automatic-lock-bot[bot] commented 1 year ago

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.