需要帮助让IE11使用Angular 1.5/Angular 10（ngUpgrade项目）

在我的ngUpgrade项目中，我遇到了让IE11工作的问题。我尝试了我所看到的一切，其他人也有类似的问题。我没有使用angular cli。独立网页包。我希望有人能看看我的代码，看看我的设置是否有任何明显的问题

这是我看到的IE11和一个空白页。

梅因酒店

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { setAngularLib } from '@angular/upgrade/static';
declare var angular: angular.IAngularStatic;

import { AppModule } from './app.module.ts';

// Scss
import './core/styles/temporary.scss'

export function importAll(r) {
  r.keys().forEach(r);
};

// Typescript
importAll(require.context('../src', true, /module\.ts$/));
importAll(require.context('../src', true, /(^(?!.*(spec|module)\.ts).*\.ts)$/));

// Coffescript
importAll(require.context('../src', true, /module\.coffee$/));
importAll(require.context('../src', true, /(^(?!.*(spec|module)\.coffee).*\.coffee)$/));

// Images
importAll(require.context('../src', true, /.*\.(png|svg|ico|webmanifest)$/));

// Translations
importAll(require.context('../src', true, /.*\.json$/));

setAngularLib(angular);
platformBrowserDynamic().bootstrapModule(AppModule);

vendor.ts

//IE11 polyfills
require("../node_modules/core-js/es5/index")
require("../node_modules/core-js/es6/symbol")
require("../node_modules/core-js/es6/object")
require("../node_modules/core-js/es6/function")
require("../node_modules/core-js/es6/parse-int")
require("../node_modules/core-js/es6/parse-float")
require("../node_modules/core-js/es6/number")
require("../node_modules/core-js/es6/math")
require("../node_modules/core-js/es6/string")
require("../node_modules/core-js/es6/date")
require("../node_modules/core-js/es6/regexp")
require("../node_modules/core-js/es6/map")
require("../node_modules/core-js/es6/weak-map")
require("../node_modules/core-js/es6/set")
require("../node_modules/core-js/es6/array")
require("../node_modules/core-js/es6/reflect")
require("../node_modules/core-js/es7/object")
require("../node_modules/core-js/es7/array")
require("../node_modules/core-js/es7/reflect")
require("../node_modules/classlist.js")
require("../node_modules/web-animations-js")
require("../node_modules/reflect-metadata")
require("../node_modules/zone.js/dist/zone")

require("../node_modules/messageformat/messageformat.js")
require("../node_modules/angular/angular.js")
require("../node_modules/angular-google-analytics/dist/angular-google-analytics.js")
require("../node_modules/@uirouter/angularjs/release/angular-ui-router.js")
require("../vendor-js/lodash.js")
require("../vendor-js/ui-bootstrap.js")
require("../node_modules/angular-cookies/angular-cookies.js")

ect....

巴别塔

{
  "presets": [
    ["@babel/preset-env",{
      "modules": false
    }]
  ],
  "plugins": ["babel-plugin-angularjs-annotate"]
}

package.json

{
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "NODE_ENV=development webpack --config webpack.dev.js",
    "prod": "NODE_ENV=production webpack --config webpack.prod.js",
    "tsc": "tsc"
  },
  "browserslist": [
    "Edge > 13",
    "Firefox > 50",
    "Safari > 10",
    "Explorer > 10",
    "Chrome > 60"
  ],
  "dependencies": {
    "@angular-devkit/schematics": "^9.1.8",
    "@angular/common": "10.1.2",
    "@angular/compiler": "10.1.3",
    "@angular/compiler-cli": "10.1.3",
    "@angular/core": "10.1.3",
    "@angular/forms": "10.1.3",
    "@angular/http": "7.2.16",
    "@angular/platform-browser": "10.1.3",
    "@angular/platform-browser-dynamic": "10.1.3",
    "@angular/router": "10.1.2",
    "@angular/upgrade": "10.1.3",
    "@ng-bootstrap/ng-bootstrap": "7.0.0",
    "@ngx-translate/core": "12.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "@uirouter/angularjs": "1.0.26",
    "angular": "1.8.0",
    "angular-animate": "1.8.0",
    "angular-cookies": "1.8.0",
    "angular-file-upload": "2.5.0",
    "angular-google-analytics": "1.1.8",
    "angular-locker": "2.0.5",
    "angular-messages": "1.8.0",
    "angular-mocks": "1.8.0",
    "angular-phone-input": "^1.0.1",
    "angular-sanitize": "1.8.0",
    "angular-touch": "1.8.0",
    "angular-translate": "2.18.2",
    "angular-translate-interpolation-messageformat": "2.18.2",
    "angular-translate-loader-static-files": "2.18.2",
    "angular-translate-storage-cookie": "2.18.2",
    "angular-translate-storage-local": "2.18.2",
    "angular-utils-pagination": "0.11.1",
    "angular-validation-match": "1.9.0",
    "angularjs-rails-resource": "2.3.1",
    "classlist.js": "^1.1.20150312",
    "clipboard": "2.0.6",
    "highcharts": "7.0.2",
    "highcharts-ng": "1.2.1",
    "merge-jsons-webpack-plugin": "1.0.21",
    "messageformat": "2.3.0",
    "moment": "2.26.0",
    "ng-device-detector": "5.1.4",
    "ng-idle": "1.3.2",
    "ngclipboard": "2.0.0",
    "ngmap": "1.18.5",
    "npm": "6.14.5",
    "popper.js": "^1.16.1",
    "re-tree": "0.1.7",
    "reflect-metadata": "0.1.13",
    "rxjs": "6.5.5",
    "ua-device-detector": "1.1.8",
    "web-animations-js": "^2.3.2",
    "zone.js": "0.11.1"
  },
  "devDependencies": {
    "@babel/core": "7.10.2",
    "@babel/plugin-transform-object-assign": "7.10.1",
    "@babel/polyfill": "7.10.1",
    "@babel/preset-env": "7.10.2",
    "@types/angular": "^1.6.57",
    "@types/webpack-env": "1.15.2",
    "autoprefixer": "9.8.0",
    "babel-loader": "8.1.0",
    "babel-plugin-angularjs-annotate": "0.10.0",
    "coffee-loader": "1.0.0",
    "coffeescript": "2.5.1",
    "css-loader": "3.5.3",
    "del": "5.1.0",
    "file-loader": "6.0.0",
    "filemanager-webpack-plugin": "2.0.5",
    "html-loader": "1.1.0",
    "html-webpack-plugin": "4.3.0",
    "jasmine-core": "3.5.0",
    "jquery": "3.5.1",
    "karma": "5.1.0",
    "karma-chrome-launcher": "3.1.0",
    "karma-coffee-preprocessor": "1.0.1",
    "karma-jasmine": "3.3.1",
    "karma-ng-html2js-preprocessor": "1.0.0",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-requirejs": "1.1.0",
    "mini-css-extract-plugin": "0.9.0",
    "node-sass": "4.14.1",
    "normalizr": "3.6.0",
    "postcss": "7.0.32",
    "q": "1.5.1",
    "require-dir": "1.2.0",
    "requirejs": "2.3.6",
    "sass-loader": "8.0.2",
    "string-replace-loader": "2.3.0",
    "style-loader": "1.2.1",
    "ts-loader": "7.0.5",
    "typescript": "3.9.5",
    "vinyl-paths": "3.0.1",
    "webpack": "4.43.0",
    "webpack-cli": "3.3.11",
    "webpack-merge": "4.2.2"
  },
  "resolutions": {
    "natives": "1.1.3"
  }
}

