aspnetboilerplate 核心（angular 项目）

Question

为什么 abp .netcore 模板的 "angular part" 分布在 visual studio 解决方案 (AbpCore.AngularUI.sln) 中？它里面有任何.netcore代码或一些服务器端功能吗？

是另一个解决方案中的整个服务器端代码 (AbpCore.sln)，还是有更多？

Answer 1

在企业公司中，前端和后端开发团队是分开的。所以客户端和服务器端的代码结构是分开的。但是，如果您愿意，可以按照以下步骤合并解决方案。

合并解决方案

第 1 步：将文件从客户端项目复制到服务器项目

将以下屏幕截图中的文件从您的客户端解决方案复制到服务器解决方案中 *Web.Host 项目的根文件夹。

第 2 步：修改 tsconfig.json

如果src文件夹下的tsconfig.json文件中没有skipLibCheck配置，需要添加，因为当前版本的lodash typings有错误

"target": "es5",
"skipLibCheck": true,
"typeRoots": [
    "../node_modules/@types"
]

如果e2e文件夹下的tsconfig.json文件包含以下配置

"extends": "../tsconfig.json"

你需要这样修改，因为上面的配置是错误的。

"extends": "../src/tsconfig.json"

第 3 步：修改 .gitignore 文件

由于我们从另一个项目复制了 .gitignore 文件，我们需要删除包含 "PhoneBook.AngularUI" 关键字的“# VS 文件”下的行。

第四步：修改*.Web.Host.csproj

我们需要从编译的文件夹中排除 "node_modules"、"dist" 和 "external_libs" 文件夹。为此，请将以下内容添加到您的 csproj 文件的内容中：

 <ItemGroup>
    <None Include="App.config" />
    <None Update="log4net.config">
      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </None>
    <None Update="wwwroot\**\*">
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </None>
    <Compile Remove="dist\**" />
    <Compile Remove="external_libs\**" />
    <Compile Remove="node_modules\**" />
    <EmbeddedResource Remove="dist\**" />
    <EmbeddedResource Remove="external_libs\**" />
    <EmbeddedResource Remove="node_modules\**" />
    <None Remove="dist\**" />
    <None Remove="external_libs\**" />
    <None Remove="node_modules\**" />
  </ItemGroup>

完成此操作后，您的项目必须成功 uild。

第 5 步：运行宿主项目

现在，我们可以通过按 F5 按钮运行我们的宿主项目。我们假设，根据 ASP.NET Core & Angular 2+ 文档，在开始本文档之前，您已经将迁移应用到数据库和运行ned 宿主项目。

第 6 步：运行客户 (Angular 2.x) 项目

我们需要打开命令提示符并导航到“..\src\Acme.PhoneBook.Web.Host”文件夹。然后我们需要运行 "npm install" 命令来安装我们项目的依赖项。然后我们可以运行"npm start"命令来启动我们的项目。

在这一点之后，我们可以使用我们的客户端和服务器项目开发一个 Visual Studio 2017+ 解决方案。由于我们使用 angular-cli 来为我们的客户端应用程序提供服务，因此在开发过程中我们不能为我们的客户端和服务器应用程序使用相同的端口。但是，我们可以在发布应用程序时这样做。让我们看看如何。

发布配置

第 1 步：配置 .angular-cli.json

我们的客户端项目由 angular-cli 发布。为了使用 Visual Studio 发布单个网站，首先我们需要修改 angular-cli 的发布目录。为此，请在您的项目中打开 .angular-cli.json 并将 "outDir" 的值更改为 "wwwroot/dist"。我们可以使用 "wwwroot" 作为 outDir，但是 angular-cli 在它 builds 应用程序之前删除整个文件夹。因此，为了不丢失 wwwroot 文件夹下的其他文件，我们使用 wwwroot/dist.

第 2 步：发布前的 Build 客户端应用程序

在使用 Visual Studio 的 publish 发布我们的应用程序之前，我们需要使用 angular-cli 构建 uild 我们的 angular 应用程序。你的 *.Web.Host.csproj 会是这样的：

<Target Name="PrepublishScript" BeforeTargets="ComputeFilesToPublish">
    <Exec Command="ng build --prod" />
</Target>

这样，angular-cli 将在您进行每次发布之前先uild 您的客户端应用程序。

第 3 步：将客户端应用程序文件移动到 wwwroot

我们需要将 "wwwroot/dist" 下的文件和文件夹移动到 "wwwroot"。为此，请像这样更改 *.Web.Host.csproj：

 <Target Name="PrepublishScript" BeforeTargets="ComputeFilesToPublish">
    <Exec Command="ng build --prod"></Exec>
    <Exec Command="robocopy $(MSBuildProjectDirectory)\wwwroot\dist\ $(MSBuildProjectDirectory)\wwwroot\ /S /E /MOVE" IgnoreExitCode="True" />
    <ItemGroup>
      <DistFiles Include="wwwroot\**\*" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

此命令将 wwwroot\dist 文件夹的全部内容复制到 wwwroot 并在发布前删除 dist 文件夹。这样，就会有一个干净的wwwroot文件夹。

第 4 步：为 angular 2.x rotues 添加中间件

在发布我们的应用程序之前，我们还需要做一件事。由于我们在 ASP.NET 核心网站中托管 Angular 2.x 应用程序，因此我们将遇到路由问题。发布我们的应用程序后，如果我们在导航到应用程序中的某个页面（例如：/admin/users）时刷新页面，我们将看到一个空页面。因为当我们请求一个像http://yourwebsite.com/admin/users这样的url时，ASP.NETCore将无法找到匹配的Controller。为了克服这个问题，将下面的代码添加到 Startup.cs 文件 "app.UseStaticFiles();" 行之前。

app.Use(async (context, next) =>
{
    await next();

    if (context.Response.StatusCode == 404
        && !Path.HasExtension(context.Request.Path.Value))
    {
        context.Request.Path = "/index.html";
        await next();
    }
});

第 5 步：删除 HomeContoller

我们还需要从我们的项目中删除 HomeController，因此该应用的默认路由将是我们的 angular 客户端应用。我们仍然可以在 /swagger/ui/index.html.

下访问 swagger ui

现在，我们可以使用 Visaul Studio 的一次发布来发布我们的网站。发布后

我们的客户端和服务器应用程序设计为分开工作。因此，它们具有不同的配置。为了让它们协同工作，我们还需要在发布后进行一些配置。我们需要为我们的 angular2 应用程序使用在 appsettings.json 中为我们的主机应用程序配置的相同地址。首先为值 "ServerRootAddress"、"ClientRootAddress"、"CorsOrigins" 配置 appsettings.json 文件。 ServerRootAddress 和 ClientRootAddress 必须相同，因为我们将客户端和服务器托管在一起。如果您按租户使用子域，则需要将允许的地址包含到 CorsOrigins 中，否则 CorsOrigins 将与 ServerRootAddress 和 ClientRootAddress 相同。然后，将"ServerRootAddress"的值复制到appsettings.json中，并将此值用于"wwwroot\assets\"文件夹下的"appconfig.json"中的"remoteServiceBaseUrl"和"appBaseUrl"。

现在您可以在“http://yourwebsite.com/". If you want to view swagger ui, then you can use http://yourwebsite.com/swagger/ui/index.html”下查看您的网站。

请注意，appsettings.json 和 appconfig.json 是两个不同的文件。

Originally, you can check out asp.net zero merging angular client codes documentation

Answer 2

如果您只想下载一个解决方案（AngularUI 和宿主项目），请勾选 select。

请参考图片

aspnetboilerplate 核心（angular 项目）

aspnetboilerplate core (the angular project)