CODEWITHSUNDEEP
c#angularasp.net-core-2.1
JED
JED

Reputation: 1694

angular app works on http://localhost:4200, but I want https://localhost:44325

I have an ASP.NET Core 2.1 Web Application set up with an Angular front-end (using VS default setup) that was configured to run over an HTTPS connection.

I ran the project initially, and it worked fine on https://localhost:44325. However, now, after editing my the .html and .ts files,the changes do not carry over. But when I run the server on http://localhost:4200, the changes carry over.

I want the changes to carry over on https://localhost:44325 since that is the port that my browser opens to when I run the application. How do I change this? Is it an npm issue? Is it in my angular app? Is it in Startup.cs?

Startup.cs

...
public void ConfigureDevelopmentServices(IServiceCollection services)
{
    ...
    app.UseMvc(routes =>
    {
        routes.MapSpaFallbackRoute(
            name: "spa-fallback",
            defaults: new { controller = "Fallback", action = "Index" }
        );
    });
    ...
}
...



environment.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:5000/api/'
};

Upvotes: 2

Views: 3802

Answers (3)

JED
JED

Reputation: 1694

After comparing to the default configuration of an Angular/Core 2 app, I found the differences that made the difference.

Startup.cs

    public void ConfigureDevelopmentServices(IServiceCollection services)
    {
        ...
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });
        ...

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        ...
        app.UseSpaStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
                //spa.UseAngularCliServer(npmScript: "start");
            }
        });



Environment.ts

apiUrl: 'https://localhost:44325/api/

(in Environment.prod.ts, this is 'api/')

Upvotes: 1

Paul
Paul

Reputation: 11

I'd wager that the issue is that your browser cached the files you initially used on port 44325. You could try manually clearing the cache for that url in your browser. I added this to a web.config file for an ASP.NET project I worked on to help with a similar issue. Not sure if there's a similar mechanism for ASP.NET Core.

<system.webServer>
        ...
        <httpProtocol>
            <!-- TODO Remove for production -->
            <customHeaders>
                <!-- Disable Cache  -->
                <add name="Cache-Control" value="no-cache, no-store, must-revalidate"/>
                <add name="Pragma" value="no-cache"/>
                <add name="Expires" value="0"/>
            </customHeaders>
        </httpProtocol>
    </system.webServer>

Upvotes: 1

Umang Patel
Umang Patel

Reputation: 133

You can run your angular app on desired port by editing .angular-cli.json file just add "server" section to "defaults" section in that file. You can replace 2500 with your desired port.

"defaults": {
    "serve": {
        "port": 2500
    }
}

Upvotes: 1

Related Questions