带有Angular2的Ie11中的语法错误（AngularQuickStart 2.4.0）

Question

When I try to run my angular2 app in IE11 i have such error i browser console. 当我尝试在IE11中运行我的angular2应用程序时，出现这样的错误，我在浏览器控制台中运行。

"Недопустимый знак" means unacceptable symbol “Недопустимыйзнак”表示不可接受的符号 It's my index html 这是我的索引html

  <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Angular QuickStart</title>
    <base href="/src/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="../Content/bootstrap.css">

    <!-- Polyfill(s) for older browsers -->

    <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/systemjs/dist/system.src.js"></script>

    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="/node_modules/signalr/jquery.signalr.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('main.js').catch(function(err) { console.error(err); });
    </script>
</head>
<body>
    <my-app>Loading AppComponent content here ...</my-app>
</body>
</html>

Its my packege.json: 它是我的packege.json：

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",

    "angular-in-memory-web-api": "~0.2.4",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.0.10",

    "canonical-path": "0.0.2",
    "tslint": "^3.15.1",
    "lodash": "^4.16.4",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",

    "@types/node": "^6.0.46",
    "@types/jasmine": "2.5.36"
  },
  "repository": {}
}

Its my tsconfig.json 它是我的tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

I now that I'm not the fist who get stuck with such problem but any solution that i fount does not take effect for me 我现在不是那种被这种问题困扰的拳头，但是我所寻求的任何解决方案都不会对我生效

Answer 1

I use Angular QuickStart v 2.4.0. 我使用Angular QuickStart v 2.4.0。 And problem was in src/systemjs-angular-loader.js. 问题出在src / systemjs-angular-loader.js中。 It have syntax sugar for string format and URL constructor. 它具有用于字符串格式和URL构造函数的语法糖。 IE does not support both of them. IE不支持它们两者。 So there is systemjs-angular-loader.js for quickstart 2.4.0(in v4 it fixed ) that work in ie11: 因此，有一个用于快速入门2.4.0的systemjs-angular-loader.js（在v4中已修复）在ie11中工作：

var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;

module.exports.translate = function(load){

    var url = document.createElement('a');
    url.href = load.address;

  var basePathParts = url.pathname.split('/');

  basePathParts.pop();
  var basePath = basePathParts.join('/');

  var baseHref = document.createElement('a');
  baseHref.href = this.baseURL;
  baseHref = baseHref.pathname;

  basePath = basePath.replace(baseHref, '');

  load.source = load.source
    .replace(templateUrlRegex, function(match, quote, url){
      let resolvedUrl = url;

      if (url.startsWith('.')) {
        resolvedUrl = basePath + url.substr(1);
      }

      return 'templateUrl: "'+resolvedUrl+'"';
    })
    .replace(stylesRegex, function(match, relativeUrls) {
      var urls = [];
      while ((match = stringRegex.exec(relativeUrls)) !== null) {
        if (match[2].startsWith('.')) {
          urls.push('"'+basePath+match[2].substr(1)+'"');
        } else {
          urls.push('"'+match[2]+'"');
        }
      }

      return "styleUrls: [" + urls.join(', ') + "]";
    });

  return load;
};

带有Angular2的Ie11中的语法错误（AngularQuickStart 2.4.0）

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-07-20 10:48:49

带有Angular2的Ie11中的语法错误（AngularQuickStart 2.4.0）

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-07-20 10:48:49

解决方案1
0 已采纳 2017-07-20 10:48:49