在 Asp.NET Core 之上构建 Angular 4 应用程序的最佳方法是什么？答案

【问题标题】：What is the best way to build Angular 4 app on top of Asp.NET Core?在 Asp.NET Core 之上构建 Angular 4 应用程序的最佳方法是什么？
【发布时间】：2017-10-15 20:57:57
【问题描述】：

我确实尝试了这两个模板：

https://github.com/asadsahi/AspNetCoreSpa

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

但在这两种情况下，最终都得到了一些不起作用的属性。

我只是想知道是否有可能以某种方式在 .net 核心之上运行 AngularCLI？ '我是 Angular 的新手，所以请多多包涵。

我正在寻找能够为我提供 AOT、DLL、TreeShaking 等所有甜食的东西，而且我的配置最少/零。

【问题讨论】：

标签： angular asp.net-core

【解决方案1】：

更新： 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 通用和服务器端渲染，以便能够升级到 Angular 4。

webpack.config.vendor.js

从供应商部分删除 angular2-universal 从供应商部分删除 angular2-universal-polyfills 删除 serverBundleConfig 替换：

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

添加了角度/动画、core-js、es6-promise 将 Angular 包升级到 ^4.0.0 删除了 angular2-universal、angular2-universal-patch、angular2-universal-polyfills、isomorphic-fetch 将其他包升级到当时的最新版本

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

删除了这个文件

ClientApp/boot-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/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 工作。

【讨论】：

我正在使用那个“模板”，但由于缺乏 ng4 支持而不得不离开它。我会尝试你的建议并让你知道。非常感谢。
我们处于同样的境地，直到我们意识到唯一阻碍我们升级其他所有东西的是服务器端渲染，这对我们来说不是必需的，并且增加了很多额外的复杂性在最终实施中似乎还没有完全解决。
这听起来很棒！我今天会试试。谢谢。
团队刚刚发布了一个新版本的 SpaTemplates，它应该可以为您提供所需的一切，并使用 Angular 4。我会更新答案以反映。
如果此解决方案适合您，请将其标记为答案。谢谢！

【解决方案2】：

我可以向你建议的是..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 等一些外部服务......）您的前端应用程序......因为它们只是静态文件......如果你的前端和后端混合在一起（索引页面的 Razor 与 html 等混合），你不能......

所以我强烈建议您考虑一下您的决定。

希望对你有帮助！！！

【讨论】：

嗨，我正在考虑它，但在这种情况下，我失去了 Asp.Net Core 主机给我的所有好处。例如身份验证；我们只允许经过身份验证的用户（使用 UseOpenIdConnectAuthentication 的 Azure AD）访问，因此所有请求实际上都已经过身份验证。如果我在不同的服务器上有客户端应用程序，我将不得不处理它。或者我在这里遗漏了一些东西。
是的，我不需要服务器端渲染，只需要 AOT、HMR、DLL、TreeShaking 等。
no .. 您可以受益于所有 .NET (CORE) 功能，例如 OAUTH .. 因为您需要（即使在同一个应用程序中）在前后之间发送 OAUTH 令牌请求终端服务器...和 AOT ， DLL 等可用.. Angular 使用 angular-cli 所以它可以帮助你完成所有困难的任务（如果你使用 webpack，你需要自己做）
也许你是对的，我认为这也是一种正确的方法，但它会带来一些你在同时托管双方时没有的麻烦。我需要做一些 POC 并据此做出决定。 angular-cli 现在不是用 webpack 了吗？
这绝对是要走的路。客户端和常规 web api .net core 完全独立的角度 cli

【解决方案3】：

后端的.NET Core 并不关心你在前端使用什么框架。 Angular 的 Http 模块将调用您的 .NET Core WebApi 后端端点。

在开发过程中，您通常会使用 ng serve 构建 Angular CLI TypeScript 项目，并在 Visual Studio 中构建后端。

【讨论】：

对不起，我应该更具体（现在确实更新了我的问题）。我想拥有所有可用的糖果，如 DLL、AOT、TreeShaking 等，理想情况下零配置。

【解决方案4】：

您可以使用 Microsoft 支持的 SPA 模板来构建 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 恢复所有依赖项后。您可以通过运行命令启动应用程序：

点网运行

该应用程序将侦听端口 5000，因此在您的浏览器中前往 http://localhost:5000

【讨论】：