Приложение Angular 8 не запущено в IE11

ProgramBox

Приложение Angular 8 не запущено в IE11

Post author:admin
Запись опубликована:7 марта, 2023
Post category:Вопросы по программированию

#angular #typescript #internet-explorer-11 #angular8

Вопрос:

Я пытался запустить свое приложение Angular 8 в IE11. До сих пор я пробовал все шаги, описанные в этой статье, Angular 8 и IE 11

и все еще получаю ошибки, как на этом рисунке -> консоль IE

ниже приведены связанные файлы :

Polyfills.ts:

     /***************************************************************************************************
 * BROWSER POLYFILLS
 */


/** IE10 and IE11 requires the following for NgClass support on SVG elements */

import 'classlist.js';  // Run `npm install --save classlist.js`.


/*

 * Web Animations `@angular/platform-browser/animations`

 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.

 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).

 */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

** IE9, IE10 and IE11 requires all of the following polyfills. **/

import 'core-js/es/symbol';

import 'core-js/es/promise';

import 'core-js/es/object';

import 'core-js/es/function';

import 'core-js/es/parse-int';

import 'core-js/es/parse-float';

import 'core-js/es/number';

import 'core-js/es/math';

import 'core-js/es/string';

import 'core-js/es/date';

import 'core-js/es/array';

import 'core-js/es/regexp';

import 'core-js/es/map';

import 'core-js/es/weak-map';

import 'core-js/es/set';

import 'zone.js/dist/zone';  // Included with Angular CLI.

СПИСОК БРАУЗЕРОВ:

 // > 0.5%

last 2 versions

Firefox ESR

not dead

 IE 9-11 # For IE 9-11 support, remove 'not'.

TSCONFIG.JSON:

 {
  "compileOnSave": false,

  "compilerOptions": {

    "baseUrl": "./",

    "outDir": "./dist/out-tsc",

    "sourceMap": true,

    "declaration": false,

    "downlevelIteration": true,

    "experimentalDecorators": true,

    "module": "esnext",

    "moduleResolution": "node",

    "importHelpers": true,

    "target": "es5",

    "typeRoots": [

      "node_modules/@types"

    ],

    "lib": [

      "es2018",

      "dom"

    ]
  },

  "angularCompilerOptions": {

    "fullTemplateTypeCheck": true,

    "strictInjectionParameters": true
  }
}

WEB.CONFIG:

 <?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=301879
  -->
<configuration>
  <connectionStrings>
   
  </connectionStrings>
  <system.web>
    <customErrors mode="Off"></customErrors>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" maxRequestLength="100000" />
  </system.web>
 <appSettings>
  
  
 </appSettings>

<system.webServer>
 

     <modules>
      <remove name="UrlRewriteModule" />
        <remove name="UmbracoModule" />
        <remove name="ClientDependencyModule" />
        <remove name="ImageProcessorModule" />
    </modules>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0"/>
      <remove name="OPTIONSVerbHandler"/>
      <remove name="TRACEVerbHandler"/>
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler"
        preCondition="integratedMode,runtimeVersionv4.0"/>
    </handlers>


    <rewrite>
            <rules>
                <rule name="AddTrailingSlashRule1" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                            <!-- <add input="{REQUEST_URI}" matchType="^/(api)" negate="true" /> -->
                    </conditions>
                    <action type="Rewrite" url="/motorclaims/"  />
                </rule>
            </rules>
        </rewrite>

  </system.webServer>

  </configuration>

ANGULAR.JSON:

 {

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",

  "version": 1,

  "newProjectRoot": "projects",

  "projects": {

    "sample": {

      "projectType": "application",
      "schematics": {

        "@schematics/angular:component": {

          "style": "scss"

        }

      },
      "root": "",

      "sourceRoot": "src",

      "prefix": "app",

      "architect": {
        "build": {

          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/sample",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ],
            "styles": [
              "src/styles.scss",
              "src/assets/css/datepicker.min.css"
            ],
            "scripts": [
              "src/assets/js/jquery-3.4.1.min.js",
              "src/assets/js/jquery.mb.slider.js",
              "src/assets/js/jquery.validate.min.js",
              "src/assets/js/materialize.js",
              "src/assets/js/messages.js",
              "src/assets/js/select.js",
              "src/assets/js/new_date_picker.js",
              
              "src/assets/js/sample.js",
              "src/assets/Loader.hyperesources/loader_hype_generated_script.js",
              "src/assets/Loader.hyperesources/HYPE-674.thin.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            },
            "uat":{
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.uat.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "sample:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "sample:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "sample:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "sample:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "sample:serve:production"
            },
            "uat": {
              "devServerTarget": "sample"
            }
          }
        }
      }
    }
  },
  "defaultProject": "sample"
  
}

PACKAGE.JSON

   {

  "name": "sample",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/http": "^7.2.16",
    "@angular/material": "^9.2.1",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@babel/compat-data": "^7.8.0",
    "@types/jquery": "^3.3.36",
    "classlist.js": "^1.1.20150312",
    "jquery": "^3.5.0",
    "moment": "^2.27.0",
    "ngx-image-compress": "^8.0.4",
    "rxjs": "~6.4.0",
    "rxjs-compat": "^6.5.5",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.24",
    "@angular/cli": "~8.2.0",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

** Кроме того, решение должно работать с ng build.

1. Как говорилось в статье, нам не нужно сначала раскомментировать файл polyfills.ts в Angular 8. Для поддержки нового приложения Angular 8 вам нужно только выполнить эти шаги и изменить список браузеров . Кроме того, об ошибке освобожденного скрипта я нашел эту тему . Если ваш проект сгенерирован в Angular CLI, вы можете добавить (window as any).__Zone_enable_cross_context_check = true; перед этой строкой import 'zone.js/dist/zone'; . Пожалуйста, попробуйте эти исправления и сообщите нам результат.

2. @YuZhou привет, спасибо за ваш ответ произошла ошибка скрипта, которая вызвала беспорядок. Хотя изменение es2015 на es5 сработало для меня.

3. Рад, что вы решили проблему. Вы можете опубликовать свое решение в качестве ответа и пометить свой ответ как принятый. В будущем это может помочь другим членам сообщества в подобных проблемах. Спасибо за понимание.

Ответ №1:

спасибо, что помогли мне. Решение, которое сработало для меня, меняется

 "target": "es2015",

Для

 "target": "es5",

в файле tsconfig.json. Кроме того, раньше у меня это не работало, потому что у меня был файл сценария в активах, который вызывал ошибки. Как только я удалил его из проекта, он отлично работал в IE11.
Итак, для дальнейшего использования, пожалуйста, проверьте свои файлы ресурсов перед внесением каких-либо изменений для IE11, чтобы избежать подобных ошибок.

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Отключите RealityKit/ARKit при сборке в симуляторе xcode

Многоточие заканчивается при редактировании текста в цепочке в макете ограничений

Как задать путь к исполняемому файлу для пакета в файле конфигурации в Emacs?