Angular 2 RC 4“（SystemJS）无法解析[对象位置]的所有参数：”在IE 11中

Question

My Web App works fine in Chrome, Firefox and Edge, but of course not in IE 11. Probably not older versions of IE as well. It is a minimal app using Angular Cli to generate the app.

full error:

EXCEPTION: Can't resolve all parameters for [object Location]: (?).
   EXCEPTION: Can't resolve all parameters for [object Location]: (?).

Unhandled Promise rejection: (SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: (SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js
   "Unhandled Promise rejection:"
   "(SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js"
   "; Zone:"
   "<root>"
   "; Task:"
   "Promise.then"
   "; Value:"
   {
      [functions]: ,
      __proto__: { },
      description: "(SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js",
      message: "(SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js",
      name: "Error",
      originalErr: { },
      stack: null,
      Symbol()_g.sn5fkg9wx58: undefined,
      Symbol(rxSubscriber)_o.sn5fkg9wx58: undefined
   }

Error: Uncaught (in promise): Error: (SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js
   {
      [functions]: ,
      __proto__: { },
      description: "Uncaught (in promise): Error: (SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js",
      message: "Uncaught (in promise): Error: (SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js",
      name: "Error",
      promise: {
         [functions]: ,
         __proto__: { },
         __zone_symbol__state: 0,
         __zone_symbol__value: { },
         Symbol()_g.sn5fkg9wx58: undefined,
         Symbol(rxSubscriber)_o.sn5fkg9wx58: undefined
      },
      rejection: {
         [functions]: ,
         __proto__: { },
         description: "(SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js",
         message: "(SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js",
         name: "Error",
         originalErr: { },
         stack: null,
         Symbol()_g.sn5fkg9wx58: undefined,
         Symbol(rxSubscriber)_o.sn5fkg9wx58: undefined
      },
      stack: "Error: Uncaught (in promise): Error: (SystemJS) Can't resolve all parameters for [object Location]: (?).
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js
   at l (http://localhost:4200/vendor/zone.js/dist/zone.min.js:1:2987)
   at l (http://localhost:4200/vendor/zone.js/dist/zone.min.js:1:2816)
   at Anonymous function (http://localhost:4200/vendor/zone.js/dist/zone.min.js:1:3327)
   at e.prototype.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.min.js:1:7737)
   at e.prototype.runTask (http://localhost:4200/vendor/zone.js/dist/zone.min.js:1:5178)
   at a (http://localhost:4200/vendor/zone.js/dist/zone.min.js:1:2421)
   at invoke (http://localhost:4200/vendor/zone.js/dist/zone.min.js:1:8989)",
      Symbol()_g.sn5fkg9wx58: undefined,
      Symbol(rxSubscriber)_o.sn5fkg9wx58: undefined,
      task: { },
      zone: { }
   }

package.json

  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "core-js": "^2.4.0",
    "es5-shim": "^4.5.9",
    "es6-shim": "^0.35.1",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "^0.19.31",
    "zone.js": "^0.6.12"
  },

index.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Focus Anbud</title>
  <base href='/'> {{content-for 'head'}}
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Loading Spinner -->
  <link rel="stylesheet" href="assets/css/whirly.css">

  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/css/ionicons.min.css">
  <!--
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  -->

  <!-- Theme -->
  <link rel="stylesheet" href="assets/css/AdminLTE.min.css">
  <link rel="stylesheet" href="assets/css/skins/skin-blue.min.css">

</head>

<body class="hold-transition skin-blue sidebar-mini">
  <!--<div class="wrapper">-->
  <app>
    <div class="whirly-loader" style="margin-left: 50%; margin-top:20%">Loading...</div>
  </app>
  <!--</div>-->
  <!-- ./wrapper -->

  <!-- jQuery 2.1.4 -->
  <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>

  <!-- Bootstrap 3.3.6 -->
  <script src="assets/js/bootstrap.min.js"></script>
  <!--<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->

  <!-- AdminLTE App -->
  <script src="assets/js/app.js"></script>

  <!-- polyfills for older browsers -->
  <script src="vendor/es5-shim/es5-shim.min.js"></script>
  <script src="vendor/es6-shim/es6-shim.min.js"></script>
  <script src="vendor/systemjs/dist/system-polyfills.js"></script>
  <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
  <script src="vendor/core-js/client/shim.min.js"></script>

  <!-- default -->
  <script src="vendor/zone.js/dist/zone.min.js"></script>
  <script src="vendor/reflect-metadata/Reflect.js"></script>
  <script src="vendor/systemjs/dist/system.src.js"></script>

  <script>
    System.import('system-config.js').then(function() {
      System.import('main');
    }).catch(console.error.bind(console));
  </script>
</body>

</html>

As you can see I have tried all combinations of es5-shim, es6-shim, shims for IE, core-js shim etc. Does not seem to make any difference..

tsconfig:

      "compileOnSave": false,
      "compilerOptions": {
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "mapRoot": "",
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "outDir": "../dist/",
        "rootDir": ".",
        "sourceMap": true,
        "target": "es5",
        "inlineSources": true
      },

system-config.ts

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};

/** User packages configuration. */
const packages: any = {
};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // translate
  'ng2-translate',

  // google-analytics
  'angulartics2',

  // App specific barrels.
  'app',
  'app/shared',
  'app/home',
  'app/_widgets/app-header/',
  'app/_widgets/menu-aside',
  'app/page2',
  'app/page3',
  'app/_widgets/alert',
  'app/_widgets/box',
  'app/_widgets/messages-box',
  'app/_widgets/notification-box',
  'app/_widgets/tasks-box',
  'app/_widgets/user-box',
  'app/_widgets/language-box',
  'app/profile',
  /** @cli-barrel */

];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index', "defaultExtension": "js" };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'ng2-translate': 'vendor/ng2-translate',
    'angulartics2': 'vendor/angulartics2'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({map, packages });

Answer 1

It has something to do with LocationStrategy ( HashLocationStrategy etc.), location strategies are stored in @angular/common package.

Check your bootstrap code, clear IE cache, try reinstalling packages.

Answer 2

发现问题，它不在我在这里展示的任何文件中，但是一个组件有：provider：[Location]，这个没有在任何地方使用或从任何东西导入..

Answer 3

Change

<!-- polyfills for older browsers -->
<script src="vendor/es5-shim/es5-shim.min.js"></script>
<script src="vendor/es6-shim/es6-shim.min.js"></script>
<script src="vendor/systemjs/dist/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="vendor/core-js/client/shim.min.js"></script>

<!-- default -->
<script src="vendor/zone.js/dist/zone.min.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>

to

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>