Azure Web App doesn't build typescript files in ASP.NET Core project

[Razenpok]

Original question: http://stackoverflow.com/questions/39725656/azure-web-app-doesnt-build-typescript-files

Repo I used: https://github.com/Dia6lo/LongStoryShort
Web app to which I deployed: http://longstoryshort.azurewebsites.net/

[davidebbo]

Kudu itself doesn't know anything about TypeScript files. Instead, it relies on msbuild to do the right this.

Here, you can look at the deployment script that gets generated for your App. You can download it from Kudu Console, in the Tools menu. The key part looks like this (trimmed a bit to focus on essential):

:: 1. Restore nuget packages
nuget.exe restore "%DEPLOYMENT_SOURCE%\LongStoryShort.sln" -packagesavemode nuspec

:: 2. Build
msbuild "%DEPLOYMENT_SOURCE%\LongStoryShort.sln" /nologo /verbosity:m /p:AutoParameterizationWebConfigConnectionStrings=false;Configuration=Release;UseSharedCompilation=false %SCM_BUILD_ARGS%

:: 3. Publish
msbuild "%DEPLOYMENT_SOURCE%\LongStoryShort\LongStoryShort.xproj" /nologo /verbosity:m /t:GatherAllFilesToPublish /p:AutoParameterizationWebConfigConnectionStrings=false;Configuration=Release;UseSharedCompilation=false;PublishOutputPathNoTrailingSlash="%DEPLOYMENT_TEMP%" %SCM_BUILD_ARGS%

If you were to run the same steps on your own machine, presumably the same thing would happen and typescript files would not get built either.

So the question becomes: is there an issue with your xproj file that causes this? What happens if you go to VS and do a local Publish to File System? If you get the same files as with Kudu, then we will have confirmed that the issue is not directly related to Kudu.

[Razenpok]

When I Publish this project to File System I still get my Typescript files compiled in single JS file (wwwroot/app/app.js), even if I remove "compileOnSave: true" option from tsconfig.json.
Also, I couldn't find any Typescript options in xproj itself (not like in csproj), but I use tsconfig.json instead.

[davidebbo]

I guess the key is to figure out what you'd have to run from the command line on your local machine to turn your source repo into a read-to-run artifact folder.

@vijayrkn: do you know why Typescript files don't get processed with the build/publish sequence above? And why does it work when doing a Publish to File System?

[vijayrkn]

File System publish also triggers the same target as mentioned in step (3) above. So, it should ideally be the same behavior in both cases. While running the file system publish, VS should print the "dotnet publish" command executed. Can you compare the "dotnet publish" command in the case of file system publish and below to see if there are any differences?

msbuild "%DEPLOYMENT_SOURCE%\LongStoryShort\LongStoryShort.xproj" /nologo /verbosity:m /t:GatherAllFilesToPublish /p:AutoParameterizationWebConfigConnectionStrings=false;Configuration=Release;UseSharedCompilation=false;PublishOutputPathNoTrailingSlash="%DEPLOYMENT_TEMP%" %SCM_BUILD_ARGS%

[Razenpok]

I've tried to run "dotnet build" and it indeed hasn't compiled Typescript files. I guess, there is something with Visual Studio that it compiled TS files before "dotnet build" or before "dotnet publish", though I can't tell this by looking to a log (see below). Any ideas on what has triggered compilation or what can I do to trigger it on Azure?

VS Build log (there is something with encoding, but I guess that there is just text "Copying file ..." because compiled TS file is already there):
https://gist.github.com/Dia6lo/e3b3b2163624062a450491c421967978

[vijayrkn]

This is the typescript target used for compiling.
<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets')"/>

It seems like for some reason, this is not getting imported while trying to build from commandline (2nd step above) but it is imported from VS. Looking at the repro project so see what is going wrong.

[vijayrkn]

I tried running build step 2 & 3 from above from commandline and it is working

msbuild "LongStoryShort.sln" /nologo /verbosity:m /p:AutoParameterizationWebConfigConnectionStrings=false;Configuration=Release;UseSharedCompilation=false 

msbuild "LongStoryShort\LongStoryShort.xproj" /nologo /verbosity:m /t:GatherAllFilesToPublish /p:AutoParameterizationWebConfigConnectionStrings=false;Configuration=Release;UseSharedCompilation=false;PublishOutputPathNoTrailingSlash="c:\Temp\PublishOutputResult"

This means the agent machine running the build and publish are somehow missing all the required typescript components.
@davidebbo Is there a way to verify this?

[davidebbo]

I do see Microsoft.TypeScript.targets under D:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript. What else could it be missing? Is that the right VS version?

If you go to the Kudu Console for any Web App, you can look around at what's installed.

