Adding external scss file to the styles array breaks routing.

🐞 bug report

Affected Package

Seems like the router.

Is this a regression?

Not sure. This is happening in a new project.

Description

Add a scss style sheet from outside (above) the angular root to the styles array in angular.json and it breaks routing:

	"styles": [
		"src/styles.scss",
		"../SharedStyles/Brand.scss"
	],

So if I ng new into the /ClientApp folder and the /SharedStyles folder is at the same level as /ClientApp, and I try to include /SharedStyles/Brand.scss in my styles array, the build completes and the page is rendered correctly with the new styles. However clicking on a link (routerLink) breaks with the error shown below. If I simply remove the reference to the scss file, then clicking the link works.

🔬 Minimal Reproduction

This repro shows the code that works. But if you un-comment the extra style sheet the build doesn’t work. It seems like stackblitz doesn’t like the extra folder:

https://stackblitz.com/edit/angular-issue-repro2-uph9xd?embed=1&file=src/index.html

However, on my machine the build does work with the same folder structure.

🔥 Exception or Error

[HttpException]: The controller for path '/search' was not found or does not implement IController.
   at System.Web.Mvc.DefaultControllerFactory.GetControllerInstance(RequestContext requestContext, Type controllerType)
   at System.Web.Mvc.MvcHandler.ProcessRequestInit(HttpContextBase httpContext, IController& controller, IControllerFactory& factory)
   at System.Web.Mvc.MvcHandler.BeginProcessRequest(HttpContextBase httpContext, AsyncCallback callback, Object state)
   at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
   at System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step)
   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

🌍 Your Environment

Angular Version:

Angular CLI: 8.3.23
Node: 11.12.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cli                      8.3.23
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant? NOTE: I do have a baseHref set to /dist/ClientApp and outputPath is set to ../dist/ClientApp.

[cosmoKenney]

After commenting out all css rules in Brand.scss and adding them back in one-by-one, I found the problem. The router-outlet was pushed off the screen and I was looking at the wrong output window when I was seeing the error in listed in the original post. @ericmartinezr thanks for taking the time to answer. I’m closing this 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.}