如何为本地 Angular CLI 应用程序和 plunk 获取相同的 Angular 版本？答案

【问题标题】：How to get the same Angular versions for both a local Angular CLI app and a plunk?如何为本地 Angular CLI 应用程序和 plunk 获取相同的 Angular 版本？
【发布时间】：2016-05-22 18:04:24
【问题描述】：

我是 Angular 2.0 和 angular-cli 的新手。

为了让自己摆脱困境，我需要使用与我用于制作我的应用程序相同版本的 Angular 2.0 做一个 plunk，然后发布一个与之相关的 Stackoverflow 问题。

据我所知，我可以在 plunk 中使用here 列出的版本，目前最高为 2.0.0-beta.17。 Angular-CLI 使用 2.0.0-rc.1。

我尝试通过将“2.0.0-rc.1”替换为“2.0.0-beta.17”来编辑我的 package.json 的这一部分。那没用。

  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "^0.6.12"
  },

是否可以在 plunk 中使用 cli 版本（2.0.0-rc.1）？我宁愿那样做。

【问题讨论】：

标签： angularjs angular plunker angular-cli

【解决方案1】：

不幸的是，RC 似乎还没有在 cdn 上可用。您可以在 cdnjs 代表上尝试请求。使用this link

【讨论】：

【解决方案2】：

我刚刚通过Mark Rajcok 遇到了这个plunk，它似乎通过从https://npmcdn.com 获取代码来处理它

/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 * Override at the last minute with global.filterSystemConfig (as plunkers do)
 */
(function(global) {

  var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/router-deprecated',
      '@angular/upgrade',
  ];

  // add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3?main=browser'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

【讨论】：