带有 Angular2 的 Ie11 中的语法错误 (AngularQuickStart 2.4.0 )答案

【问题标题】：Syntax error in Ie11 with Angular2 (AngularQuickStart 2.4.0 )带有 Angular2 的 Ie11 中的语法错误 (AngularQuickStart 2.4.0 )
【发布时间】：2023-03-25 15:10:02
【问题描述】：

当我尝试在 IE11 中运行我的 angular2 应用程序时，我在浏览器控制台中遇到了这样的错误。

“Недопустимый знак”表示不可接受的符号这是我的索引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>

这是我的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": {}
}

这是我的 tsconfig.json

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

我现在不是第一个遇到此类问题的人，但我找到的任何解决方案都对我无效

【问题讨论】：

我认为这里的大多数社区都不会说俄语，也许您可以澄清错误。
“Недопустимый знак”表示不可接受的符号

标签： angular typescript internet-explorer-11

【解决方案1】：

我使用 Angular QuickStart v 2.4.0。问题出在 src/systemjs-angular-loader.js 中。它具有字符串格式和 URL 构造函数的语法糖。 IE 不支持这两个。所以有 systemjs-angular-loader.js 用于快速入门 2.4.0（在 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;
};

【讨论】：