Giter Club home page Giter Club logo

angularcliaspnetcore's Introduction

Angular CLI ASP.NET Core

Angular CLI & ASP.NET Core WebAPI in the same project. Angular AoT compilation in development & production mode.

Get the Changelog.

Features

  • Angular v7 & ASP.NET Core 2.1
  • Angular CLI
  • AoT compilation in development & production mode
  • Angular CLI, .NET Core CLI or Visual Studio 2017
  • Angular Material

Project structure

AngularCliAspNetCore

  • Controllers
    • ValuesController.cs Resource API
  • Properties
    • lanchSettings.json ASP.NET Core environments
  • ClientApp Angular application
  • wwwroot Root for Angular application deployment
  • Startup.cs WebAPI configuration

Installing

Command line & .NET Core CLI

  • In ClientApp folder run: npm install
  • dotnet build

Visual Studio 2017

  • In ClientApp folder run: npm install
  • Build the solution

Running

The app will be served on https://localhost:5001

Command line & .NET Core CLI

Development

  • dotnet watch run

Staging

  • In ClientApp folder run: npm run build
  • dotnet run --launch-profile Staging

Visual Studio 2017

Development

  • Select AngularCliAspNetCore profile
  • Start debugging

Staging

  • In ClientApp folder run: npm run build
  • Select Staging profile
  • Start debugging

Start from scratch

  • Create the ASP.NET Core WebAPI:
dotnet new webapi -o AngularCliAspNetCore
  • Create the Angular app:
cd AngularCliAspNetCore
ng new --skipGit=true ClientApp
  • Open angular.json file and set the outputPath:
"outputPath": "../wwwroot"
  • Open package.json file and set the following scripts:
"start": "ng serve --aot",
"build": "ng build --prod",
  • Open Startup.cs file and add to the ConfigureServices method:
services.AddSpaStaticFiles(configuration =>
{
	if (Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") == "Development")
	{
		configuration.RootPath = "ClientApp/dist/ClientApp";
	}
	else
	{
		configuration.RootPath = "wwwroot";
	}
});

and to Configure method:

app.UseStaticFiles();
app.UseSpaStaticFiles();

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

app.UseSpa(spa =>
{
	spa.Options.SourcePath = "ClientApp";

	if (env.IsDevelopment())
	{
		spa.UseAngularCliServer(npmScript: "start");
	}
});

For other features, refer to the repository.

License

MIT

angularcliaspnetcore's People

Contributors

robisim74 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

angularcliaspnetcore's Issues

Check if the process of "npm start" command is already running

Sometimes Visual Studio 2017 starts the process in ShellExtensions twice.

Find a better solution than this to see if the process is already running:

private static bool IsProcessRunning()
{
    foreach (var process in Process.GetProcesses())
    {
        try
        {
            if (process.StartInfo.FileName == "cmd.exe")
            {
                return true;
            }
        }
        catch (InvalidOperationException ex)
        {
            continue;
        }
    }
    return false;
}

Start Angular CLI & ASP.NET Core from scratch


  • Create the Angular app:
ng new AngularCliAspNetCore
cd AngularCliAspNetCore
  • Create the ASP.NET Core WebAPI:
dotnet new webapi --use-launch-settings
  • Open .angular-cli.json file and set the outDir:
"outDir": "wwwroot"
  • Open Startup.cs file and add to the configure method:
app.UseMvc();

// Microsoft.AspNetCore.StaticFiles: API for starting the application from wwwroot.
// Uses default files as index.html.
app.UseDefaultFiles();
// Uses static file for the current path.
app.UseStaticFiles();
  • Create proxy.config.json file, to send the requests to the backend server rather than the webpack dev-server during the development:
{
  "/api": {
	"target": "http://localhost:5000/",
	"secure": false
  }
}
  • Open package.json file and set the following scripts:
"start": "ng serve --aot --proxy-config proxy.config.json",
"build": "ng build --prod",
  • Open launchSettings.json file and set the environments: launchSettings

  • To run automatically the npm start command, you can add the ShellExtensions and use it in Startup.cs:

if (env.IsDevelopment())
{
    ....
    // Starts "npm start" command using Shell extension.
    app.Shell("npm start");
}
  • Done

For other features, refer to the repository.

Wildcard routing

With this setup how do you go about handling wildcard routing on the server?

I usually use something like this in the routing file:
{ path: '**', redirectTo: 'error' }

However, that doesn't seem to work on the server. Do you handle it at the server level? I'd rather handle it with Angular personally. BTW, the project is great! I love the idea of having my api with my Angular project.

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.