angular - 在 Asp.NET Core 之上构建 Angular 4 应用程序的最佳方式是什么？

Question

我试过这两个模板:

https://github.com/asadsahi/AspNetCoreSpa

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

但在这两种情况下都以无法正常工作的属性告终。

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

我正在寻找能够为我提供所有好处的东西，例如 AOT、DLL、TreeShaking 以及我这边的最小/零配置。

Answer 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

添加了 Angular/动画、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 工作。