Angular 2 RC 6使用Webpack“@ angular / upgrade”问题

时间:2016-09-08 10:31:26

标签: angular webpack angular-bootstrap

今天早上我一直在将我的Angular RC 5应用程序更新到RC 6.在修复了代码中的一些问题之后我已经构建了代码,但是当应用程序正在被引导时我似乎有错误。 (我不确定这一点,这只是我的怀疑)。

从研究中我发现它似乎是与webpack和@angular/upgrade相关的问题。 (参见:https://github.com/angular/angular/issues/11249)。除此之外我没有找到很多信息,所以我希望有人遇到过类似的问题。

目前在控制台中我看到以下错误:

Uncaught SyntaxError: Unexpected token export
Uncaught TypeError: Cannot read property 'call' of undefined

当我浏览代码以查看失败的位置时,我注意到Uncaught SyntaxError: Unexpected token export错误来自index.js文件,index.js文件是@angular/upgrade文件1}}。在上面的链接中,提到@angular/upgrade没有指向正确的“UMD包”。说实话,我不确定这是什么意思,我不知道如何解决这个问题。

@angular/update index.js

内的错误

enter image description here

的package.json

{
"name": "ui-prototype",
"version": "1.0.0",
"scripts": {
  "start": "webpack-dev-server --inline --progress --profile --bail --port 8581",
  "lite": "lite-server",
  "build:dev": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail",
  "build:prod": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
  "postinstall": "typings install",
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "typings": "typings",

  "test": "gulp test",
  "watch": "gulp tdd",

  "test:karma": "karma start",
  "watch:karma": "npm run test:karma -- --auto-watch --no-single-run",

  "e2e": "npm run protractor",
    "e2e:live": "npm run e2e -- --elementExplorer",

  "lint": "gulp tslint",
  "tslint": "tslint -c tslint.json src/**/*.ts",
  "protractor": "protractor",
  "pree2e": "npm run webdriver:update -- --standalone",
  "ci": "npm run lint && npm test && npm run e2e",
  "webdriver-manager": "webdriver-manager",
  "webdriver:update": "npm run webdriver-manager update",
  "webdriver:start": "npm run webdriver-manager start"
},
"dependencies": {
  "@angular/common":  "2.0.0-rc.6",
  "@angular/compiler":  "2.0.0-rc.6",
  "@angular/core":  "2.0.0-rc.6",
  "@angular/forms": "2.0.0-rc.6",
  "@angular/http":  "2.0.0-rc.6",
  "@angular/platform-browser":  "2.0.0-rc.6",
  "@angular/platform-browser-dynamic":  "2.0.0-rc.6",
  "@angular/router":  "3.0.0-rc.2",
  "@angular/router-deprecated":  "2.0.0-rc.2",
  "@angular/upgrade":  "2.0.0-rc.6",

  "angular2-in-memory-web-api": "0.0.18",
  "angular2-jwt": "^0.1.16",
  "es6-shim": "^0.35.0",
  "jquery": "^2.2.4",
  "ng2-cookies": "^0.1.9",
  "ts-node": "^0.9.3",
  "primeng": "1.0.0-beta.14",
  "reflect-metadata": "^0.1.3",
  "rxjs": "5.0.0-beta.11",
  "core-js": "^2.4.0",
  "zone.js": "^0.6.17"
},
"devDependencies": {
  "ts-promise": "^0.3.0",
  "codelyzer": "0.0.22",
  "concurrently": "^2.0.0",
  "css-loader": "^0.23.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.9.0",
  "gulp": "^3.9.1",
  "gulp-tslint": "^5.0.0",
  "html-loader": "^0.4.3",
  "html-webpack-plugin": "^2.22.0",
  "jasmine-core": "^2.4.1",
  "karma": "^1.1.0",
  "karma-chrome-launcher": "^1.0.1",
  "karma-coverage": "^1.0.0",
  "karma-firefox-launcher": "^1.0.0",
  "karma-html-reporter": "^0.2.7",
  "karma-jasmine": "^1.0.2",
  "karma-phantomjs-launcher": "^1.0.0",
  "karma-sourcemap-loader": "^0.3.7",
  "karma-webpack": "^1.7.0",
  "lite-server": "^2.2.0",
  "null-loader": "^0.1.1",
  "phantomjs-prebuilt": "^2.1.7",
  "protractor": "^3.2.2",
  "raw-loader": "^0.5.1",
  "rimraf": "^2.5.2",
  "style-loader": "^0.13.1",
  "ts-loader": "^0.8.1",
  "tslint": "^3.10.2",
  "tslint-loader": "^2.1.4",
  "typescript": "^1.8.10",
  "typings": "^1.3.1",
  "webpack": "^1.13.1",
  "webpack-dev-server": "^1.14.1",
  "webpack-merge": "^0.14.0"
}

}

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

