javascript - 如何在 Visual Studio 2017 中使用 Web 应用程序发布独立的 Angular 组件 (njsproj)

Question

我们有一个要求，我们需要发布我们的网站以在本地进行测试(sitecore)。我们有一个特殊的组件，称为 webapp。

我们现在引入了一个新组件(njsproj 文件)，其中包含我们的 Angular 应用程序。当我发布 web 应用程序时，显然 Angular 代码未编译(npm install build 等)并复制到 web 应用程序的工件并发布。

在我的 CI CD 管道中，我已经将其映射出来并正在工作...构建步骤:使用 Nodejs、npm install Angular cli、npm install、ng build。

如何正确设置才能在本地进行发布？有任何想法吗？

Answer 1

您可以打开 njsproj 内容并添加此设置

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

该命令取自package.json

您会看到我在 package.json 中添加了另一个命令来运行测试

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run Angular8:server:dev",
    "test": "ng test", // run this command
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

不过我觉得你可以看看microsoft的这篇文章创建 Angular 应用程序