在Asp.NET Core上构建Angular 4应用程序的最佳方式是什么？
我确实尝试了这两个模板：
https://github.com/asadsahi/AspNetCoreSpa
https://github.com/MarkPieszak/aspnetcore-angular2-universal
但是在这两种情况下，最终都会出现一些不工作的属性
我只是想知道是否可以在.net内核上运行AngularCLI？ '我对Angular很陌生，请耐心等待。
我正在寻找一些能够给我所有甜食的东西，比如AOT，DLL，TreeShaking以及我身边的最小/零配置。
更新： SpaTemplates已更新为Angular 4，这意味着您应该能够将SSR与其他好处一起使用，而不必将事情排除在外。 https://www.nuget.org/packages/Microsoft.AspNetCore.SpaTemplates
原文：这听起来像你正在寻找的是一个模板，可能并不完全存在于野外。 如果您需要.NET Core，Angular 4，HMR和Webpack，您可以从当前使用Angular 2的Angular SPA模板开始。
在命令行运行以下命令。
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-universal-polyfills删除serverBundleConfig替换：
new webpack.ContextReplacementPlugin(/@angularb.*b(bundles|linker)/, path.join(__dirname, './ClientApp')),
有：
new webpack.ContextReplacementPlugin(/angular(|/)core(|/)@angular/, path.join(__dirname, './ClientApp')),
webpack.config.js
删除serverBundleConfig
的package.json
已添加角度/动画，core-js，es6-promise升级的角度包到^ 4.0.0已删除angular2-universal，angular2-universal-patch，angular2-universal-polyfills，isomorphic-fetch将当前升级的其他软件包升级到最新版本
查看/主页/ 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中拉出）
我已经验证过，这将使.NET 4核心上的Angular 4运行，并且仍然允许HMR和Webpack工作。
我可以向你建议的是.. if you don't need a SERVER SIDE RENDERING (aka Angular Universal) I strongly suggest to you to completely separate the two layers （前端Angular 4应用程序）和后端（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等）..你的前端应用程序..因为它们只是静态文件...如果你已经你的前端和后端混合在一起（索引页面与html等混合使用Razor）你不能..
所以我强烈建议你考虑一下你的决定。
希望它可以帮助你！
后端的.NET Core不关心你在前端使用的框架。 Angular的Http模块将调用您的.NET Core WebApi后端端点。
在开发过程中，您通常会使用ng serve构建Angular CLI TypeScript项目，并在Visual Studio中构建后端。
上一篇: What is the best way to build Angular 4 app on top of Asp.NET Core?