Skip to content
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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

@angular-devkit/build-angular upgrade breaks HMR #16410

Closed
14 tasks
laurencefass opened this issue Dec 10, 2019 · 1 comment 路 Fixed by #16416
Closed
14 tasks

@angular-devkit/build-angular upgrade breaks HMR #16410

laurencefass opened this issue Dec 10, 2019 · 1 comment 路 Fixed by #16416
Labels
area: devkit/build-angular freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Milestone
Backlog

Comments

@laurencefass
Copy link

laurencefass commented Dec 10, 2019 •
edited

馃悶 Bug report

Command (mark with an x)

  • new
  • build
  • [ x ] serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • xi18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

yes HMR works fine with package version:

"@angular-devkit/build-angular": "0.800.0",

Description

following package version is breaking HMR on a reverse proxied angular app used in conjunction with config specified in the "Environment Section" of this post.

"@angular-devkit/build-angular": "~0.803.20",

Create-react-app generated package.json (breaks HMR)

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --port 3601 --disable-host-check --public-host https://mydomain.com/myapp/",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.20",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "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",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

I can fix HMR with:
"@angular-devkit/build-angular": "0.800.0",

馃敩 Minimal Reproduction

HMR is broken using the package.json created by react-app. I can fix HMR replacing build-angular and cli with regressed versions above.

馃敟 Exception or Error

Using the later (broken) versions of devkit and cli the path appears to be correct e.g.mydomain.com/myapp/sockjs-node/info?### but the call results in error 404 file not found

error is initiated by zone-evergreen,js line 2952.

馃實 Your Environment

I have some simple additional configuration to make this work behind reverse nginx proxy

nginx configuration (enables HMR used with package.json above):

server {
    listen 80;
    server_name angular.syntapse.co.uk;
     location ^~ /myapp/sockjs-node/ {
        proxy_pass http://0.0.0.0:3601/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }
     location ^~ /myapp/ {
        proxy_pass http://0.0.0.0:3601/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }
}

index.html (enables HMR used with package.json above)

<head>
  <!-- also configure: nginx locations and package.json --public-host setting -->
  <base href="/myapp/" />
   ... etc
</head>

thanks
@laurencefass laurencefass changed the title Latest version of @angular/cli has broken hot module reload on reverse proxied angular apps. Latest create-react-app output breaks hot module reload on reverse proxied angular apps. Dec 10, 2019
@laurencefass laurencefass changed the title Latest create-react-app output breaks hot module reload on reverse proxied angular apps. Upgrading @angular-devkit/build-angular and @angular-cli breaks HMR Dec 10, 2019
@laurencefass laurencefass changed the title Upgrading @angular-devkit/build-angular and @angular-cli breaks HMR @angular-devkit/build-angular upgrade breaks HMR Dec 10, 2019
@alan-agius4 alan-agius4 added area: devkit/build-angular needs: investigation Requires some digging to determine if action is needed labels Dec 10, 2019
@ngbot ngbot bot added this to the needsTriage milestone Dec 10, 2019
clydin added a commit to clydin/angular-cli that referenced this issue Dec 10, 2019
@clydin
revert: fix(@angular-devkit/build-angular): sockPath for custom path
df945ff 
This reverts commit e097c56.

Fixes angular#16410
Fixes angular#16266
@clydin clydin mentioned this issue Dec 10, 2019
Merged
clydin added a commit to clydin/angular-cli that referenced this issue Dec 10, 2019
@clydin
revert: fix(@angular-devkit/build-angular): sockPath for custom path
f748e0b 
This reverts commit 5260bbb.

Fixes angular#16410
Fixes angular#16266
@clydin clydin mentioned this issue Dec 10, 2019
Merged
@clydin clydin added type: bug/fix freq1: low Only reported by a handful of users who observe it rarely severity5: regression and removed needs: investigation Requires some digging to determine if action is needed labels Dec 10, 2019
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Dec 10, 2019
kyliau pushed a commit that referenced this issue Dec 12, 2019
@clydin @kyliau
revert: fix(@angular-devkit/build-angular): sockPath for custom path
31086e5 
This reverts commit 5260bbb.

Fixes #16410
Fixes #16266
kyliau pushed a commit that referenced this issue Dec 12, 2019
@clydin @kyliau
revert: fix(@angular-devkit/build-angular): sockPath for custom path
0a1743e 
This reverts commit 5260bbb.

Fixes #16410
Fixes #16266
vikerman pushed a commit that referenced this issue Dec 17, 2019
@clydin @vikerman
revert: fix(@angular-devkit/build-angular): sockPath for custom path
87de56b 
This reverts commit e097c56.

Fixes #16410
Fixes #16266
@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 Jan 12, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: devkit/build-angular freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

revert: fix(@angular-devkit/build-angular): sockPath for custom path clydin/angular-cli
3 participants
@laurencefass @alan-agius4 @clydin