How to get the same Angular versions for both a local Angular CLI app and a plunk?


I'm new to both Angular 2.0 and angular-cli.

In order to get myself unstuck, I need to make a plunk with the same version of Angular 2.0 as the one I'm using to make my app, and then post a Stackoverflow question linked to it.

As far as I can tell, I can use versions in the plunk that are listed here which currently go up to 2.0.0-beta.17. The Angular-CLI uses 2.0.0-rc.1.

I tried editing this part of my package.json by replacing "2.0.0-rc.1" with "2.0.0-beta.17". That didn't work.

  "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"

Is it possible to use the cli version (2.0.0-rc.1) in a plunk? I'd rather do that.


Unfortunately it seems that the RC isn't available yet on cdn. You can try a request on the cdnjs rep. using By : Thib

I just came across this plunk by Mark Rajcok that seems to handle it by getting the code from

 * PLUNKER VERSION (based on systemjs.config.js in
 * 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':                       '[email protected]',
    '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 = [

  // add map entries for angular packages in the form '@angular/common': '[email protected]?main=browser'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = ''   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); }



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

This video can help you solving your question :)
By: admin