在Azure上找不到错误的app/main.js 404 [英] Error app/main.js 404 Not Found on Azure

问题描述

我的angular2应用程序部署是干净的，但是当我尝试访问相同的URL时，出现错误:app/main.js 404(未找到).我也看不到在KUDU上创建任何javascript文件.我无法编辑打字稿文件.我应该在本地将ts构建为js，然后再在git上推送js文件吗?任何人都可以建议这样做的必要条件.

My angular2 application deployment is clean but when i try to access the url to the same i get the error : app/main.js 404 (Not Found). Also I see no javascript files being created on the go on KUDU. The typescripts files are not compiled as I could make of it. Should i build ts to js on local and then push the js files also on git? Could anyone please suggest what is required to do so.

PS:我在根目录中的web.config文件如下:

PS: My web.config file in root directory is as follows:

<configuration>
    <system.web>
        <customErrors mode="Off" />
        <compilation debug="true" targetFramework="4.5">
        </compilation>
    </system.web>
</configuration>

我的Package.json是:

My Package.json is :

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "engines": {
    "node": "6.1.0",
    "npm": "3.8.6"
  }, 
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "docker-build": "docker build -t ng2-quickstart .",
    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
    "pree2e": "npm run webdriver:update",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "node_modules\\.bin\\lite-server",
    "postinstall": "typings install && tsc",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "node_modules\\.bin\\tsc",
    "concurrently": "node_modules\\.bin\\concurrently",
    "tsc:w": "node_modules\\.bin\\tsc -w",
    "typings": "node_modules\\.bin\\typings",
    "webdriver:update": "webdriver-manager update"
  },
  "keywords": [],
  "author": "",
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",

    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "^1.1.14",
    "moment": "^2.15.2",
    "firebase": "^3.5.2",
    "angularfire2": "^2.0.0-beta.5",
    "systemjs": "0.19.39",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings": "^1.4.0"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings": "^1.4.0",

    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.15.1",
    "lodash": "^4.16.2",
    "jasmine-core": "~2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-htmlfile-reporter": "^0.3.4",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.4"
  },
  "repository": {}
}

如果我将postinstall命令修改为此，则会在kudu上将ts文件编译为js，但会出现部署错误.

If I modify the postinstall command to this I get the ts files compiled to js on kudu but get deployment errors.:

"postinstall": "typings install && tsc"

我得到以下错误:

推荐答案

默认情况下，Azure Web Apps的部署任务使用 npm install --production 命令在您的包中安装依赖项.json ，它将跳过在 devDependencies 部分中配置的所有依赖项.

By default, Azure Web Apps’ deployment task uses npm install --production command to install the dependencies in your package.json, which will skips all the dependencies configured in devDependencies section.

因此，首先，您可以将 devDependencies 部分中的所有依赖项移至 dependencies 部分.

So first, you can move all the dependencies in devDependencies section to dependencies section.

由于在部署任务期间完成node.js模块的安装后，您的ts文件可以编译为javascript，您可以使用"postinstall":键入安装&& tsc" 代替"postinstall":键入安装&& tsc" 来实现此目的.

As your ts files can be compiled into javascript after the node.js modules installation finished during the deployment task, you could use "postinstall": "typings install && tsc" instead of "postinstall": "typings install && tsc" to achieve this.

任何进一步的担忧，请随时让我知道.

Any further concern, please feel free to let me know.

这篇关于在Azure上找不到错误的app/main.js 404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！