0

Using Windows 10, Visual Studio 2022 17.2.4, Angular 16.15.1.

I created my project using ng new [project-name] etc... Project has configuration files in root folder then website in /src folder. I opened my project in Visual Studio 2022 through File > Open > WebSite.... Visual Studio added a Web.config file in the root folder.

Problem: When I run the site from Visual Studio, the site opens at http://localhost:61500/src/index.html

I do not want to use full blown IIS or such for this project. I would like to configure the project so that VS open it at http://localhost:61500/index.html (without the /src level) Or even better would be: http://localhost:61500/

Is it possible to do this from current situation ?


By searching the Internet I find suggestions that imply using a different project type or IIS, but haven't found the solution for this precise case.


Tried: I tried adding the following which I found in another StackOverflow question, but this didn't change a thing.

  <system.web>
    (...)
      <urlMappings enabled="true">
          <add url="~/" mappedUrl="~/src/index.html" />
      </urlMappings>

  </system.web>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Redirect everything to root" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/src/{R:0}" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>

Tried: I tried adding the following which I found in another StackOverflow question. The site was launched once at http://localhost:61500/ with a server error. Now that I have removed this. The site will ALWAYS start at http://localhost:61500/ with a "HTTP Error 403.14 - Forbidden" error. (Is there some cache that can be removed ?) http://localhost:61500/src/index.html gets the Forbidden error as well.

<system.webServer>
        <httpRedirect enabled="true" destination="http://localhost:61500/" exactDestination="true" httpResponseStatus="Permanent" />
    </system.webServer>

Edit: Even after deleting Web.config and other Visual Studio related folders and deleting the solution files from "C:\Users[UserName\source\repos" and reopening the project as a fresh new "website" ... launching from Visual Studio goes to http://localhost:61500/ with HTTP Error 403.14 - Forbidden response.


Edit: Very weird...

  • I created a "simple" website on a random location, opened it as a website in Visual Studio, it worked fine, it didn't get the HTTP Error 403.14 - Forbidden error.
  • I move renamed my Angular 2+ project and moved the files from this tiny website to it's loction, opened it as a website in Visual Studio, it worked fine, it didn't get the HTTP Error 403.14 - Forbidden error.
  • I completely deleted my Angular project (I had not written anything in it yet anyway) and regerated it completely from the command that is mentionned above. I opened it as a website in Visual Studio, and HTTP Error 403.14 - Forbidden error.

So it seems like there is I-don't-know-what in Visual Studio "debugging" IIS that recognises this path + file structure and that bring back HTTP Error 403.14 - Forbidden error. This is very confusing to me.

Plus Right now I'm wondering if this Angular project can actually work when "opened as a website" where node.js is not involved... but this is a project to learn Angular anyway so it might as well not work on first try.


I gave up on trying to solve these issues in Visual Studio alone. As workaround, I configured the local site in XAMPP and in Visual Studio > Right Click on the project > Property Pages > Start Options > Start URL & Use custom server > (entered the http://+[local domain to the configured site]). (Not sur yet if everything will be OK for Angular as I'm still at the very beginning of the tutorial.)

Edit: Workaround part 2: I now realised it was wrong to try to point the website to /src since it's for source code (yes I'm tired) but I also realised that Visual Studio never actually generated compiled website... despite writing that compilation was successful... or where it is? I now use command ng build to compile site, pointed the local domain to [[project-path]\dist[project-name]\ and first "Hello Word" worked (displaying title at <app-root></app-root>). Not sure if Visual Studio is still useful in this case, I might as well use Notepad/++ at this point...

But if someone has solutions to the initial problems... you're still welcome.

TTT
  • 1,848
  • 2
  • 30
  • 60
  • 1
    Why not just use `ng serve`? – saravana priyan Jun 21 '22 at 09:03
  • Thank you, I will check what is ng serve and how it works next time I work on this. – TTT Jun 21 '22 at 13:05
  • @saravanapriyan: I tried `ng serve [project]` but that does nothing. I read that I should first run `npm i`, I realised that `npm i` has to be run from the project directory, but yet even after this, `ng serve [project]` does nothing. I think that I will be fine with XAMPP for now with this learning-project ... unless `ng serve` comes with some specific debug/log or something? – TTT Jun 23 '22 at 20:12
  • I just realised that `ng serve` is more than a replacement for XAMPP but also listen to changes for rebuilt... It's working now. Thank you. – TTT Jun 23 '22 at 22:21

0 Answers0