BEACHSIDE BLOG

MicrosoftとかC#を好むレンジャーの個人的メモ

ASP.NET Core の SPA の Template が動かない(dist のフォルダーが作られない)

事象の再現方法は、

  • ASP.NET Core の SPA の Tempates から Angular のプロジェクトを作成(ここでは正常に動きます)
  • GitHubVSTSにPushする。
  • (別の人が)リモートからクローンしたソースをデバッグでエラーが出て動かない

というものです。

ちなみに.NET Core 1.1で作った際の事象です。Preview 版で出てる2系ではGitHubのコードを見る限り修正済みになってました♪

一応 SPA の Templates を使ったプロジェクトについてはこちらに… beachside.hatenablog.com

エラーの内容は…

Exception: Call to Node module failed with error: Error: Cannot find module ‘./wwwroot/dist/vendor-manifest.json

エラーに書いてるままの事象ですが、原因はプロジェクトの

  • wwwroot > distディレクトリがない(作られない)
  • で、ついでに ClientApp > distディレクトリもない(作られない)

ということで、webpack が動いてないだけです。 ので、解決策は、webpack を手で動かせば解決しますが….そりゃざっくりすぎるだろということでちょっと調べてみました。

解決方法

デバッグ時に、正しく動作するよう csproj ファイルを更新します。

プロジェクトを作成後、リモートにプッシュする前に csproj ファイルを修正しましょう。 プロジェクトを右クリックして、「**.csproj ファイルを編集する」をクリックして、csproj ファイルを開きます。そして、

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">

と記載がある手前で以下を書いてあげましょう。やってることは Debug で指定のフォルダがなければ webpack を動かすという見たまんまです。

  <Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') ">
    <!--Ensure Node.js is installed-->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />

    <!--In development, the dist files won't exist on the first run or when cloning to
    a different machine, so rebuild them if not already present.-->
    <Message Importance="high" Text="Performing first-run Webpack build..." />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" />
    <Exec Command="node node_modules/webpack/bin/webpack.js" />
  </Target>

ASP.NET Core 2.0 系の Template では修正されていますが、大した内容でないこともあってか、このブログ書いている時点では1系は放置気味という感じでしょうかね…

参考

github.com

ちょっと脱線しますが、dotnet new 作成可能なテンプレートはここでみることだできますね♪

github.com