tsconfig

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "lib": ["es5", "es6", "dom"],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "outDir": "foo"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.common

const moment = require("./node_modules/moment/moment.js")

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin");
const FileManagerPlugin = require('filemanager-webpack-plugin');


const dest = process.env.NODE_ENV === 'production' ? './dist' : './dev'

const cacheBustId = process.env.NODE_ENV === 'production' ? '-' + moment('123120202', 'YYYYMMDD') : ''

module.exports = {
  module: {
    rules: [{
        test: /\.(html)$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: false,
              //minimize: process.env.NODE_ENV === 'production' ? true : false,
            },
          },
        ],
      },{
        test: /\.(js|coffee)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/env"
            ],
            plugins: [
              "@babel/plugin-transform-object-assign"
            ],
        }
      }
      },{
        "test": /\.coffee$/,
        "exclude": /node_modules/,
        "use": {
          loader: "coffee-loader"
        }
      },{
        test: /\.coffee$/,
        loader: 'string-replace-loader',
        options: {
          multiple: [
            { search: "'en-us': 'en-us.json'", replace: "'en-us': 'en-us" + cacheBustId + ".json'" },
            { search: "'es-us': 'es-us.json'", replace: "'es-us': 'es-us" + cacheBustId + ".json'" },
            { search: "'fr-ca': 'fr-ca.json'", replace: "'fr-ca': 'fr-ca" + cacheBustId + ".json'" }
          ]
        }
      },{
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
        parser: { system: true },  // enable SystemJS
      },{
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },{
        test: /\.(css|scss)$/,
        use: [{
          loader: MiniCssExtractPlugin.loader,
        },{
          loader: "css-loader"
        },{
          loader: "sass-loader"
        }]
      },{
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: process.env.NODE_ENV === 'production' ?  '[name]-[contentHash].[ext]' : '[name].[ext]',
              outputPath: '../fonts/'
            }
          }
        ]
      },{
        test: /\.(png|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: '../img/'
            }
          }
        ]
      },{
        test: /\.(ico|webmanifest)$/,
        loader: 'file-loader?name=[name].[ext]'
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: '../index.html',
      hash: process.env.NODE_ENV === 'production' ? true : false
    }),
    new MiniCssExtractPlugin({
      filename: '../css/styles.css'
    }),
    new MergeJsonWebpackPlugin({
      "output": {
        "groupBy": [
          {
            "pattern": "./src/**/en-us.json",
            "fileName": process.env.NODE_ENV === 'production' ? "../locales/en-us" + cacheBustId + ".json" : "../locales/en-us.json"
          },{
            "pattern": "./src/**/es-us.json",
            "fileName": process.env.NODE_ENV === 'production' ? "../locales/es-us" + cacheBustId + ".json" : "../locales/es-us.json"
          },{
            "pattern": "./src/**/fr-ca.json",
            "fileName": process.env.NODE_ENV === 'production' ? "../locales/fr-ca" + cacheBustId + ".json" : "../locales/fr-ca.json"
          }
        ]
      },
    })
  ]
};

webpack.dev

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: "development",
  entry: {
    poly: "@babel/polyfill",
    vendor: './src/vendor.js',
    app: "./src/main.ts"
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dev/js'
  },
  watch: true,
  stats: 'normal',
});

---

如果你想让它在IE11中工作，首先将IE11添加到你的浏览器列表中。

“Explorer>10”

你必须创建es5代码来支持IE11。所以你可能想研究一下网页包的差异化服务。我同意鲁本的建议，将IE 11添加到浏览器列表中。此外，您需要在tsconfig.json文件中设置

“target”：“es5”

，以使您的站点在IE浏览器中正常工作。必须采用差异加载方式。谢谢@fridoo