Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Installing current @ng-toolkit/universal@8.0.3 version in Angular 8 produces error.

See original GitHub issue

I’m submitting a…


[x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request

In package


[ ] @ng-toolkit/init
[ ] @ng-toolkit/serverless
[x] @ng-toolkit/universal
[ ] @ng-toolkit/pwa
[ ] @ng-toolkit/firebug

Current behavior

I’m trying to add universal toolkit to existing Angular 8 project. I’ve managed to install the package by installing separate packages, like so:

ng add @nguniversal/express-engine --clientProject {projectName}
npm install @nguniversal/common --save
npm install @ng-toolkit/universal@8.0.3 --save

But this shouldn’t be the case.

Expected behavior

Run ng add @ng-toolkit/universal@8.0.3 --save in the terminal to install server-side rendering for Angular.

Minimal reproduction of the problem with instructions

As above, trying to run ng add @ng-toolkit/universal@8.0.3 --save causes an error

+ @ng-toolkit/universal@8.0.3
added 22 packages from 8 contributors and audited 22347 packages in 17.87s
found 7 vulnerabilities (1 moderate, 6 high)
  run `npm audit fix` to fix them, or `npm audit` for details
Installed packages for tooling via npm.
[bugsnag] Loaded!
ERROR: Cannot read property 'architect' of undefined
ERROR: If you think that this error shouldn't occur, please fill up bug report here: https://github.com/maciejtreder/ng-toolkit/issues/new
INFO: stacktrace has been sent to tracking system.
Nothing to be done.

Example repository

Sadly, I can’t share the repository but I will post my package.json and angular.json files.

{
  "name": "XXXYYY-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "my-scripts": ""
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/pwa": "^0.803.4",
    "@angular/router": "~8.0.0",
    "@angular/service-worker": "~8.0.0",
    "@ng-select/ng-select": "^3.0.6",
    "@ng-toolkit/universal": "^8.0.3",
    "apollo-angular": "^1.6.0",
    "apollo-angular-link-http": "^1.8.0",
    "apollo-cache-inmemory": "^1.6.2",
    "apollo-client": "^2.6.3",
    "apollo-link": "^1.2.12",
    "apollo-link-error": "^1.1.11",
    "date-fns": "^1.30.1",
    "decko": "^1.2.0",
    "graphql": "^14.4.2",
    "graphql-tag": "^2.10.1",
    "headroom.js": "^0.10.3",
    "jquery": "^3.4.1",
    "ng2-datepicker": "^3.1.1",
    "ngx-cookie-service": "^2.2.0",
    "ngx-facebook": "^2.4.0",
    "ngx-hm-carousel": "^1.6.5-bata.1",
    "ngx-slick-carousel": "^0.4.4",
    "ngx-take-until-destroy": "^5.4.0",
    "ngx-textarea-autosize": "^2.0.3",
    "rxjs": "~6.4.0",
    "slick-carousel": "^1.8.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular-devkit/build-ng-packagr": "~0.800.0",
    "@angular/cli": "~8.0.1",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "ng-packagr": "^5.1.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tsickle": "^0.35.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3",
    "webpack-bundle-analyzer": "^3.5.2"
  }
}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "XXX": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "sass"
        }
      },
      "root": "projects/XXX",
      "sourceRoot": "projects/XXX/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/xxx",
            "index": "projects/XXX/src/index.html",
            "main": "projects/XXX/src/main.ts",
            "polyfills": "projects/XXX/src/polyfills.ts",
            "tsConfig": "projects/XXX/tsconfig.app.json",
            "assets": [
              "projects/XXX/src/favicon.ico",
              "projects/XXX/src/assets",
              "projects/XXX/src/manifest.json"
            ],
            "styles": [
                "node_modules/slick-carousel/slick/slick.scss",
                "node_modules/@ng-select/ng-select/themes/default.theme.css",
                "projects/ui-styles/icon-fonts/style.css",
                "projects/ui-styles/normalize.css",
                "projects/XXX/src/styles.sass"
            ],
            "scripts": [
                "node_modules/jquery/dist/jquery.min.js",
                "node_modules/slick-carousel/slick/slick.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/XXX/src/environments/environment.ts",
                  "with": "projects/XXX/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "projects/XXX/ngsw-config.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "XXX:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "XXX:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "XXX:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/XXX/src/test.ts",
            "polyfills": "projects/XXX/src/polyfills.ts",
            "tsConfig": "projects/XXX/tsconfig.spec.json",
            "karmaConfig": "projects/XXX/karma.conf.js",
            "assets": [
              "projects/XXX/src/favicon.ico",
              "projects/XXX/src/assets",
              "projects/XXX/src/manifest.webmanifest"
            ],
            "styles": [
                "projects/ui-styles/normalize.css",
                "projects/ui-styles/main.sass",
                "projects/XXX/src/styles.sass"
            ],
            "scripts": [
                "node_modules/jquery/dist/jquery.min.js",
                "node_modules/slick-carousel/slick/slick.min.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/XXX/tsconfig.app.json",
              "projects/XXX/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/XXX/e2e/protractor.conf.js",
            "devServerTarget": "XXX:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "XXX:serve:production"
            }
          }
        }
      }
    },
    "YYY": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "sass"
        }
      },
      "root": "projects/YYY",
      "sourceRoot": "projects/YYY/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/en",
            "index": "projects/YYY/src/index.html",
            "main": "projects/YYY/src/main.ts",
            "polyfills": "projects/YYY/src/polyfills.ts",
            "tsConfig": "projects/YYY/tsconfig.app.json",
            "assets": [
              "projects/YYY/src/favicon.ico",
              "projects/YYY/src/assets",
              "projects/YYY/src/manifest.json"
            ],
            "styles": [
                "node_modules/slick-carousel/slick/slick.scss",
                "node_modules/@ng-select/ng-select/themes/default.theme.css",
                "projects/ui-styles/icon-fonts/style.css",
                "projects/ui-styles/normalize.css",
                "projects/YYY/src/styles.sass"
            ],
            "scripts": [
                "node_modules/jquery/dist/jquery.min.js",
                "node_modules/slick-carousel/slick/slick.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/YYY/src/environments/environment.ts",
                  "with": "projects/YYY/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "projects/YYY/ngsw-config.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "YYY:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "YYY:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "YYY:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/YYY/src/test.ts",
            "polyfills": "projects/YYY/src/polyfills.ts",
            "tsConfig": "projects/YYY/tsconfig.spec.json",
            "karmaConfig": "projects/YYY/karma.conf.js",
            "assets": [
              "projects/YYY/src/favicon.ico",
              "projects/YYY/src/assets",
              "projects/YYY/src/manifest.webmanifest"
            ],
            "styles": [
                "projects/ui-styles/normalize.css",
                "projects/ui-styles/main.sass",
                "projects/YYY/src/styles.sass"
            ],
            "scripts": [
                "node_modules/jquery/dist/jquery.min.js",
                "node_modules/slick-carousel/slick/slick.min.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/YYY/tsconfig.app.json",
              "projects/YYY/tsconfig.spec.json",
              "projects/YYY/e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/YYY/e2e/protractor.conf.js",
            "devServerTarget": "YYY:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "YYY:serve:production"
            }
          }
        }
      }
    },
    "XY-lib": {
      "projectType": "library",
      "root": "projects/XY-lib",
      "sourceRoot": "projects/XY-lib/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/XY-lib/tsconfig.lib.json",
            "project": "projects/XY-lib/ng-package.json"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/XY-lib/src/test.ts",
            "tsConfig": "projects/XY-lib/tsconfig.spec.json",
            "karmaConfig": "projects/XY-lib/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/XY-lib/tsconfig.lib.json",
              "projects/XY-lib/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }},
  "defaultProject": "projects"
}

