Transition from ASP.NET to Angular2 with features (personal experience)

Expanded Theme: Splitting ASP.NET into Front-End (Angular) and Back-End (WebApi)

Features: corporate development (hence the main browser - IE, web server - IIS, environment - Windows); this is a partial refactoring, but rather a redesign of the web part (there is a legacy code, orientation to the existing UX);

Causes and goals: The goal is to redesign the architecture of the web component (in the current version of ASP.NET Forms + WCF), because of the impossibility / complexity of solving the problems and new requirements (complete update of the pages after the postback, resubmitting the form, complex navigation and related problems with data in forms).

Everything described is based on personal experience (or, accordingly, its absence - just a month ago I knew nothing about the Node.js and Angular except the name). If you are interested in a brief description of the article, let's begin.

In the midst of a search for a new architecture (at that time I tried to use ASP.NET MVC) I came across a video from channel9 “ Building web apps powered by Angular 2.x using Visual Studio 2017 ” and its text variation . After reading parallel to the official website of Angular, I penetrated and began to try to discover the following advantages:
')

Modern (in some places even too much) and popular technology;
Suitable for VisualStudio (due to Typescript) Front-End framework;
Modular architecture;
Without much difficulty, the written test program solved the main problems (including which I could not solve with MVC).

Naturally found and cons:

Little is aimed at IE: errors in the browser are treated with polyfills / shim, but during debugging in the Visual Studio console, there are constant javascript exceptions (which seem to have no effect on the work, but who knows how this will manifest when the program becomes more complex);
Difficulties in communicating with the legacy part (WCF service): Core and the .NET Framework are not fully compatible (in Core 2.0 they promise to improve this situation);
Additional complexity / features of deployment in IIS;
The finished complex configuration: it is not clear what, how and why it works, it is difficult to modify;
(It follows from the previous paragraph) binding to the version and the existing configuration.

So I began to read, understand, and came across a simple WebApi + Angular 2 project template based on the official Visual Studio 2015 QuickStart tutorial. Having repulsed from this template, I began to modify the project for myself (you can read the entire code from the link to GitHub below):

Removed extra npm packages - everything related to testing (karma, protractor etc.) and is not necessary for a minimum start;

Updated to Angular 4.x.

package.json

Final option

{ "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation for visual studio 2017 & WebApi", "scripts": { "build:prod": "webpack --config config/webpack.prod.js --colors --progress", "build": "webpack --colors", "build:vendor": "webpack --config config/webpack.vendor.ts --colors", "typings": "typings install" }, "keywords": [], "author": "", "license": "MIT", "dependencies": { "@angular/common": "^4.1.3", "@angular/compiler": "^4.1.3", "@angular/core": "^4.1.3", "@angular/forms": "^4.1.3", "@angular/http": "^4.1.3", "@angular/platform-browser": "^4.1.3", "@angular/platform-browser-dynamic": "^4.1.3", "@angular/router": "^4.1.3", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "jquery": "1.12.4", "moment": "^2.18.1", "rxjs": "^5.4.0", "zone.js": "^0.8.12" }, "devDependencies": { "@types/node": "^6.0.46", "@types/core-js": "^0.9.41", "angular2-template-loader": "^0.6.2", "awesome-typescript-loader": "^3.1.3", "css-loader": "^0.28.4", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "html-loader": "^0.4.5", "raw-loader": "^0.5.1", "script-loader": "^0.7.0", "style-loader": "^0.18.1", "typescript": "~2.3.4", "webpack": "^2.6.1", "webpack-merge": "^4.1.0" } }

Replaced systemjs with a webpack with the division of the entire code into three packages (vendor, polyfills, app) - so far without automatic (re-) assembly and “accelerators” (full assembly takes 15 seconds on an average laptop)

webpack.config.js

Common:

 module.exports = { entry: { 'polyfills': './app/polyfills.ts', 'vendor': './app/vendor.ts', 'app': './app/main.ts' }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.ts$/, use: [ { loader: 'awesome-typescript-loader', options: { configFileName: helpers.root('', 'tsconfig.json') } }, { loader: 'angular2-template-loader' } ] }, { test: /\.html$/, use: [{ loader: 'html-loader', options: { minimize: false, removeComments: false, collapseWhitespace: false } }] }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file-loader?name=dist/assets/[name].[hash].[ext]' }, { test: /\.css$/, exclude: helpers.root('app'), loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' }) }, { test: /\.css$/, include: helpers.root('app'), loader: 'raw-loader' } ] }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) // Workaround for angular/angular#11580 for angular v4 new webpack.ContextReplacementPlugin( /angular(\\|\/)core(\\|\/)@angular/, helpers.root('./app'), // location of your src {} // a map of your routes ), new webpack.optimize.CommonsChunkPlugin({ //order is important: //The CommonsChunkPlugin identifies the hierarchy among three chunks: app -> vendor -> polyfills. //Where Webpack finds that app has shared dependencies with vendor, it removes them from app. //It would remove polyfills from vendor if they shared dependencies, which they don't. name: ['app', 'vendor', 'polyfills'] }), ] };

