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

Question

I did try these two templates:

https://github.com/asadsahi/AspNetCoreSpa

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

But in both cases ended up with something not working property.

I just wonder if it is possible to somehow run AngularCLI on top of .net core? 'Im new to Angular, so bear with me please.

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

Answer 1

UPDATE: The SpaTemplates have been updated to Angular 4 which means that you should be able to get SSR along with other benefits without having to strip things out. https://www.nuget.org/packages/Microsoft.AspNetCore.SpaTemplates

---

ORIGINAL: It sounds like what you're looking for is a template that may not fully exist out in the wild. If you want .NET Core, Angular 4, HMR, and Webpack, you can start with the Angular SPA Templates that are currently using Angular 2.

Run the following at the command line.

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

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

Then you can modify the project using the follow changes to remove Angular 2 Universal and Server Side Rendering in order to be able to upgrade to Angular 4.

webpack.config.vendor.js

Remove angular2-universal from vendor section Remove angular2-universal-polyfills from vendor section Remove serverBundleConfig Replace:

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

with:

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

webpack.config.js

Remove serverBundleConfig

package.json

Added angular/animation, core-js, es6-promise Upgraded angular packages to ^4.0.0 Removed angular2-universal, angular2-universal-patch, angular2-universal-polyfills, isomorphic-fetch Upgraded other packages to the latest versions at the time

Views/Home/Index.cshtml

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

ClientApp/polyfills/polyfills.ts

Added this file with the following:

/** 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/boot-server.ts

Deleted this file

ClientApp/boot-client.ts

Changed the file to the following:

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/app.module.ts

Replaced UniversalModule in the import at the top with:

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

Replaced UniversalModule in the imports area with:

BrowserModule,
HttpModule,

When this is all done, I run the following commands:

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

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

I've verified that this will get Angular 4 running on .NET core and still allow for HMR and Webpack to work.

Answer 2

What i can suggest to you is.. 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) and Back end (Asp.NET WebAPI or MVC Asp.NET CORE APP) ...

there are several reason to do so:

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 (up or horizontal) the back end .. you don't have to do also for front end .. instead if you have both in the same app you can't be so granular

4 - if you want you can cache (with your server or with CDN .. or with some external services like cloudfire and so on..) your front end app .. cause they're only static files... if you've your front end and back end mixed (Razor for index page mixed with html and so on) you can't..

SO i strongly encourage you to think about your decision.

Hope it helps you!!!