[vijayrkn]

The VS version is right. Let me verify what typescript component is missing.

[vijayrkn]

Compile typescript target is getting skipped.

Target "PreComputeCompileTypeScript" in file "D:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets" from project "D:\home\test\LongStoryShort\LongStoryShort.xproj" (target "CompileTypeScript" depends on it):
Using "VsTsc" task from assembly "D:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\TypeScript.tasks.dll".
Task "VsTsc"
  D:\Program Files (x86)\Microsoft SDKs\TypeScript\1.5\tsc.exe  --noEmitOnError COMPUTE_PATHS_ONLY
Done executing task "VsTsc".
Task "AssignTargetPath"
Done executing task "AssignTargetPath".
Done building target "PreComputeCompileTypeScript" in project "LongStoryShort.xproj".
Target "CompileTypeScript" in file "D:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets" from project "D:\home\test\LongStoryShort\LongStoryShort.xproj" (target "Compile" depends on it):
Skipping target "CompileTypeScript" because it has no outputs.
Though the target has declared its outputs, the output specification only references empty properties and/or empty item lists.
Done building target "CompileTypeScript" in project "LongStoryShort.xproj".

On the machine where I verified it working had typescript 2.0 while Kudu has 1.5

Log where it works

Task "VsTsc"
  C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.0\tsc.exe --project "c:\Temp\LongStoryShort\LongStoryShort\tsconfig.json" --listEmittedFiles
Done executing task "VsTsc".
Done building target "PreComputeCompileTypeScriptWithTSConfig" in project "LongStoryShort.xproj".
Target "CompileTypeScriptWithTSConfig" in file "C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets" from project "c:\Temp\LongStoryShort\LongStoryShort\LongStoryShort.xproj" (target "Compile" depends on it):
Task "VsTsc"
  C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.0\tsc.exe --project "c:\Temp\LongStoryShort\LongStoryShort\tsconfig.json" --listEmittedFiles
Done executing task "VsTsc".

[davidebbo]

Got it, so we're missing TypeScript 2.0. We'll work to get it up there. Thanks Vijay!

As an aside, it would be nicer if that caused a build failure instead of quietly doing nothing :)

[vijayrkn]

The webproject system just imports the typesscript targets and typesscript targets take care of compiling it. I agree it would be nice to get some errors in scenarios like these. May be we should create a bug for typescript - https://github.com/Microsoft/TypeScript

I don't know typescript much to know if the app is using ts features available only in 1.5+ or it is something else.

[davidebbo]

So look at sample project https://github.com/Dia6lo/LongStoryShort, what/where are the files that are missing when deploying on Azure? This will help us verify that it works correctly after we put in a fix.

[Razenpok]

@vijayrkn I can share details about my app. At least that it uses TS 2.0 features

[davidebbo]

Sure, any test repo such that it fails without the fix and works with the fix would be perfect to help validate.

[vijayrkn]

Once it is fixed, there should be this file present - wwwroot/app/app.js.
Without the fix, there will be multiple ts files in - wwwroot/app/ (e.g: BlackRect.ts, Campfire.ts etc.)

[davidebbo]

@ahmelsayed is going to look at this one.

[davidebbo]

Possibly related issue: http://stackoverflow.com/questions/39790290/git-based-asp-net-web-app-fails-to-deploy-to-azure-with-typescript-compile-error

But I'm still rather confused. When I deploy using Kudu, I don't even get a wwwroot/app folder at all, with or without the fix.

[davidebbo]

Looks like there are more things we're missing. We'll investigate.

[Razenpok]

I've come up with more simple repro: https://github.com/Dia6lo/TSTest
And I've deployed it here: https://gh-tstest.azurewebsites.net
In this repo I haven't used any TS 1.5+ features (actually it's just a class with method).

[ahmelsayed]

Thanks @Dia6lo I'm taking a look at this now!

[ahmelsayed]

There is a TypeScript compiler bug on Windows Server 2012, which is what we use. I opened microsoft/TypeScript#11339

[tbertenshaw]

I have the same issue, gitlab based deployment, I have the correct tools version in the csproj.
<TypeScriptToolsVersion>2.0</TypeScriptToolsVersion>

