如何在 Visual Studio 2017 中使用 Web 應用程序發布獨立的 Angular 組件 (njsproj)

Question

我們有一個要求，我們需要發布我們的網站以在本地（sitecore）對其進行測試。 我們有一個名為 webapp 的特殊組件。

我們現在引入了一個包含我們的 angular 應用程序的新組件（njsproj 文件）。 當我發布 webapp 時，顯然沒有編譯角度代碼（npm install build 等）並復制到 webapp 的工件並發布。

在我的 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"
  }

但我認為你可以看看微軟的這篇文章來創建角度應用程序