NET Core + Angular 2

asp. Net Core + Angular 2 Template for Visual Studio

2017-01-11 08:45 by Little white brother, 2069 read, 19 reviews, favorites, compilation

Over the months, I've been building support libraries and packages with a number of community contributors on github, and our ultimate goal is to create a template that starts as a starting point, based on the typescript code and ANGULAR2 hosted in the Asp. net core Project. This template contains these Aspects:

• Server preloaded (pre-rendered): This allows your UI to be displayed quickly, even before the browser downloads javascript.
• webpack Middleware Integration : During development, you don't have to recompile your client projects all the time, or you can use a watcher tool to help you do these things in the Background.
• module Hot plug: during development, once you edit a typescript file, CSS file, or other client resources, your changes will be pushed to the browser immediately without refreshing the Page.
• Rapid Build : For development, you don't have to wait for each change, webpack to re-parse the Third-party code, because the Third-party class library will be independent of the other bundle, in addition, the super-fast build contains all the map files to facilitate debugging, The re-release version of the file will output the compressed version directly, and the work will be done automatically during the release process.

What if you want to use a different framework? If you prefer React, React+redux or knockout, We also provide templates for Them.

If you are developing on Linux and macos, or using a different ide, use our yeoman generator to get the same support for Angular2, React, react+redux, or knockout projects on vs code or other Editors. NET Core is completely cross-platform.

Installation

first, Make sure that you've installed the necessary content, and that it's not going to work without them:

• Visual Studio Update3: Note Update2 is not enough, you need to Update3 because it fixes some bugs about npm, and it's a prerequisite for using typescript.
• . NET Core 1.0.1
• TypeScript 2.0 for Visual Studio: If your VS2015 has been "complaining" cannot find name ' require ', that's because you forgot to install the Plugin.
• Node. JS 4 and above : because some issue, we temporarily do not support node 0.x, using node-v to check your node Version.

After you confirm that the above content is installed, download and install the asp. net Core Template Pack Extension

Create and run the project

When you are finished installing all of the above, you can open VS2015 to create a new project, expand the Web directory, select asp. Angular2 Starter application (. NET Core)

Type a name, click ok, and now wait patiently for a while, let Node. js install all dependent projects, consider your network environment, which may take a while (and consider the domestic environment)

After everything is ready, there may seem to be some problems in the project, but in fact it is not, when VS2015 completes the installation dependency, it will show not installed

then, vs makes a mistake, in fact, because an optional dependency on MacOS is not successful, you can choose to ignore it, but if you're obsessive-compulsive, look here and follow the footsteps of the great God to get rid of it.

Now that you can run the project, press Ctrl+f5 to try it, and the following will be displayed in your browser:

Service-side pre-rendering

After browsing through this site, you'll find some simple examples of angluar2 component, which doesn't seem like a big deal, but discrimination has been a bit of a knockout thing in places you can't see.

The first thing, although usually angular2 run in the browser, but asp. net Core server can also let him run on the server side, so it can only send HTML code to the browser, do not need JavaScript to display Content.

To prove it, you can view the content by disabling the JavaScript feature of the browser and then refreshing the page, for chrome, you can open the F12 console, click settings, Find the Disable JavaScript check box in it, and uncheck it.

Refresh the page and you'll see that everything looks the same as before, the Left tab still works, but some javascript-dependent content is no longer working, such as Counter.

What is the meaning of server-side preload?

The point is not to allow browsers that do not run javascript, it's just an extreme case (why create a spa app for this extreme situation?). ）

The real meaning of it is:

1. It greatly improves the user experience : In time they are in a slower network environment or device, or you can quickly see what you want to show them, behind which you may have another big bundle of JavaScript being downloaded, converted and executed, Then immediately take over the page implementation to bind your those features, which takes a long time to load the JavaScript code, allowing the customer to see a blank page much Better.
2. it supports some crawlers that do not run JavaScript : for search engines, returning simple HTML code is easier for them to understand and Ingest.

If you do not want to use preload, you can disable it by removing the Asp-prerender-module property of the app tag in Views/home/index.cshtml.

Webpack Integration

The code in the current system is written using typescript, which means that you need to build it before you run it, just as you would with sass, code before you use it, even bundling and compressing it.

The most thriving modern JavaScript build system is Webpack, which is similar to grunt and gulp, but in 2017 today (in the original), Webpack is the most popular typescript compilation, Bundle and Compress tool, we use it in template for several very cool features:

Webpack Development Middleware

In general, once you change any of the typescript files, you need to run Webpack to regenerate the JavaScript files, but Webpack development middleware will help you do the Work.

If your project is running in vs Default development mode, Webpack will monitor every request you make to http://yoursite/dist in the background, processing every request and returning a compiled code File.

Module Hot Plug (HMR)

After any code modification, usually we need to refresh the page to apply these changes, but this is very unfriendly for efficiency and debugging Convenience.

The module hot Plug (HMR) solves this problem by monitoring any changes to the angular project file (typescript,css,html) in the default development mode, which automatically triggers a quick compile when the change Occurs. And to send all the changed files to the active browser window, your app will apply the changes immediately without refreshing the Page.

You can observe its work by turning on control, and when vs starts debugging, The browser console will display the Following:

See the words of [HMR] connected? It means that you are ready to receive the new file and try to change a source File. For Example: Clientapp/app/components/home/home.component.html.

Original Address: Http://www.dotnet.online/Article/66/ASP-NETCoreAngular2TemplateforVisualStudio

SOURCE Address: http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

NET Core + Angular 2