Question

好的，这是。我正在尝试使用Angular 4做一些非常基本的东西，并且正在将一些旧的“hello world”样式代码转发到最新版本的Angular。与此同时，我一直在推动其他事情，包括SystemJS。突然之间，我发现了一种古怪。从这里开始，我的package.json工作正常：

{
  "name": "angular-seed",
  "description": "Seed",
  "private": true,
  "scripts": {
    "start": "live-server"
  },
  "dependencies": {
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/forms": "^4.3.6",
    "@angular/http": "^4.3.6",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/router": "^4.3.6",
    "core-js": "^2.4.0",
    "rxjs": "5.4.3",
    "systemjs": "^0.19.47",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "live-server": "^1.2.0",
    "typescript": "^2.1.5"
  }
}

使用它，在基本的Hello World样本上，我最终会得到以下结果。

但是，如果我只是将我的SystemJS参考从“^ 0.19.47”升级到“^ 0.20.18”并运行“npm update”来获取更新：

{
  "name": "angular-seed",
  "description": "Seed",
  "private": true,
  "scripts": {
    "start": "live-server"
  },
  "dependencies": {
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/forms": "^4.3.6",
    "@angular/http": "^4.3.6",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/router": "^4.3.6",
    "core-js": "^2.4.0",
    "rxjs": "5.4.3",
    "systemjs": "^0.20.18", // I AM THE ONLY THING THAT CHANGED!
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "live-server": "^1.2.0",
    "typescript": "^2.1.5"
  }
}

我现在最终得到了无法加载的Typescript转换器，如下所示：

思考？

[编辑]本来应该添加这个。这是我的systemjs.config.js，可能涉及到这个：

System.config({
    transpiler: 'typescript',
    typescriptOptions: {emitDecoratorMetadata: true},
    map: {
      '@angular': 'node_modules/@angular',
      'rxjs'    : 'node_modules/rxjs'
    },
    paths: {
      'node_modules/@angular/*': 'node_modules/@angular/*/bundles'
    },
    meta: {
      '@angular/*': {'format': 'cjs'}
    },
    packages: {
      'app'                              : {main: 'main', defaultExtension: 'ts'},
      'rxjs'                             : {main: 'Rx'},
      '@angular/core'                    : {main: 'core.umd.min.js'},
      '@angular/common'                  : {main: 'common.umd.min.js'},
      '@angular/compiler'                : {main: 'compiler.umd.min.js'},
      '@angular/platform-browser'        : {main: 'platform-browser.umd.min.js'},
      '@angular/platform-browser-dynamic': {main: 'platform-browser-dynamic.umd.min.js'}
    }
});

[编辑2]添加一些进度（？）

好的，所以沿着兔子漏洞，SystemJS 0.20需要更改使用插件进行转换，我已经“npm install（ed）plugin-typescript”并编辑了我的systemjs.config.js看起来像这样现在：

System.config({
    // CHANGED transpiler from 'typescript' TO 'plugin-typescript' TO 
    // transpiler: 'typescript',
    transpiler: 'plugin-typescript',
    typescriptOptions: {emitDecoratorMetadata: true, experimentalDecorators: true}, // CHANGED to add experimentalDecorators since after the transpiler started working, it complained that I couldn't have emitDecoratorMetadata without experimentalDecorators set to true as well...
    map: {
      '@angular': 'node_modules/@angular',
      'rxjs'    : 'node_modules/rxjs',

      // ADDED these to support SystemJS 0.20 and Typescript Transpiler
      "plugin-typescript": "node_modules/plugin-typescript/lib/",
      "typescript": "node_modules/typescript/"

    },
    paths: {
      'node_modules/@angular/*': 'node_modules/@angular/*/bundles'
    },
    meta: {
      '@angular/*': {'format': 'cjs'}
    },
    packages: {
      'app'                              : {main: 'main', defaultExtension: 'ts'},
      'rxjs'                             : {main: 'Rx'},
      '@angular/core'                    : {main: 'core.umd.min.js'},
      '@angular/common'                  : {main: 'common.umd.min.js'},
      '@angular/compiler'                : {main: 'compiler.umd.min.js'},
      '@angular/platform-browser'        : {main: 'platform-browser.umd.min.js'},
      '@angular/platform-browser-dynamic': {main: 'platform-browser-dynamic.umd.min.js'},

      // ADDED THESE TO SUPPORT SystemJS 0.20 and Typescript Transpiler
      "plugin-typescript": {
        "main": "plugin.js"
      },
      "typescript": {
          "main": "lib/typescript.js",
          "meta": {
              "lib/typescript.js": {
                  "exports": "ts"
              }
          }
      }

    }
});

现在，看起来这个转换器已经开始了，但我遇到了一个新问题 - 路径看起来也发生了变化。这是最新的截图：

[编辑3]哦，大声哭泣......

https://github.com/systemjs/systemjs/issues/1039因此，SystemJS 0.20弃用了路径支持。这显然是我最新的问题。我将继续更新我的配置，以启用新的非通配符SystemJS。：/

开启。这真的非常令人沮丧。我现在花了大约一整天的时间试图简单地从0.19移动到0.20的SystemJS，这似乎几乎没有给出任何类型的向后兼容性的废话。通过比较，在同一个项目中，我从Angular 2.0.0变为4.3.6，没有问题。拉开。

将SystemJS从0.19迁移到0.20 {Angler Transpiler时出现问题

0 个答案: