Не удается запустить сайт Angular, потому что мои пути к файлу angular.json не соответствуют тому, что создает ng build - PullRequest
Новая
       39

Не удается запустить сайт Angular, потому что мои пути к файлу angular.json не соответствуют тому, что создает ng build

0 голосов
/ 01 июня 2019

Новичок в Angular, и после запуска ng build я вижу все созданные файлы в указанной мной папке.

В моем файле Angular.json я создаю

"outputPath": "../DatingApp.API/wwwroot"

но остальная часть файла Angular.json не соответствует встроенным файлам.

Это означает, что все файлы, которые были встроены в wwwroot, по-видимому, не имеют той же структуры папок, которая требуется / ожидается для моего файла Angular.json, исходя из путей в файле.

Вот то, что создается, вы можете видеть, что это одна папка со всеми файлами в ней. И мой файл angular.json ищет файлы в подпапках, напр. «ЦСИ /..."

Почему существует несоответствие и как правильно это исправить? Должен ли я изменить все пути в файле Angular.json, чтобы они указывали на правильные файлы сборки? Или есть какое-то другое несоответствие версий или что-то, что можно исправить, например, обновив пакет npm.

enter image description here

файл Angular.json 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "DataingApp-SPA": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../DatingApp.API/wwwroot",
            "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"
            ],
            "scripts": [
              "node_modules/alertifyjs/build/alertify.min.js"
            ],
            "es5BrowserSupport": true

          },
          "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,
              "budgets": [{
                "type": "initial",
                "maximumWarning": "2mb",
                "maximumError": "5mb"
              }]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "DataingApp-SPA:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "DataingApp-SPA:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "DataingApp-SPA: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/**"
            ]
          }
        }
      }
    },
    "DataingApp-SPA-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "DataingApp-SPA:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "DataingApp-SPA:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "DataingApp-SPA"
}

Ответы [ 2 ]

1 голос
/ 01 июня 2019

Эти пути относятся к файлам во время разработки. Когда вы создаете код, компилятор делает много магии. Предполагается, что ваши выходные данные в каталоге dist выглядят так, как показано на картинке.

Не беспокойтесь о несоответствии, так оно и должно быть. Не пытайтесь открыть файл локально, так как для корректной работы требуется веб-сервер. Просто используйте ng serve --prod, если хотите запустить приложение в производственном режиме.

1 голос
/ 01 июня 2019

Ваша проблема должна быть связана с тем, как вы размещаете файлы на своем веб-сервере, поскольку сборка не дает сбоя.

Структура каталога вашего приложения не имеет отношения к окончательной сборке, в которой будут храниться файлы.все в одной папке *.

Во время компиляции Webpack изменяет любые ссылки на файлы для поддержки этого.

Попробуйте создать приложение с ng build и обработать его чем-то вроде http-server (который можно установить глобально с помощью npm install http-server -g).

Затем вы можете просто набрать http-server DatingApp.API/wwwroot, и он должен запустить веб-сервер на локальном хосте: 8080.

*Любые исключения могут быть определены в вашем angular.json файле в assets, в котором перечислены папки и файлы, которые добавляются в папку окончательной сборки.По умолчанию это выглядит как 

"assets": ["src/assets", "src/favicon.ico",],
...