angular从Angular 2.2更新到Angular 6.0

Question

通过在https://update.angular.io/上执行以下步骤，我已经成功地将Angular 2.2更新到Angular 6.0。更新是以2.2->4.0->5.0->6.0的递增步骤执行的。

在每个更新步骤中，我确认了if >npm start给出了"webpack:编译成功“的消息。还检查了我的应用程序是否可访问。

我不确定更新是否100%正确，原因如下:- 1)我仍然使用webpack^1.13.0和webpack-dev-server^1.14.1，我正在使用它们来启动应用程序，如package.json脚本中所示。我可以使用上面的内容吗？请注意，我已尝试更新到webpack^3.0.0。然而，这导致了一些与webpack装载器有关的错误。因此，我恢复到了webpack^1.13.0和webpack-dev-server^1.14.1，npm start似乎可以很好地处理以下配置文件内容：- module.exports = webpack.config.js (‘./config/webpack.dev’)

我有必要更新webpack^3.0.0吗？如果是，我的webpack.config.js应该是什么？

2)虽然我已经更新到angular-cli^6.0.0，但我没有使用ng serve或ng build。原因是，ng服务寻找的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"
  }
}

​

Answer 1

创建一个名为angular.json的新文件，并将此文件添加到主目录中。您可能需要更改项目名称，因为angular不允许在项目名称中使用空格。

{
  "$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"
}