none
My generated js file from typescript are not used RRS feed

  • Question

  • Using Typescript and React on Visual Studio 2019, I compile correctly the say "ClientApp\Components\a.js" file when saving the corresponding "ClientApp\Components\a.tsx" file, but when I launch the Visual Studio debugger, the javascript source is taken from the folder wwwRoot/Dist/Main.js, and not from my a.js file. So it seems that the Main.js file is a concatenation of all the *.tsx files and that my a.js file is ignored.

    On the Project Properties, I check "Compile on Save" (which is what I want).

    Thursday, November 7, 2019 4:59 PM

Answers

  • Hi PhilTheGaps,

    The "file.tsx" is just my test file. Please try to change Home to your "a.js" file, which is like:

    import { Home } from './components/a.js';

    Best Regards,

    Dylan


    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

    • Marked as answer by PhilTheGaps Monday, November 18, 2019 12:38 PM
    Wednesday, November 13, 2019 8:33 AM

All replies

  • Hi PhilTheGaps,

    Thank you for posting here.

    According to your description, did you develop typescript with Angular app? In angular configuration, the main.xx file is often used as default startup file.

    To change it, you could open angular.json file, then set "main" to "a.js" within "projects" section. 

    Note: the a.js should be in the same folder with the "main.js".

    Look forward to your feedback.

    Best Regards,

    Dylan


    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


    Friday, November 8, 2019 6:08 AM
  • Hi Dylan

    Thanks for your answer.

    I think you missed my first sentence: "Using Typescript and React on Visual Studio 2019". So I work with React not Angular. I don't use tsconfig.json but the Typescript Project properties panel. 

    I use the MSBuild nuget package for TypeScript compilation, although I'm not familiar with. I also learn that I use webpack, this is why my debugger is looking for wwwroot/dist/main.js:

    Excerpt of webpack.config.js file:

    const bundleOutputDir = './wwwroot/dist';
    
    module.exports = (env) => {
        const isDevBuild = !(env && env.prod);
        return [{
            stats: { modules: false },
            entry: { 'main': './ClientApp/boot.tsx' },
            resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
            output: {
                path: path.join(__dirname, bundleOutputDir),
                filename: '[name].js',
                publicPath: 'dist/'
            },
            module: {
                rules: [
                    { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                    { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                    { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
                ]
            },
            plugins: [
                new CheckerPlugin(),
                new webpack.DllReferencePlugin({
                    context: __dirname,
                    manifest: require('./wwwroot/dist/vendor-manifest.json')
                })
            ].concat(isDevBuild ? [

    Now it seems that since the last update of Visual Studio 2019 (16.3.8) , this main.js is not more updated when I save a tsx file. Or is it because I don't use my tsconfig.json anymore (more probable !).

    So I would like to drop Webpack, and use my individual js generated file to debug. But I can't see this options in the graphical Project properties. However, I can see that in the .csproj file:

     <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>
    
      <Target Name="PublishRunWebpack" 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" />

    Can I remove these lines to get rid of webpack ? Difficult to understand the best options between Gulp, MsBuild, Webpack....




    • Edited by PhilTheGaps Friday, November 8, 2019 2:58 PM
    Friday, November 8, 2019 1:37 PM
  • Hi PhilTheGaps,

    Sorry for delay in reply.

    In Webpack.config.js file, please try to set entry: 

    entry: { './ClientApp/boot.tsx' }

    From csproj file, the "target" means these commands would run when you run msbuild.exe. If you want to disable webpack, you could comment out these targets and go to extension manager to disable it.

    Look forward to your feedback.

    Best Regards,

    Dylan


    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

    Tuesday, November 12, 2019 6:43 AM
  • Hi Dylan

    In fact I have already this line in my project file. I have deleted my dist folder, and it was rebuilt with fresh and updated js sources. But still, when I save a tsx file, I can see something is happening (a background task is started) but I cannot see any trace, and my main.js file is still not updated

    • Edited by PhilTheGaps Tuesday, November 12, 2019 2:57 PM
    Tuesday, November 12, 2019 2:49 PM
  • Hi PhilTheGaps,

    Thank you for feedback.

    Please try to go to Client\App.js, then change the Home value to your page:

    Best Regards,

    Dylan


    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

    Wednesday, November 13, 2019 6:05 AM
  • Hi Dylan

    I don't have a file.tsx but anyway I have tried to tweak my config without taking the time to understand the basis. 
    I will start with a fresh template (CardReact) and proceed step by step.

    Thanks for your help.

    • Edited by PhilTheGaps Wednesday, November 13, 2019 1:05 PM
    Wednesday, November 13, 2019 8:22 AM
  • Hi PhilTheGaps,

    The "file.tsx" is just my test file. Please try to change Home to your "a.js" file, which is like:

    import { Home } from './components/a.js';

    Best Regards,

    Dylan


    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

    • Marked as answer by PhilTheGaps Monday, November 18, 2019 12:38 PM
    Wednesday, November 13, 2019 8:33 AM