Step 1: Create new .net core project as following screen:
Step 2: Choose an empty template:
Step 3: Edit .csproj file and modify as following code:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp2.0</TargetFramework>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
</PropertyGroup>
<ItemGroup>
<Folder Include="wwwroot\" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.0.1" />
<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.0.1" />
</ItemGroup>
</Project>
Step 4: Modify Startup.cs file as following:
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.Use(async (context, next) =>
{
await next();
if (context.Response.StatusCode == 404 &&
!Path.HasExtension(context.Request.Path.Value) &&
!context.Request.Path.Value.StartsWith("/api/"))
{
context.Request.Path = "/index.html";
await next();
}
});
app.UseMvcWithDefaultRoute();
app.UseDefaultFiles();
app.UseStaticFiles();
}
}
Step 5: Skip this step if you have already installed angular cli. Install angular cli using following command in your project location:
npm install @angular/cli --global
Step 6: Now create angular app using following command:
ng new clientApp
Step 7: Move the angular files to root of the project as following screen:
Step 8: Open ".angular-cli.json" file and change value of "outDir" property to "wwwroot".
Step 9: Open the command prompt in project location and run following command:
ng build
Note: This command will build the angular code so that you can run the application in browser. After make any change in the angular code you need to run this command to reflect the changes in browser.
Step 10: In the same command prompt run following command:
dotnet run.
Note: You can also run this application by pressing "F5" in visual studio.
Step 2: Choose an empty template:
Step 3: Edit .csproj file and modify as following code:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp2.0</TargetFramework>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
</PropertyGroup>
<ItemGroup>
<Folder Include="wwwroot\" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.3" />
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.0.1" />
<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.0.1" />
</ItemGroup>
</Project>
Step 4: Modify Startup.cs file as following:
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.Use(async (context, next) =>
{
await next();
if (context.Response.StatusCode == 404 &&
!Path.HasExtension(context.Request.Path.Value) &&
!context.Request.Path.Value.StartsWith("/api/"))
{
context.Request.Path = "/index.html";
await next();
}
});
app.UseMvcWithDefaultRoute();
app.UseDefaultFiles();
app.UseStaticFiles();
}
}
Step 5: Skip this step if you have already installed angular cli. Install angular cli using following command in your project location:
npm install @angular/cli --global
Step 6: Now create angular app using following command:
ng new clientApp
Step 7: Move the angular files to root of the project as following screen:
Step 8: Open ".angular-cli.json" file and change value of "outDir" property to "wwwroot".
Step 9: Open the command prompt in project location and run following command:
ng build
Note: This command will build the angular code so that you can run the application in browser. After make any change in the angular code you need to run this command to reflect the changes in browser.
Step 10: In the same command prompt run following command:
dotnet run.
Note: You can also run this application by pressing "F5" in visual studio.
No comments:
Post a Comment