When i see the errors (which i don't get on my local machine)

CompileTypeScript:
  D:\Program Files (x86)\Microsoft SDKs\TypeScript\1.6\tsc.exe  --sourcemap --target ES5 --noEmitOnError "REMOVED MY TYPESCRIPTFILES" "D:\home\site\repository\mymvcproject\app\src\_all.d.ts"
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,32): error TS1110: Build: Type expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,50): error TS1005: Build: ']' expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,58): error TS1005: Build: ',' expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1824,59): error TS1136: Build: Property assignment expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
D:\home\site\repository\mymvcproject\typings\globals\angular\index.d.ts(1941,1): error TS1128: Build: Declaration or statement expected. [D:\home\site\repository\mymvcproject\mymvcproject.csproj]
Done Building Project "D:\home\site\repository\mymvcproject\mymvcproject.csproj" (Build;pipelinePreDeployCopyAllFilesToOneFolder target(s)) -- FAILED.

Seems that its the typescript compiler version? navigated toD:\Program Files (x86)\Microsoft SDKs\TypeScript\ on the Deployment slot (console) and i can see 1.6 is the newest version.

Is there a workaround to manually get typescript v2 installed? or a way to skip the typescript compile, and then run a npm based typescript compile (prior to typescript being installed in slots automatically?)

Hope that makes sense?

[ahmelsayed]

We're waiting on the typescript team to give us a build of the compiler that works on Windows Server. microsoft/TypeScript#11339 was closed and is marked for 2.0.6. At the moment even if you get the v2 compiler on the machine it just won't work.

[tbertenshaw]

is there some workaround then to tell the csproj not to compile the typescript, and do it via the npm compiler, that should work as it seems to work on my development windows2012 server.

[ahmelsayed]

You can try this, then download your deployment script by going to https://<yourAppName>.scm.azurewesites.net/api/deploymentscript.

Then after the msbuild step, you can add.

npm i -g typescript
tsc

The way the custom build script works is by calling msbuild and setting the output to a temp folder, then copying the result from that temp folder to your app root %HOME%\site\wwwroot so you may wanna copy tsc build artifacts there your self

[tbertenshaw]

thanks for that suggestion, but it would require me to somehow have two copies of my csproj as i want it to precompile Typescript when developing, just wanted it to skip it when its deploying in an azure slot (until the fixed version of typescript is available). Think ill use webpublishing until the typescript issue is resolved.

[tbertenshaw]

Cool, appreciate this is just released, but :

• there now an expected eta for Slots to have this updated version of typescript installed?
• is there a plan for targeting different versions of installed typescript, or will it always be newest installed version is the target-ed one?
• will we need to do anything different to existing slots to get the new version of typescript installed, verses new slots.

[VishalGulati]

I deployed my angular2 app on Azure today. Even though my deployment was clean but still dont see any js files getting generated. All I have is .ts files. I am getting error "Error app/main.js 404 Not Found" on my console. See my issue: http://stackoverflow.com/questions/40231071/error-app-main-js-404-not-found-on-azure

[tbertenshaw]

@VishalGulati I would assume that typescript hasn't been updated on azure yet. I've just checked in the console on my slot and in d:\program files (x86)\microsoft sdks\typescript\ the latest version is 1.6

[tbertenshaw]

As I said a above i checked in the console.

[Razenpok]

%websitename%.scm.azurewebsites.net

[VishalGulati]

Thanks @tbertenshaw, @davidebbo can i build the js files on local and upload the same on git along with .ts files till this issue is resolved? Will that work? Is that a legitimate way?

[ahmelsayed]

@tbertenshaw Your scenario (using TypeScript in csproj) should be fixed now. We deployed TypeScript 2.0.6 to VMs.

@Dia6lo This however won't quite fix your scenario (xproj based deployment) because we are still missing some target files needed by msbuild to build ts in these projects. That's on track to be deployed in about 3 weeks.

[Razenpok]

Good to know that, thanks.

[VishalGulati]

@ahmelsayed Thanks for the update. I tried deploying my angular2 project on Azure but still dont see the ts files being compiled to js. However if I use this command in package.json then the ts files are compiled to js but with errors and deployment is not successful. Command to be used in scripts section:

"postinstall": "typings install && tsc",

However it gives a lot of error. Please see the issue I raised for this here : Azure/azure-sdk-for-node#1946 . Looking forward to hear from you. TIA.

[ahmelsayed]

This however won't quite fix your scenario (xproj based deployment) because we are still missing some target files needed by msbuild to build ts in these projects. That's on track to be deployed in about 3 weeks.

[tbertenshaw]

Ok now typescript v2.* is installed the site succeeds in deploying. However with a few strange issues which didn't occur previously (when it used typescript 1)

