none
VS2017 TypeScript debug not working for WebPack project

    Question

  • Good evening,

    I have a VS2017 project that was built as a .net core 1.1 Web project with membership authentication. At the same time I built use the dotnet cli to generate an Aurelia spa template project. I merged the Aurelia spa project into the .net core project and in general everything is working fine. Unfortunately, I ended up with a problem in a .ts file and I was unable to use the VS2017 debugger. I tried it but I always get "The breakpoint will not currently be hit. No symbols have been loaded for this document."

    I went back to the base Aurelia project that I merged into the .net core project and tried debugging and it works. I have compared the .csproj files, tsconfig.json, boot.ts, webpack.config.js and webpack.vendor.config.js. Any differences seem to be related to my project and not typescript. 

    One thing I have noticed is that in the project that doesn't work, every .ts file has a linked .js and that is linked to a .js.map file. The Aurelia spa template project .ts files don't have those linked files.

    I know that I could merge the changes in my .net core project back into the Aurelia project and test at each change but that will take at least a day. Hopefully someone can point me to a missing setting or something.

    Any help with this is greatly appreciated.

    Monday, April 24, 2017 1:42 AM

Answers

  • Thank you for your suggestion Fletch.

    I think I found the problem. I put in two changes so I am not sure if which change fixed the problem but here is what I did:

    First, based on something I read (can't remember where), I added the following highlighted lines and RunWebPack target to my .csproj file:

      <PropertyGroup>
        <TargetFramework>netcoreapp1.1</TargetFramework>
        <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
        <IsPackable>false</IsPackable>
      </PropertyGroup>

      <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
        <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
        <Exec Command="npm install" />
        <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
        <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />

        <!-- Include the newly-built files in the publish output -->
        <ItemGroup>
          <DistFiles Include="wwwroot\dist\**" />
          <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
            <RelativePath>%(DistFiles.Identity)</RelativePath>
            <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
          </ResolvedFileToPublish>
        </ItemGroup>
      </Target>

    After this change debug still didn't work.

    Second, I noticed that if I set a break point in a generated .js file I would get an error "unexpected symbol error while processing ...app.js.map" I searched for information on why WebPack would generate an invalid map and found a tutorial for .net core projects that mentioned setting up a simple file and then running webpack from a command line.

    When I ran webpack, I saw a warning saying that I had duplicate file names based on case and that that could be risky on a case-insensitive operating system. The file it pointed to was one that I had named "jobline.ts" and later renamed to "JobLine.ts" the associated .js file kept the name jobline.js. I renamed the file "xJobLine.ts" and back to "JobLine.ts". That fixed the .js file name. Running webpack that warning was gone.

    I rebuilt the project and ran it and now I can debug typescript files! Hopefully this helps someone else.

    --David Morris

    • Marked as answer by ELMT1 Tuesday, April 25, 2017 8:58 PM
    Tuesday, April 25, 2017 8:57 PM

All replies

  • Hi friend, 

    Thanks for your posting. 

    >>The breakpoint will not currently be hit. No symbols have been loaded for this document.

    Open the Modules window during debugging, and check that whether it has more detailed information about which symbols met this issue.

    Please also enable the Microsoft Symbol Servers under ToooS->Options->Debugging, debug it again.

    Best regards, 

    Fletch


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    • Edited by Fletch ZhouMicrosoft contingent staff Tuesday, April 25, 2017 7:47 AM
    • Marked as answer by ELMT1 Tuesday, April 25, 2017 8:47 PM
    • Unmarked as answer by ELMT1 Tuesday, April 25, 2017 8:47 PM
    • Marked as answer by ELMT1 Tuesday, April 25, 2017 8:48 PM
    • Unmarked as answer by ELMT1 Tuesday, April 25, 2017 8:48 PM
    Tuesday, April 25, 2017 7:46 AM
  • Thank you for your suggestion Fletch.

    I think I found the problem. I put in two changes so I am not sure if which change fixed the problem but here is what I did:

    First, based on something I read (can't remember where), I added the following highlighted lines and RunWebPack target to my .csproj file:

      <PropertyGroup>
        <TargetFramework>netcoreapp1.1</TargetFramework>
        <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
        <IsPackable>false</IsPackable>
      </PropertyGroup>

      <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
        <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
        <Exec Command="npm install" />
        <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
        <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />

        <!-- Include the newly-built files in the publish output -->
        <ItemGroup>
          <DistFiles Include="wwwroot\dist\**" />
          <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
            <RelativePath>%(DistFiles.Identity)</RelativePath>
            <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
          </ResolvedFileToPublish>
        </ItemGroup>
      </Target>

    After this change debug still didn't work.

    Second, I noticed that if I set a break point in a generated .js file I would get an error "unexpected symbol error while processing ...app.js.map" I searched for information on why WebPack would generate an invalid map and found a tutorial for .net core projects that mentioned setting up a simple file and then running webpack from a command line.

    When I ran webpack, I saw a warning saying that I had duplicate file names based on case and that that could be risky on a case-insensitive operating system. The file it pointed to was one that I had named "jobline.ts" and later renamed to "JobLine.ts" the associated .js file kept the name jobline.js. I renamed the file "xJobLine.ts" and back to "JobLine.ts". That fixed the .js file name. Running webpack that warning was gone.

    I rebuilt the project and ran it and now I can debug typescript files! Hopefully this helps someone else.

    --David Morris

    • Marked as answer by ELMT1 Tuesday, April 25, 2017 8:58 PM
    Tuesday, April 25, 2017 8:57 PM