What is the best way to build an Angular 4 application on top of Asp.NET Core?

Question

I tried these two patterns:

https://github.com/asadsahi/AspNetCoreSpa

https://github.com/MarkPieszak/aspnetcore-angular2-universal

But in both cases, something turned out to be a non-working property.

I'm just wondering if it is possible to somehow run AngularCLI on top of the .net kernel? "I'm new to Angular, so please bear with me.

I am looking for something that will give me all the sweets like AOT, DLL, TreeShaking with minimal / zero configuration on my side.

Answer 1

: - Angular 4, , SSR , . https://www.nuget.org/packages/Microsoft.AspNetCore.SpaTemplates

---

: , , . , .NET Core, Angular 4, HMR Webpack, Angular SPA, Angular 2.

.

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
dotnet new angular

( https://jonhilton.net/2017/02/21/create-a-vs2017-angular-2-and-net-core-site-using-the-command-line/)

, , Angular 2 Universal Server Side Rendering Angular 4.

webpack.config.vendor.js

angular2 -universal angular2 - BundleConfig :

new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')),

:

new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')),

webpack.config.js

serverBundleConfig

package.json

angular/animation, core-js, es6-prom Angular 4.0.0 angular2 -universal, angular2 -universal-patch, angular2 - ,

Views/Home/Index.cshtml

asp-prerender-module = "ClientApp/dist/main-server"

ClientApp/polyfills/polyfills.ts

:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

import 'zone.js';

ClientApp/ server.ts

ClientApp/ client.ts

:

import './polyfills/polyfills.ts';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const rootElemTagName = 'app'; // Update this if you change your root component selector

// Enable either Hot Module Reloading or production mode
if (module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => {
        // Before restarting the app, we create a new root element and dispose the old one
        const oldRootElem = document.querySelector(rootElemTagName);
        const newRootElem = document.createElement(rootElemTagName);
        oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
        platform.destroy();
    });
} else {
    enableProdMode();
}

// Boot the application, either now or when the DOM content is loaded
const platform = platformBrowserDynamic();

const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    bootApplication();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

ClientApp//app.module.ts

UniversalModule :

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

UniversalModule :

BrowserModule,
HttpModule,

, :

npm prune
npm install
webpack --config webpack.config.vendor.js

( https://github.com/aspnet/JavaScriptServices/issues/938)

, Angular 4, .NET, HMR Webpack.

Answer 2

: if you don't need a SERVER SIDE RENDERING (aka Angular Universal) I strongly suggest to you to completely separate the two layers (Front end Angular 4 app) Back end (Asp.NET WebAPI MVC Asp.NET CORE APP)...

:

1 - better separation of techonologies

2- you can publish the front end and back end in separate sites or separate Servers!!

3 - if you need to scale ( ) .. .. , ,

4 - if you want you can cache ( CDN.. , cloudfire ..), .. ... (Razor , html ..), ...

.

, .

Answer 3

.NET Core , . Angular Http .NET Core WebApi.

Angular CLI TypeScript ng serve Visual Studio.

Answer 4

SPA, Microsoft, angular asp.core.

:

• .Net Core SDK 1.0 RC4 ( ) Win, Mac Linux.
• Node.js(v6 )

SPA, :

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

:

dotnet new -l

, / cd. :

dotnet new angular 

:

• dotnet restore

• npm install . , :

  dotnet run

5000, http://localhost:5000