Visual Studio npm install wrong directory? SPA in Angular

Question

With the new Visual Studio update, I believe it broke the connection for npm.

I get this error:

npm WARN saveError ENOENT: no such file or directory, open 'C:\\DDD_OneSystem\\Presentation\\Supply Chain\\package.json'

How do I make it point to clientapp where package.json actually needs to be? Check out the .csproj - it seems like it's pointing right in there.

On restore packages

PATH=C:\Program Files\nodejs;.\node_modules\.bin;C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\MSBuild\Microsoft\VisualStudio\NodeJs\win-x64;C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\MSBuild\Microsoft\VisualStudio\NodeJs;C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Web\External;%PATH%;C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\cmd;C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\mingw32\bin
"C:\Program Files\nodejs\npm.CMD" install

npm WARN saveError ENOENT: no such file or directory, open 'C:\\DDD_OneSystem\\Presentation\\Supply Chain\\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\\DDD_OneSystem\\Presentation\\Supply Chain\\package.json'
npm WARN Supply Chain No description
npm WARN Supply Chain No repository field.
npm WARN Supply Chain No README data
npm WARN Supply Chain No license field.
up to date in 0.254s
found 0 vulnerabilities

.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.2</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>3.1</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>

    <!-- Set this to true if you enable server-side prerendering -->
    <BuildServerSideRenderer>false</BuildServerSideRenderer>
    <RootNamespace>Supply_Chain</RootNamespace>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="AutoMapper" Version="8.0.0" />
    <PackageReference Include="IdentityServer4.AccessTokenValidation" Version="2.7.0" />
    <PackageReference Include="MediatR.Extensions.Microsoft.DependencyInjection" Version="6.0.1" />
    <PackageReference Include="Microsoft.AspNetCore.App" />
    <PackageReference Include="Swashbuckle.AspNetCore" Version="4.0.1" />
    <PackageReference Include="Swashbuckle.AspNetCore.Swagger" Version="4.0.1" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

  <ItemGroup>
    <None Remove="ClientApp\package.json" />
    <None Remove="ClientApp\src\app\components\product\product-supplier-search.component.ts" />
    <None Remove="ClientApp\src\app\components\supplier\supplier-shipments.datatable.component.ts" />
    <None Remove="ClientApp\src\app\global.d.ts" />
    <None Remove="ClientApp\src\app\pages\product\product-search.page.ts" />
    <None Remove="ClientApp\src\app\pages\supplier\supplier-shipments.page.ts" />
    <None Remove="ClientApp\src\app\services\shared\datatable-service.ts" />
  </ItemGroup>

  <ItemGroup>
    <Content Include="ClientApp\package.json" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\..\OneSystem.Infrastructure\OneSystem.Infrastructure.csproj" />
    <ProjectReference Include="..\..\OneSystem.Persistance\OneSystem.Persistance.csproj" />
  </ItemGroup>

  <ItemGroup>
    <TypeScriptCompile Include="ClientApp\src\app\components\product\product-supplier-search.component.ts" />
    <TypeScriptCompile Include="ClientApp\src\app\components\supplier\supplier-shipments.datatable.component.ts" />
    <TypeScriptCompile Include="ClientApp\src\app\pages\product\product-search.page.ts" />
    <TypeScriptCompile Include="ClientApp\src\app\pages\supplier\supplier-shipments.page.ts" />
    <TypeScriptCompile Include="ClientApp\src\app\services\shared\datatable-service.ts" />
  </ItemGroup>

  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- 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." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <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>

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptModuleKind />
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
  </PropertyGroup>

</Project>

Answer 1

seems like it's ok in debug you cannot use restore packages. As the new angular uses angularcli which handles everything not visual studio.

Remember, it's angularcli not visual studio don't get confused like I did!