Angular 8 routing with serve-path and deploy-url is broken on refresh

[eplatzek]

🐞 bug report

Affected Package

angular/*@8.0.6

Is this a regression?

This used to work in:
angular/*@7.2.4

Description

When using the "serve-path" and "deploy-url" with ng serve, the live reload is broken for routing upon a reload.

🔬 Minimal Reproduction

Repository here:
https://github.com/eplatzek/ng8reloadbug/

Steps to reproduce (using new projects):
Using angular/cli @ 8.0.6
ng new ng8
ng g c my-component



update app.component.ts to:

constructor(private router: Router) {
  this.router.navigate(['my-route']);
}



update app-routing.module.ts to:



const routes: Routes = [
  {
    path: 'my-route',
    component: MyComponentComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})

update package.json:


”start": "ng serve --aot --serve-path /my-app/ --deploy-url /my-app/“,

Run Yarn start.
Navigate to:
 http://localhost:4200/my-app. The user is redirected to:
http://localhost:4200/#/my-route by the app component.


On page reload at http://localhost:4200/#/my-route, the page displays “Cannot GET /“.

The network tab of the dev tools shows a 404 for http://localhost:4200/.

Doing the same exact steps for angular/cli @ 7.2.4 will produce a working page refresh.

🔥 Exception or Error

“Cannot GET /“

🌍 Your Environment

Angular Version:

Angular CLI: 8.0.6
Node: 10.12.0
OS: darwin x64
Angular: 8.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.6
@angular-devkit/build-angular     0.800.6
@angular-devkit/build-optimizer   0.800.6
@angular-devkit/build-webpack     0.800.6
@angular-devkit/core              8.0.6
@angular-devkit/schematics        8.0.6
@angular/cli                      8.0.6
@ngtools/webpack                  8.0.6
@schematics/angular               8.0.6
@schematics/update                0.800.6
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

[bmarti44]

To help shed some more light on this issue (at least what I'm also seeing)...

This command makes it so my app is accessible only at local.nba.com:4200/ssr/browser

ng serve --aot --host local.nba.com --deploy-url /ssr/browser/

If I try to go to any other URL, for example, /membership/settings/billing (which does exist on the SSR side) I get

Cannot GET /membership/settings/billing so none of my URLs are accessible.

Previously, the --deploy-url flag would only control the URL of where the static assets for the app are served from

[opetriienko]

Having the same issue now

[MarcelNeu]

I have the same issue, seems --deploy-url is used as "ng serve" web root.
Affected Package
angular/*@8.1.2

Edit: i found a workaround
Previous config:

"my-app-1": {  
  "architect": {  
	"build": {  
	  "options": {  
		"deployUrl": "/my-app-1/",  
		"assets": [  
		  {  
			"glob": "**/*",  
			"input": "app/resources",  
			"output": "/resources"  
		  }  
		],  
	  }  
	}  
  }  
}

Assets not found and http://localhost:4200/ was not accessible.

Current Config:

"my-app-1": {  
  "architect": {  
	"build": {  
	  "options": {  
		"deployUrl": "/",  
		"assets": [  
		  {  
			"glob": "**/*",  
			"input": "app/resources",  
			"output": "/my-app-1/resources"  
		  }  
		],  
	  },  
	  "configurations": {  
		"production": {  
		  "deployUrl": "/my-app-1/",  
		  "assets": [  
			{  
			  "glob": "**/*",  
			  "input": "app/resources",  
			  "output": "/resources"  
			}  
		  ]  
		}  
	  }  
	},  
  }  
}

Works as in Angular 7.x.x and also my production env is not affected.

Important is to set the deployUrl: '/'

[deeg]

I have the same issue now.

My build config had the following options:

"outputPath": "dist/static", "deployUrl": "static/",

Now I experience the same 'refresh' behavior as describe in the ticket. I can only load the app with 'ng serve' when going to 'http://localhost:8080/static' when before I could just go to the root 'http://localhost:8080'

Has anyone found a work around for this at the moment?

[Perchyk]

@deeg I encountered the same thing when upgrading to latest version. Didn't find any workaround yet, but will definitely get back to you if I find any.

[Perchyk]

I can confirm that a workaround suggested by @MarcelNeu works.
There's one small problem though, assets loaded as <img src...> don't load anymore locally but it's solvable by replacing them with divs with background defined in css.

[MarcelNeu]

@pepper2108 I think this can be solved by setting the correct BASE_HREF

[deeg]

@MarcelNeu , thank you for the fix, it does work for me as well.

I wonder if this is how it will stay or if this new change from 7 to 8 is considered a bug.

I also do not think this ticket belongs under the 'Router' component, as this does not really have anything to do with the Angular router.

[clydin]

The behavior described in the original post is intended. With the options specified, the application is being served from http://localhost:4200/my-app/. There is nothing being served from /. Redirect rules for path based routing are based on the serving path of the application in 8.0+. / is outside the scope of the application and will not be redirected as it cannot be an application route (just as http://localhost:4200/my-other-app/ would not be).

Also of note is that the serve path defaults to a combination of the base-href and deploy-url options based on whether they are relative, root relative, or absolute. In this case, for instance, --serve-path /my-app/ --deploy-url /my-app/ is equivalent to just --deploy-url /my-app/.

The reason this worked previously is that the path based routing redirection was redirecting everything back to the serve path of the application which is incorrect. Only URLs that are within the application should be redirected up to the root of the application (the serve path).

This is also in fact related to routing in that the HTML base HREF is used to configure the routing base of the application. The router will prepend the base HREF to the route to ensure that the URL is within the scope of the application.

For development, it is generally easier to avoid use of any of these options and serve/access the application from the root of localhost (http://localhost:4200/). The deploy URL and base HREF options are mainly intended to allow the built application to adapt to deployment server infrastructure and configuration and not for local development.

[MarcelNeu]

@clydin thank you for clarifying.
Then i keep my changes as solution not as workaround.

[alan-agius4]

Closed as it seems to have been resolved.

[angular-automatic-lock-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.}