Failed to start Azure Continuous with Github when deploying Angular 2 project

Question

I am completely new to Azure and Angular2.

goal

Configure Azure Continuous Deployment with GitHub.

Problem

Azure collects commits of the main branch in a repository. So this part is fine. However, the deployment failed due to a build error.

Here is the deployment information:

And here is the complete magazine:

Command: "D:\home\site\deployments\tools\deploy.cmd" Handling .NET Web Application deployment. MSBuild auto-detection: using msbuild version '14.0' from 'D:\Program Files (x86)\MSBuild\14.0\bin'. All packages listed in packages.config are already installed. D:\home\site\repository\LearnJS\LearnJS.Web\app\app.component.ts(1,41): error TS2307: Build: Cannot find module 'angular2/core'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\app.component.ts(2,46): error TS2307: Build: Cannot find module 'angular2/router'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\crisis-form.component.ts(1,25): error TS2307: Build: Cannot find module 'angular2/core'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\crisis-form.component.ts(2,22): error TS2307: Build: Cannot find module 'angular2/common'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\crisis.component.ts(1,33): error TS2307: Build: Cannot find module 'angular2/core'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\crisis.component.ts(2,30): error TS2307: Build: Cannot find module 'angular2/http'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\crisis.service.ts(1,48): error TS2307: Build: Cannot find module 'angular2/core'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\crisis.service.ts(2,55): error TS2307: Build: Cannot find module 'angular2/http'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\crisis.service.ts(4,26): error TS2307: Build: Cannot find module 'rxjs/Observable'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\crisis.service.ts(12,16): error TS2304: Build: Cannot find name 'Promise'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\hero-form.component.ts(1,25): error TS2307: Build: Cannot find module 'angular2/core'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\hero-form.component.ts(2,22): error TS2307: Build: Cannot find module 'angular2/common'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\hero.component.ts(1,33): error TS2307: Build: Cannot find module 'angular2/core'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\hero.component.ts(2,30): error TS2307: Build: Cannot find module 'angular2/http'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\hero.service.ts(1,48): error TS2307: Build: Cannot find module 'angular2/core'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\hero.service.ts(2,55): error TS2307: Build: Cannot find module 'angular2/http'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\hero.service.ts(4,26): error TS2307: Build: Cannot find module 'rxjs/Observable'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\hero.ts(1,18): error TS1148: Build: Cannot compile modules unless the '--module' flag is provided. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\main.ts(1,28): error TS2307: Build: Cannot find module 'angular2/platform/browser'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] D:\home\site\repository\LearnJS\LearnJS.Web\app\main.ts(2,32): error TS2307: Build: Cannot find module 'angular2/router'. [D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj] Failed exitCode=1, command="D:\Program Files (x86)\MSBuild\14.0\Bin\MSBuild.exe" "D:\home\site\repository\LearnJS\LearnJS.Web\LearnJS.Web.csproj" /nologo /verbosity:m /t:Build /t:pipelinePreDeployCopyAllFilesToOneFolder /p:_PackageTempDir="D:\local\Temp\8d33697b325b07b";AutoParameterizationWebConfigConnectionStrings=false;Configuration=Release;UseSharedCompilation=false /p:SolutionDir="D:\home\site\repository\LearnJS\\" An error has occurred during web site deployment. \r\nC:\Program Files (x86)\SiteExtensions\Kudu\51.50212.2079\bin\scripts\starter.cmd "D:\home\site\deployments\tools\deploy.cmd" 

The assembly host does not seem to find angular modules. I understand that these modules exist in the ./node_modules directory, which is NOT installed in my repository. I have a package.json file in the repository that looks like this:

 { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" }, "devDependencies": { "concurrently": "^1.0.0", "lite-server": "^1.3.4", "typescript": "^1.7.5" } } 

Question

What do I need to do so that Azure pulls out these node.js modules when deploying the site?

Should I just register in my node_modules directory? But this is similar to this question .

Things i tried

I installed the Azure command line interface and tried to run this command as suggested by this post .

 azure site deploymentscript --node 

But I got this error

Update 2016-02-18:

Repeat the azure site deploymentscript --node , which generates two files: .deployment and deploy.cmd . Move both files to the main branch. Looking carefully at the first line of the log, azure launches deploy.cmd from this directory.

 D:\home\site\deployments\tools\deploy.cmd 

Do I need to create the deployments\tools directory in my project, or did I put deploy.cmd in the wrong place? I am still getting the same build error.

Partial log file AFTER checking two deployment files.

 Command: "D:\home\site\deployments\tools\deploy.cmd" Handling .NET Web Application deployment. MSBuild auto-detection: using msbuild version '14.0' from 'D:\Program Files (x86)\MSBuild\14.0\bin'. All packages listed in packages.config are already installed. D:\home\site\repository\LearnJS\LearnJS.Web\app\app.component.ts(1,41): error TS2307: Build: Cannot find module 'angular2/core'. 

Here is the deploy.cmd file:

  @if "%SCM_TRACE_LEVEL%" NEQ "4" @echo off :: ---------------------- :: KUDU Deployment Script :: Version: 1.0.6 :: ---------------------- :: Prerequisites :: ------------- :: Verify node.js installed where node 2>nul >nul IF %ERRORLEVEL% NEQ 0 ( echo Missing node.js executable, please install node.js, if already installed make sure it can be reached from current environment. goto error ) :: Setup :: ----- setlocal enabledelayedexpansion SET ARTIFACTS=%~dp0%..\artifacts IF NOT DEFINED DEPLOYMENT_SOURCE ( SET DEPLOYMENT_SOURCE=%~dp0%. ) IF NOT DEFINED DEPLOYMENT_TARGET ( SET DEPLOYMENT_TARGET=%ARTIFACTS%\wwwroot ) IF NOT DEFINED NEXT_MANIFEST_PATH ( SET NEXT_MANIFEST_PATH=%ARTIFACTS%\manifest IF NOT DEFINED PREVIOUS_MANIFEST_PATH ( SET PREVIOUS_MANIFEST_PATH=%ARTIFACTS%\manifest ) ) IF NOT DEFINED KUDU_SYNC_CMD ( :: Install kudu sync echo Installing Kudu Sync call npm install kudusync -g --silent IF !ERRORLEVEL! NEQ 0 goto error :: Locally just running "kuduSync" would also work SET KUDU_SYNC_CMD=%appdata%\npm\kuduSync.cmd ) goto Deployment :: Utility Functions :: ----------------- :SelectNodeVersion IF DEFINED KUDU_SELECT_NODE_VERSION_CMD ( :: The following are done only on Windows Azure Websites environment call %KUDU_SELECT_NODE_VERSION_CMD% "%DEPLOYMENT_SOURCE%" "%DEPLOYMENT_TARGET%" "%DEPLOYMENT_TEMP%" IF !ERRORLEVEL! NEQ 0 goto error IF EXIST "%DEPLOYMENT_TEMP%\__nodeVersion.tmp" ( SET /p NODE_EXE=<"%DEPLOYMENT_TEMP%\__nodeVersion.tmp" IF !ERRORLEVEL! NEQ 0 goto error ) IF EXIST "%DEPLOYMENT_TEMP%\__npmVersion.tmp" ( SET /p NPM_JS_PATH=<"%DEPLOYMENT_TEMP%\__npmVersion.tmp" IF !ERRORLEVEL! NEQ 0 goto error ) IF NOT DEFINED NODE_EXE ( SET NODE_EXE=node ) SET NPM_CMD="!NODE_EXE!" "!NPM_JS_PATH!" ) ELSE ( SET NPM_CMD=npm SET NODE_EXE=node ) goto :EOF :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :: Deployment :: ---------- :Deployment echo Handling node.js deployment. :: 1. KuduSync IF /I "%IN_PLACE_DEPLOYMENT%" NEQ "1" ( call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd" IF !ERRORLEVEL! NEQ 0 goto error ) :: 2. Select node version call :SelectNodeVersion :: 3. Install npm packages IF EXIST "%DEPLOYMENT_TARGET%\package.json" ( pushd "%DEPLOYMENT_TARGET%" call :ExecuteCmd !NPM_CMD! install --production IF !ERRORLEVEL! NEQ 0 goto error popd ) :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :: Post deployment stub IF DEFINED POST_DEPLOYMENT_ACTION call "%POST_DEPLOYMENT_ACTION%" IF !ERRORLEVEL! NEQ 0 goto error goto end :: Execute command routine that will echo out when error :ExecuteCmd setlocal set _CMD_=%* call %_CMD_% if "%ERRORLEVEL%" NEQ "0" echo Failed exitCode=%ERRORLEVEL%, command=%_CMD_% exit /b %ERRORLEVEL% :error endlocal echo An error has occurred during web site deployment. call :exitSetErrorLevel call :exitFromFunction 2>nul :exitSetErrorLevel exit /b 1 :exitFromFunction () :end endlocal echo Finished successfully. 

Answer 1

Based on my understanding, I think your needs were to create a static web project with TypeScript and Angular 2, and then deploy a static website to Azure WebApp with continuous deployment through GitHub.

An easy way is to create a static web project in VS using the nodejs tools, and then develop only for this static HTML web page with js files compiled from ts files, and then transfer them to your created GitHub repository and configure continuous deployment from GitHub for Azure WebApp on the Azure portal.

So, I think you can try to turn to another answered SO thread Deploying Hexo on Azure .. not sure what I am missing to know how to do this.

Answer 2

Deploying a script for Node works, the problem is that you are using it on the root hard drive in the command line without administrative support.

Either open the command line with administrator privileges, or run it in the folder where the user has write permission (possibly in the Documents folder).

Add the generated files to the folder of your web application. You do not need to create VS.csproj, as it is a client application.

Typescript refers to your "devDependencies", which means that it works in your development environment, it must compile .ts files into .js files. You have to click these compiled .js files on your repo and link to them on your pages.