import { AppModule } from './app/app.module';

if (process.env.ENV === 'production') {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

更新:发现问题的来源

所以我一直在寻找解决问题的方法,然后我又回到了上面附带的链接。那里有一个标记的提交链接到同一个问题。 (参见:https://github.com/angular/angular/commit/979657989bab4fb93faf6a207d30760faa9bd696)。一旦我查看了那里的更新,我就意识到必须要做什么。

问题是package.json包的@angular/upgrade指向错误的UMD文件。

@angular/upgrade package.json

{
  "_args": [
    [
      {
        "raw": "@angular/upgrade@2.0.0-rc.6",
        "scope": "@angular",
        "escapedName": "@angular%2fupgrade",
        "name": "@angular/upgrade",
        "rawSpec": "2.0.0-rc.6",
        "spec": "2.0.0-rc.6",
        "type": "version"
      },
      "c:\\xampp\\htdocs\\yii\\application\\prototype\\branches\\INT-81_RD\\ng-app"
    ]
  ],
  "_from": "@angular/upgrade@2.0.0-rc.6",
  "_id": "@angular/upgrade@2.0.0-rc.6",
  "_inCache": true,
  "_installable": true,
  "_location": "/@angular/upgrade",
  "_nodeVersion": "5.4.1",
  "_npmOperationalInternal": {
    "host": "packages-12-west.internal.npmjs.com",
    "tmp": "tmp/upgrade-2.0.0-rc.6.tgz_1472686652636_0.8626930271275342"
  },
  "_npmUser": {
    "name": "angular",
    "email": "angular-core+npm@google.com"
  },
  "_npmVersion": "3.9.2",
  "_phantomChildren": {},
  "_requested": {
    "raw": "@angular/upgrade@2.0.0-rc.6",
    "scope": "@angular",
    "escapedName": "@angular%2fupgrade",
    "name": "@angular/upgrade",
    "rawSpec": "2.0.0-rc.6",
    "spec": "2.0.0-rc.6",
    "type": "version"
  },
  "_requiredBy": [
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-2.0.0-rc.6.tgz",
  "_shasum": "3757ab3607cf5b09ef47d98ea4bb5bf5cffeab53",
  "_shrinkwrap": null,
  "_spec": "@angular/upgrade@2.0.0-rc.6",
  "_where": "c:\\xampp\\htdocs\\yii\\application\\prototype\\branches\\INT-81_RD\\ng-app",
  "author": {
    "name": "angular"
  },
  "bugs": {
    "url": "https://github.com/angular/angular/issues"
  },
  "dependencies": {},
  "description": "",
  "devDependencies": {},
  "directories": {},
  "dist": {
    "shasum": "3757ab3607cf5b09ef47d98ea4bb5bf5cffeab53",
    "tarball": "https://registry.npmjs.org/@angular/upgrade/-/upgrade-2.0.0-rc.6.tgz"
  },
  "homepage": "https://github.com/angular/angular#readme",
  "license": "MIT",
  "main": "bundles/core.umd.js",
  "maintainers": [
    {
      "name": "angular",
      "email": "angular-core+npm@google.com"
    }
  ],
  "module": "index.js",
  "name": "@angular/upgrade",
  "optionalDependencies": {},
  "peerDependencies": {
    "@angular/core": "^2.0.0-rc.6",
    "@angular/compiler": "^2.0.0-rc.6",
    "@angular/platform-browser": "^2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.6"
  },
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/angular/angular.git"
  },
  "scripts": {},
  "typings": "index.d.ts",
  "version": "2.0.0-rc.6"
}

你会注意到上面有一个"main": "bundles/core.umd.js"

这应该更新为"main": "bundles/upgrade.umd.js"

我猜这是包装本身的某种错误?可能它将在不久的将来得到修复。现在我不得不手动更改它以修复它。

0 个答案:

没有答案