问题
I have a working production build for Angular Web App. I have an active subscription on my Azure Account (Free Tier) with an AppService Plan, App Service, Resource group, Storage Account, KeyVault, SQL Server & SignalR.
I want to deploy my web App using Azure. My Source control is Azure DevOps.
I have followed tutorials:
https://medium.com/@waelkdouh/deploying-your-angular-application-to-azure-using-azure-devops-f3ba35a0ae4d
https://docs.microsoft.com/en-us/azure/devops/pipelines/apps/cd/deploy-webdeploy-webapps?view=azure-devops
https://docs.microsoft.com/en-us/azure/app-service/deploy-continuous-deployment
https://angular.schule/blog/2019-08-ng-deploy
https://medium.com/@kevinding0218/deploy-angular-8-application-to-azure-app-service-paas-using-azure-devops-repo-cd-c3294cd52193
But basically always fail at the last step: ng run :deploy
Depending on what I enter for I get two types of error messages.
If I enter ng run projectName:deploy (this is what I believe to be the correct name), I get
An unhandled exception occurred: Project target does not exist.
If I enger ng run projectname:deploy (this is my projectname with wrong casing), I get
An unhandled exception occurred: Project "projectname" does not exist.
So It seems to trigger some different Error message inside
clientapp\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
I tried tweaking it as in Angular8 : ng run => 'Project target does not exist.' when using i18n but it didn't make me any wiser.
my angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"projectName": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"progress": true,
"extractCss": true,
"outputPath": "dist/projectName",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [ "src/assets", "src/manifest.webmanifest", "src/web.config" ],
"styles": [
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "projectName:build"
},
"configurations": {
"production": {
"browserTarget": "projectName:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "projectName:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": ["styles.css"],
"scripts": [],
"assets": [
"src/assets",
"src/web.config",
"src/manifest.webmanifest"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "projectName:serve"
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/dogface/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "projectName:build",
"serverTarget": "projectName:server"
},
"configurations": {
"production": {
"browserTarget": "projectName:build:production",
"serverTarget": "projectName:server:production"
}
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": "projectName:build:production",
"serverTarget": "projectName:server:production",
"routes": [
"/"
]
},
}
}
},
"defaultProject": "projectName"
}
My web.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
<remove fileExtension=".woff"/>
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
</staticContent>
<rewrite>
<rules>
<rule name="Angular" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>DogFace</title>
<base href="/"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#1976d2">
</head>
<body>
<app-root>
Loading...
</app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
my tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"module": "esnext",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"DOM.Iterable",
"dom"
]
}
}
I've been trying for days now, running in circles. I have updated to Angular 11, did ng add @azure/ng-deploy (which says after logging in: You don't have any active subscriptions, but when I az storage account list in CMD-Shell, I see my actual subscription and when I az login in CMD: ), I removed & readded node_modules folder, changed es2015 to es5 in tsconfig.json, did npm install before build --prod, authorized my azure account from cmd-shell.
Everything suggested in this thread did not work either angular ng serve command throws error: An unhandled exception occurred: Project does not exist
I did find this bugreport related to , but it's almost a year old and does seem to be resolved. https://github.com/Azure/ng-deploy-azure/pull/92
My questions: What else is in play here, that would disrupt me from deploying?
What mistakes did I make in the files presented?
How come angular CLI doesn't find my active subscriptions? One and a half years ago I know it was possible with free subscriptions and documentations doesn't state otherwise?
Half the time when I log into Microsoft with my account it states 'We couldn't find an account with that username. Try another..' But I know for sure this is the good account because when I want to login with another account it says I can't because I'm logged in with the account he can't find (I'm not even joking)
I'd like to get it up and running before I scale up to a bigger/more costly AppServicePlan, just to avoid having all that mess while on paying service :)
Am I asking too much? ))
Thanks for helping
回答1:
My solution to this problem was abandoning the deployment through Angular CLI, add a new subscription, moving everything to that new subscription and deploy though azure deployment center
来源：https://stackoverflow.com/questions/66213224/ng-run-projectdeploy-project-target-does-not-exist