Dev:

 module.exports = webpackMerge(commonConfig, { devtool: 'source-map', output: { path: helpers.root('dist'), publicPath: '/', filename: '[name].js', chunkFilename: '[id].chunk.js' }, plugins: [ new ExtractTextPlugin('[name].css') ] });

I tried to deal with IE and the mentioned exceptions in VS: I found out that the webpack does something with shim / polyfill scripts and if you use the link to the original version, the exceptions disappear

index.html

 <!DOCTYPE html> <html> <head> <title>Angular.io QuickStart</title> <base href=/ > <meta charset=UTF-8> <meta name=viewport content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="./dist/vendor.css" /> </head> <body> <my-app>Loading App</my-app> <script src="node_modules/core-js/client/shim.min.js"></script> <!--<script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/core-js/client/shim.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script>--> <script type="text/javascript" src="./dist/polyfills.js"></script> <script type="text/javascript" src="./dist/vendor.js"></script> <script type="text/javascript" src="./dist/app.js"></script></body> </html>

Added bootstrap and jQuery;
Complicated the structure of the program, trying to follow the official style guide:
- Core module for services and single components (for example header.component);
- shared module for common components;
- a couple of feature modules representing separate independent areas of the site.
screenshot

Added WebApi controller and Angular service for communication with api

api.service.ts

 @Injectable() export class ApiService { private apiUrl: string; constructor(private http: Http) { this.apiUrl = "/api"; } private setHeaders(): Headers { const headersConfig = { 'Content-Type': 'application/json', 'Accept': 'application/json' }; return new Headers(headersConfig); } private formatErrors(error: any) { return Observable.throw(error.json()); } get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> { return this.http.get(`${this.apiUrl}${path}`, { headers: this.setHeaders(), search: params }) .catch(this.formatErrors) .map((res: Response) => res.json()); } //put(path: string, body: Object = {}): Observable<any> { // return this.http.put(...); //} //post(path: string, body: Object = {}): Observable<any> { // return this.http.post(...); //} //delete(path): Observable<any> { // return this.http.delete(...)); //} }

Usage example:

 export class HomeSiteComponent { title = "I'm home-site component with WebApi data fetching"; public ctrlData: DummyData[]; constructor(apiService: ApiService) { apiService.get('/Dummier/Get').subscribe(result => { this.ctrlData = <DummyData[]>result; }); } } interface DummyData { clientData: string; serverData: string; }

I tried to deploy everything in a full-fledged IIS - everything works. Returned the project to IIS Express;

Configured routing by adding URL Rewrite Rules to Web.config. Now the server accepts and processes api requests and redirects all other new requests to Angular. Angular itself is responsible for client-side navigation (including responsible for the “404 page”).

Routing

 const routes: Routes = [ { path: 'welcome', component: WelcomeComponent }, //Component w/o Menu item { path: 'home', loadChildren: () => HomeSiteModule }, //Feature Modul with own Routing { path: 'area1', loadChildren: () => Area1SiteModule }, //Feature Modul with own Routing { path: '', redirectTo: 'home', pathMatch: 'full' }, //Empty Route { path: '**', component: PageNotFoundComponent } //"404" Route ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule { }

Web.Config:

 <system.webServer> ... <rewrite> <rules> <rule name="WebApi Routes" stopProcessing="true"> <match url="^api/" /> <action type="None" /> </rule> <rule name="Angular Routes" 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="/" /> </rule> </rules> </rewrite> </system.webServer>

Still to do:

Automate webpack assembly;
Divide the assembly into two parts so as not to rebuild the vendor package each time;
Add Windows authentication;
Redirect WebApi to an existing WCF service.

The final draft can be found on GitHub (at the time of writing, commit 74e54cf ).
I am pleased to answer questions and discuss on the subject “why this is so, and not that kind of business.”

Source: https://habr.com/ru/post/330860/

All Articles

Transition from ASP.NET to Angular2 with features (personal experience)

More articles: