Universal: Angular 8: Tour of Heroes doesn't work with Angular Universal

[KingDarBoja]

Bug Report

Hello Universal Team,

I cloned the Angular Tour of Heroes repo as foundation for the Universal guide and the app was succesfully served after running npm install and ng serve.

Of course, tried to run the following command:
ng add @nguniversal/express-engine --clientProject angular.io-example

And noticed the "@nguniversal/express-engine": "^8.1.1", line being added as dependency on my package.json file but after that, got Cannot read property 'kind' of undefined.

What is the expected behavior?

The above schematic should create the files mentioned on the tutorial.

What is the current behavior?

No files were added hence no universal features.

What modules are related to this issue?

- [ ] aspnetcore-engine
- [ ] common
- [x] express-engine
- [ ] hapi-engine
- [ ] module-map-ngfactory-loader

Minimal reproduction with instructions:

• Clone the tour of heroes repo (check solution section and click download example).
• Run npm install
• Run ng add @nguniversal/express-engine --clientProject angular.io-example

What is the use-case or motivation for changing an existing behavior?

I already checked other issues on the Angular repo, like this and this one but it opened a new issue because I do believe the Tour of Heroes tutorial series should get a quick fix in for Angular version 8 (not upcoming 9).

I don't know the cause of this but any response would be nice 🍰

Cheers!

Environment:

Angular CLI: 8.3.18
Node: 11.15.0
OS: win32 x64
Angular: 8.2.13
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0
@angular-devkit/build-angular     0.800.0
@angular-devkit/build-optimizer   0.800.0
@angular-devkit/build-webpack     0.800.0
@angular-devkit/core              8.0.0
@angular-devkit/schematics        8.3.18
@angular/cli                      8.3.18
@ngtools/webpack                  8.0.0
@nguniversal/express-engine       8.1.1
@schematics/angular               8.3.18
@schematics/update                0.803.18
rxjs                              6.5.3
typescript                        3.4.5
webpack                           4.30.0

Is there anything else we should know?

Nope.

[atifsaddique211f]

I am having the same issue in this project : https://github.com/CTemplar/webclient
Here are my dependencies.

 "dependencies": {
    "@angular/animations": "8.2.5",
    "@angular/cdk": "8.1.4",
    "@angular/common": "8.2.5",
    "@angular/compiler": "8.2.5",
    "@angular/core": "8.2.5",
    "@angular/forms": "8.2.5",
    "@angular/material": "8.1.4",
    "@angular/platform-browser": "8.2.5",
    "@angular/platform-browser-dynamic": "8.2.5",
    "@angular/platform-server": "8.2.5",
    "@angular/router": "8.2.5",
    "@ng-bootstrap/ng-bootstrap": "^4.0.2",
    "@ngrx/effects": "^8.3.0",
    "@ngrx/router-store": "^8.3.0",
    "@ngrx/store": "^8.3.0",
    "@ngrx/store-devtools": "^8.3.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "bcryptjs": "^2.4.3",
    "bootstrap": "^4.3.1",
    "core-js": "^3.2.1",
    "cssfilter": "0.0.10",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.26",
    "ng-keyboard-shortcuts": "^8.0.0",
    "ng-recaptcha": "^5.0.0",
    "ngx-chips": "^2.0.2",
    "ngx-take-until-destroy": "^5.4.0",
    "ngx-virtual-keyboard": "^1.0.56",
    "ngx7-material-keyboard": "^0.1.2",
    "openpgp": "^4.6.2",
    "quill": "^1.3.6",
    "rxjs": "^6.5.3",
    "tslib": "^1.10.0",
    "xss": "^1.0.6",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8.2.0",
    "@angular-builders/dev-server": "^7.3.1",
    "@angular-devkit/build-angular": "~0.803.3",
    "@angular/cli": "8.3.3",
    "@angular/compiler-cli": "8.2.5",
    "@angular/language-service": "8.2.5",
    "@types/jasmine": "~3.4.0",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~12.7.4",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.19.0",
    "typescript": "^3.4.5"
  }

[vikerman]

Will investigate it this week

[vikerman]

Can reproduce the error in 8.x.

Doesn't happen in 9.0-rc.5 of CLI/Angular and @next of express-engine.

Will try to see if we just need a release of 8.0 with latest CLI packages.

[vikerman]

Ok - Found the issue. There is incompatibility between the TypeScript version baked into the latest Angular CLI and the version in Tour of heroes.

The workaround would be to open package.json of the TOH project and update it to "3.5.3", do npm install and then try

ng add @nguniversal/express-engine --clientProject angular.io-example

[vikerman]

This happened because the project doesn't seem to have been generated by CLI and the semver specifications were not correct causing the typescript version to become incompatible. Will ensure that the 9.0 ones are correct and more 9.x+ future proof.

[KingDarBoja]

This happened because the project doesn't seem to have been generated by CLI and the semver specifications were not correct causing the typescript version to become incompatible. Will ensure that the 9.0 ones are correct and more 9.x+ future proof.

Glad to hear that, I will try again as soon as posible the provided workaround.

UPDATE It works now! 👍

[angular-automatic-lock-bot[bot]]

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._}