• node_modules were installed but didn't get deployed to the site.
• bower_components were installed but didn't get deployed to the site.
• Typescript wasn't deployed to the live site (expected?)
• generated js wasnt moved to the /app/dist folder instead it stayed in the /app/src folder (/app/tsconfig.json wasn't used)

I did see these two lines (I've omitted the typescript files)

message: " D:\Program Files (x86)\Microsoft SDKs\TypeScript\2.0\tsc.exe --sourcemap --target ES5 --noEmitOnError COMPUTE_PATHS_ONLY "TS FILES NOT LISTED"

message: " D:\Program Files (x86)\Microsoft SDKs\TypeScript\2.0\tsc.exe --sourcemap --target ES5 --noEmitOnError "TS FILES NOT LISTED"

[ahmelsayed]

Is this different from running msbuild on your local machine? I think msbuild just doesn't copy these directories when outputing your build result so we don't copy them. @vijayrkn would know more how to get msbuild to work.

[tbertenshaw]

The typescript build is certainly different to my local build. The local build does use the tsconfig.json

I'm trying to use mvto move after the kudusynccommand but getting an error at the moment

call :ExecuteCmd mv "%DEPLOYMENT_TEMP%\node_modules" "%DEPLOYMENT_TARGET%"

Error
The syntax of the command is incorrect.

[ahmelsayed]

that's odd. Do you have a custom build locally, or does msbuild use tsconfig? I thought msbuild skips tsconfig if you are using a csproj

I actually don't think the node_modules is under DEPLOYMENT_TEMP, or kudusync would've copied it. It's probably under DEPLOYMENT_SOURCE. Not sure why mv is complaining? Maybe try robocopy?

robocopy "%DEPLOYMENT_SOURCE%\node_modules" "%DEPLOYMENT_TARGET%\node_modules" /E

or if you want to remove extra files in the destination, you can use /MIR which mirrors the folders.

robocopy "%DEPLOYMENT_SOURCE%\node_modules" "%DEPLOYMENT_TARGET%\node_modules" /MIR

note: I haven't tried these commands :) if you have a sample repo that doesn't work I can give that a try

[tbertenshaw]

@ahmelsayed the last error was with my syntax of mv ( tested it in powershell kudu console, but its evident that it runs using the other console.
i.e.. this works.
mv "node_modules" "%DEPLOYMENT_TARGET%"

(there is a node modules as i have already customised my deploy.cmd to resolve the issues above

I'm installing npm,bower and typings to %DEPLOYMENT_SOURCE%\MyWebproject\
then moving them to the %DEPLOYMENT_TARGET%.

Still not sure why/how to get the deploy process to run tscwith the tsconfig.json

[ahmelsayed]

This should be fully fixed now. @Dia6lo your repo should be working as is.

[Razenpok]

I can confirm that my repo (https://github.com/Dia6lo/LongStoryShort) is now processed by TSC, but I still get an error about TypeScript version. Text of this error is: "error TS5023: Build: Unknown compiler option 'strictNullChecks'." which means that compiler used is lower than 2.0 version. @ahmelsayed, should I create new issue about it or reopen this one?

[Razenpok]

Any updates?

[davidebbo]

@ahmelsayed has been out but can take a look after he's back.

[ahmelsayed]

It seems that we have TypeScriptToolsVersion set to 1.8 in "\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets"

You can override that manually by setting TypeScriptToolsVersion app setting to 2.0

[Razenpok]

I've set TypeScriptToolsVersion to 2.0, but now I get
MSBUILD : error MSB1009: Project file does not exist. [D:\home\site\repository\LongStoryShort\LongStoryShort.xproj]
on https://longstoryshort.azurewebsites.net

[ahmelsayed]

yep I saw that yesterday but was hoping it might be unrelated error I ran into. It's weird that it's complaining about a file that's clearly there. I'll take another look today.

[ahmelsayed]

okay that turned out to be just needing a global.json in the root of your repo that specifies the SDK version to be preview2.

{
  "projects": [ "src", "test" ],
  "sdk": {
    "version": "1.0.0-preview2-1-003177"
  }
}

ref: http://stackoverflow.com/a/40658723/3234163

[Razenpok]

@ahmelsayed tyvm, that worked. TypeScriptToolsVersion 2.0 worked too as well. Too bad that Visual Studio doesn't neither prompt to upgrade TS version in ASP.NET Core projects, nor add it in xproj in the first place.

I have last couple of questions:

1. TS team has released 2.1 version (https://github.com/Microsoft/TypeScript/releases/tag/v2.1.4). Can you update it?
2. Why don't you keep TypeScriptToolsVersion in "\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets" equals with the latest installed version if it can be overriden with project's property?

[Razenpok]

Bump

[Razenpok]

@ahmelsayed @davidebbo

Why don't you keep TypeScriptToolsVersion in "\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets" equals with the latest installed version if it can be overriden with project's property?

[Razenpok]

I'm not sure about the current state of this issue, and I don't have the mentioned use-case anymore, so I'm closing it. Feel free to reopen.