угловое обновление от Angular 2.2 до Angular 6.0 - PullRequest
Новая
       14

угловое обновление от Angular 2.2 до Angular 6.0

0 голосов
/ 25 августа 2018

Я успешно обновил Angular 2.2 до Angular 6.0, выполнив следующие шаги на https://update.angular.io/. Обновление было выполнено пошаговыми шагами: 2.2-> 4.0-> 5.0-> 6.0.

В каждом обновлениишаг, который я подтвердил, если> npm start дал сообщение «webpack: Compiled успешно».а также проверил, доступно ли мое приложение.

Я не уверен, что обновление на 100% корректно по следующим причинам: - 1) Я все еще использую webpack ^ 1.13.0 и webpack-dev-server ^1.14.1, который я использую для запуска приложения, как видно из скриптов package.json.Это нормально для меня, чтобы использовать выше?Обратите внимание, что я попытался обновить до webpack ^ 3.0.0.Однако это привело к некоторым ошибкам, связанным с загрузчиками веб-пакетов.Итак, я вернулся к webpack ^ 1.13.0 и webpack-dev-server ^ 1.14.1, и запуск npm, казалось, работал нормально со следующим содержимым файла webpack.config.js: - module.exports = require ('./ config /webpack.dev ')

Нужно ли мне обновлять webpack ^ 3.0.0?Если да, то каким должен быть мой webpack.config.js?

2) Я не использую ng serve или ng build, хотя я обновился до angular-cli ^ 6.0.0.Причина в том, что ng serve ищет файл angular.json, который никогда не обнаруживался во время обновления.Кроме того, в обновлении не упоминалось, как его сгенерировать.

Ниже приведены мои package.json, tsconfig.json и webpack.config.js: - 

{
  "name": "My APp",
  "version": "1.0.0",
  "description": "AccessLint -2",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8088",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
    "build-css": "node-sass -w src/assets/sass -o src/assets/css",
    "watch-css": "nodemon -e scss -x \"npm run build-css\""
  },
  "license": "AccessLint",
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/platform-server": "^6.0.0",
    "@angular/router": "^6.0.0",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-sass-loader": "^1.0.10",
    "core-js": "^2.4.1",
    "crypto-js": "3.1.9-1",
    "font-awesome": "^4.7.0",
    "font-awesome-webpack": "0.0.5-beta.2",
    "jquery": "^3.1.1",
    "less": "^2.7.2",
    "ng2-translate": "^5.0.0",
    "resolve-url-loader": "^1.6.1",
    "rxjs": "^6.2.2",
    "tslint": "^5.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "^6.1.5",
    "@types/jasmine": "^2.5.35",
    "@types/node": "^6.0.45",
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^3.0.0-beta.9",
    "bootstrap-sass": "^3.3.7",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "font-awesome": "^4.7.0",
    "font-awesome-loader": "1.0.1",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "node-sass": "^4.0.0",
    "nodemon": "^1.11.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "typescript": "^2.7.2",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0"
  }
}

tsconfig.json: - 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

web.config.js: - 

module.exports = require('./config/webpack.dev')

typings.json: - 

{
  "dependencies": {
    "debug": "registry:npm/debug#2.0.0+20160723033700"
  }
}

1 Ответ

0 голосов
/ 25 августа 2018

Создайте новый файл с именем angular.json и добавьте этот файл в свой основной каталог.Возможно, вам придется изменить имя проекта, так как в угловых скобках в названии проекта не допускаются пробелы. 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "My-APp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/My-APp",
            "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": []
          },
          "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": "My-APp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "My-APp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "My-APp: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/**"
            ]
          }
        }
      }
    },
    "My-APp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "My-APp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "My-APp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "My-APp"
}
...