Now, in ASP dotnet core, it is easy to integrate micro-ui's (many Angular SPA) in different views with easy configuration.
- Dot.net SDK 2.1
- Angular cli v6
npm install -g @angular\[email protected]
dotnet new mvc -o asp-net-core-angular
cd asp-net-core-angular
ng new clientApp --style=scss --routing
- Create menu component 1.
ng g component menu1 - Create menu component 2.
ng g component menu2 - Create navigation component
ng g component navAdd below code to nav.component.html.
<ul>
<li>
<h2><a routerLink="/menu1">Menu1</a></h2>
</li>
<li>
<h2><a routerLink="/menu2">Menu2</a></h2>
</li>
</ul>- Add navigation component to app.component.html as below.
<app-nav></app-nav>
<router-outlet></router-outlet>
- Add below code to app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Menu1Component } from "./menu1/menu1.component";
import { Menu2Component } from "./menu2/menu2.component";
export const routes: Routes = [
{ path: '', redirectTo: '/menu1', pathMatch: 'full' },
{ path: 'menu1', component: Menu1Component },
{ path: 'menu2', component: Menu2Component }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
"outputPath": "../wwwroot/dist/clientApp",
Bundling and minification are two distinct performance optimizations you can apply in a web app. Used together, bundling and minification improve performance by reducing the number of server requests and reducing the size of the requested static assets. More details...
Add BundlerMinifier.Core nuget package to mvc project.
dotnet add package BundlerMinifier.Core --version 2.8.391
Create bundleconfig.json file which defines the options for each bundle.
Add below code to bundleconfig.json file.
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"wwwroot/css/site.css"
"wwwroot/dist/clientApp/*.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js",
"wwwroot/dist/clientApp/*.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
]
You can create the build, publish options in .csproj file as below. Edit the project file and follow below steps.
- Create properties for angular and wwwroot paths as below.
<PropertyGroup>
<SpaRoot>clientApp\</SpaRoot>
<wwwRoot>wwwroot\</wwwRoot>
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>
- Install npm packages before building the project.
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target>
- Build angular application, bundle and minify all css, js files.
<Target Name="BuildSpaApp" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And Exists('$(SpaRoot)node_modules') ">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
<Exec Command="dotnet bundle" />
</Target>
- Add dotnet cli tool reference for BundlerMinifier...for running the command
dotnet bundle
<ItemGroup>
<DotNetCliToolReference Include="BundlerMinifier.Core" Version="2.6.362" />
</ItemGroup>
- Bundle all css, js files configured in bundleconfig.json to wwwroot folder .min files on pre-publishing.
<Target Name="PrepublishScript" BeforeTargets="PrepareForPublish">
<!-- Bundle all css, js files configured in bundleconfig.json to wwwroot folder .min files -->
<Exec Command="dotnet bundle" />
</Target>
- As part of publishing, ensure the JS resources are freshly built in production mode.
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build --prod" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="$(wwwRoot)dist\**" />
<DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
like these, you can add any npm, dotnet scripts in .csproj file for build automation.
Step 5: Add app.component selector in MVC About view under Home controller as below.
- Add the minified reference files of Angular application.
- Add the base reference of url path. So that, Angular rounting will append on these path. -- example: http:localhost:4338/Home/About/menu1 --here menu1 is the routing path from angular application which is appended to Home controller url path of About view.
- Add the base reference on building the Angular application .....
ng build --base-href /Url/
<head>
<base href="~/Home/About/" />
</head>
<app-root></app-root>
<script asp-src-include="~/js/site.min.js"></script>
<script asp-src-include="~/css/site.min.css"></script>
Note: if you want to integrate many angular applciations, then make sure to bundle respective project files with different file names. other wise, if you add app-root selector in MVC view, then conflict appears on knowing which SPA app-root need to load.
Bypass the mvc route with the Angular routes with SpaRouteExtensions class contains MapSpaFallbackRoute functionalitity helps to stay on same page on angular routes.
Add below code to startup.cs file
app.UseSpa(spa =>
{
spa.ApplicationBuilder.UseMvc(routes =>
{
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "About" }
);
});
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent