5

我正在开发一个angular6应用程序,我想生成一个要在我的服务器上进行测试的构建,当前我使用ng服务器,它在我的浏览器上运行时不会产生任何错误。

c:\ Users \ emiry \ Desktop \ Angular \ Projects \ StartingNewProject

当我运行ng build命令时,它将为/ dist文件夹生成一个版本,并且不返回任何错误

在我已经安装的机器上,wamp64所以我得到了ng生成的构建并将其放在我的www文件夹中

C:\ wamp64 \ www \ StartingNewProject

仅仅是这足以让我能够在服务器上运行我的应用程序?

当我尝试通过http:// localhost / startingnewproject /访问服务器上的应用程序时

它在浏览器控制台中向我返回以下错误

无法加载资源:服务器以404(未找到)状态响应polyfills.js:1无法加载资源:服务器以404(未找到)状态进行响应styles.js:1无法加载资源:服务器响应状态为404(未找到)vendor.js:1无法加载资源:服务器响应状态为404(未找到)main.js:1无法加载资源:服务器响应的状态为: 404(未找到)

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "StartingNewProject": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/StartingNewProject",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              {
                "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
              }
            ],
            "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
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "StartingNewProject:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "StartingNewProject:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "StartingNewProject: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": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "StartingNewProject-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "StartingNewProject:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "StartingNewProject:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "StartingNewProject"
}

package.json

{
  "name": "starting-new-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0-alpha.0",
    "@ng-bootstrap/schematics": "^2.0.0-alpha.1",
    "bootstrap": "^4.0.0",
    "core-js": "^2.5.4",
    "jshint": "^2.9.5",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

我尝试访问如下

文件:/// C:/wamp64/www/StartingNewProject/index.html

5index.html:13 GET文件:/// C:/runtime.js 0()/C:/favicon.ico:1 GET文件:/// C:/favicon.ico 0()translate.google.com/ gen204?nca = te_li&client = te_lib&logld = vTE_20180625_00:1 GET file://translate.google.com/gen204?nca = te_li&client = te_lib&logld = vTE_20180625_00 0()

文件:/// C:/wamp64/www/StartingNewProject/index.html

GET file:/// C:/runtime.js 0()/C:/favicon.ico:1 GET file:/// C:/favicon.ico 0()

当我尝试访问根目录以查看文件夹和文件时,可以很好地说明问题是当我加载index.html时

  • 如果将其粘贴C:\wamp64\www\StartingNewProject粘贴C:\wamp64\www\StartingNewProject\index.html到浏览器中,是否会加载应用程序? –  user184994 '18 Jul 31在20:01
  • 嗨,我尝试访问,但遇到了一些问题,我把结果输入了问题 –  Emiry Mirella 18年7月31日在20:07
  • 好的,看起来它至少可以找到文件,这很好。您是否检查过wamp64服务正在运行并且已正确配置了Apache? – user184994 18年  7月31日在20:09
  • 是的,在我的沼泽中,我也有我的api来连接这个我的有角度的项目,当我执行有角度的ng服务时,我可以正确访问该api –  Emiry Mirella 18年7月31日在20:11
  • 如果仅浏览到http://localhost,是否显示WampServer主页?(不是您的Angular主页) –  user184994 '18 Jul 31'在20:15

1个回答    正确答案

12   

项目遇到的问题是试图找到其依赖项。index.htmlAngular项目的文件应包含一个标签,如下所示:

<base href="/">

(我为什么要把   <base href="/"> 去掉才能正常运行   好像 改成 <base href="/StartingNewProject/">

也是可以的  
)

或类似。这意味着,当它寻找依赖关系时,它会寻找相对于根的相对关系。在您的情况下,根目录(即localhost)旁边没有,它们位于StartingNewProject

您应该可以生成一个新版本,并ng build --prod --base-href=/app/以此为基础添加基本href标记 

生成的 index.html 中,用  Git ( Cygwin ) 生成的就是(有问题)   <base href="D:/Program Files/Git/app/">

(

        在scripts中定义一个key:value的脚本。比如你这边简单写的话就是“build-prod”:"ng build --prod --base-href /app/"

        然后在git base中运行npm run build-prod就可以了  生成就没有问题了

)

生成的 index.html 中,用 cmd dos  ( powershell )  生成的就是(正确)   <base href="/app/">  



。请注意,在此同时包含前导斜线和尾随斜线非常重要。

可以在Angular文档中找到更多详细信息,这里

  • 抱歉,我不知道在哪里找到这个<base标签?如果我不更改并运行ng build --base-href = / StartingNewProject是否可以工作? –  Emiry Mirella '18 Jul 31'20:29
  • 是的,您可以运行该构建命令,而无需手动更改HTML – 18年  7月31日, user184994,20 :31 
  • 我运行ng build命令-base-href = / StartingNewProject,当我转到http:// localhost / startingnewproject /时,它返回我GET http://localhost/runtime.js 404(未找到) –  Emiry Mirella 7月31日' 18在20:35
  • 如果您手动打开C:/wamp64/www/StartingNewProject/index.html,可以看到<base>html标签吗?href属性设置为"/StartingNewProject" –  user184994 '18 Jul 31在20:38
  • 我只是手动添加index.html <base href =“ / StartingNewProject”>文件,错误仍然存在 –  Emiry Mirella 18年7月31日在20:38

来自  https://stackoverflow.com/questions/51621040/building-angular-application-and-putting-on-the-server