What is the motivation / use case for changing the behavior?

Environment


Angular version: 8.0.0

- Node version: 10.15.0
- Platform:  Windows & Mac

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
mmiedzianyycommented, Nov 29, 2019

I do agree… It’s very hard to implement angular universal for multiple apps in one project. I’ve tried to omit ng-toolkit and do my own SSR with packages I’ve found on the web, but with no luck… The configuration would have taken too much time and I guess - as you suggested - it will be better to split it up. I’ll try to install current version of ng-toolkit on a fresh project and if I’ll be successfull, will copy the projects separately.

0reactions
KingDarBojacommented, Nov 29, 2019

It is better as each project would have its own configuration. I do think it is possible to implement such thing with Angular Universal packages but haven’t seen any example on the web.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error setting up new project with angular/cli - Stack Overflow
Try these steps: npm cache clean --force; Open cmd and go to your current user cd C:\Users{your user name here}; npm config set...
Read more >
Setting up the local environment and workspace - Angular
The CLI creates a new workspace and a simple Welcome app, ready to run. Run the applicationlink. The Angular CLI includes a server,...
Read more >
Angular versioning and releases
We update peer dependencies in minor versions by expanding the supported versions, but we do not require projects to update these dependencies. Patch...
Read more >
CLI Overview and Command Reference - Angular
Installing Angular CLIlink. Major versions of Angular CLI follow the supported major version of Angular, but minor versions can be released separately. Install...
Read more >
Workspace npm dependencies - Angular
You can download and install these npm packages by using the npm CLI client, ... about the required versions and installation of Node.js...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Unable to run server.js when using Apollo Graphql.

Next page

ng add @ng-toolkit/universal throws ERROR: Cannot read property 'unshift' of undefined