Skip to content

/ ng-toolkit

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
mmiedzianyy opened this issue Nov 14, 2019 · 5 comments
Open

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

mmiedzianyy opened this issue Nov 14, 2019 · 5 comments
Labels
P1: important comp: universal good first issue type: bug type: help wanted
Projects
Bugfixes
Milestone
8.1.0

Comments

@mmiedzianyy
Copy link

@mmiedzianyy mmiedzianyy commented Nov 14, 2019

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
@KingDarBoja KingDarBoja added this to the 8.0.4 milestone Nov 14, 2019
@KingDarBoja KingDarBoja added this to To do in Bugfixes Nov 14, 2019
@mmiedzianyy
Copy link
Author

@mmiedzianyy mmiedzianyy commented Nov 29, 2019

@KingDarBoja Hi! Can you please share what is the current progress? When could new version be delivered?
Sorry for pushing you but I really need some help with this.
Cheers!
@KingDarBoja
Copy link
Collaborator

@KingDarBoja KingDarBoja commented Nov 29, 2019

Hello @mmiedzianyy

I do think it is not possible at the moment since you are using multi-projects on you angular.json file and this package can't handle (yet) such configuration.

However, I remember @maciejtreder doing some work on that topic.
@mmiedzianyy
Copy link
Author

@mmiedzianyy mmiedzianyy commented Nov 29, 2019

Thanks for your reply @KingDarBoja.

Maybe I would have to consider splitting up applications on different projects...
@KingDarBoja
Copy link
Collaborator

@KingDarBoja KingDarBoja commented 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.
@mmiedzianyy
Copy link
Author

@mmiedzianyy mmiedzianyy commented Nov 29, 2019 •
edited

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
P1: important comp: universal good first issue type: bug type: help wanted
Projects
Bugfixes
  
To do
Milestone
8.1.0
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
@KingDarBoja @mmiedzianyy
You can’t perform that action at this time.