Question

我确实试过这两个模板：

https://github.com/asadsahi/AspNetCoreSpa

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

但在这两种情况下最终都会出现不起作用的东西。

我只是想知道是否有可能以某种方式在.net核心上运行AngularCLI？＆＃39;我是Angular的新手，请耐心等待。

我正在寻找一些可以给我带来AOT，DLL，TreeShaking等甜食的东西，并且配置最小/零配置。

Answer 1

我可以向你推荐的是...... 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 app）和后端（Asp.NET WebAPI或MVC Asp.NET核心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等等。）您的前端应用..因为他们＆＃39 ;只返回静态文件...如果您的前端和后端混合（索引页的Razor与html混合等等），您就可以......

所以我非常鼓励你考虑你的决定。

希望它可以帮助你!!!

Answer 2

更新：SpaTemplates已更新为Angular 4，这意味着您应该能够获得SSR以及其他好处，而无需剥离。 https://www.nuget.org/packages/Microsoft.AspNetCore.SpaTemplates

ORIGINAL：听起来你正在寻找的是一个可能无法完全存在的模板。如果您需要.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(/\@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 升级的角度包到^ 4.0.0 删除angular2-universal，angular2-universal-patch，angular2-universal-polyfills，同构取当时将其他软件包升级到最新版本

<强>查看/主页/ 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 3

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

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

Answer 4

您可以使用Microsoft支持的SPA模板来构建angular和asp.core应用程序。

<强>先决条件：

。用于Win，Mac或Linux的.Net Core SDK 1.0 RC4（或更高版本）
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

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

4 个答案: