Angular - 材料組件在 IE11 中不起作用

Question

我正在使用 Angular 9 Material 組件來開發帶有輸入、日期選擇器和 select 框的簡單頁面。

它可以工作 Chrome 但不能工作 IE11。

在 IE 中出現以下錯誤：SCRIPT1002: Syntax error vendor.js (6164,30)

Vendor.js 中的腳本-->

/**
 * Adds the given ID to the specified ARIA attribute on an element.
 * Used for attributes such as aria-labelledby, aria-owns, etc.
 */

    function addAriaReferencedId(el, attr, id) {
        const ids = getAriaReferenceIds(el, attr);
        if (ids.some(existingId => existingId.trim() == id.trim())) {
            return;
        }
        ids.push(id.trim());
        el.setAttribute(attr, ids.join(ID_DELIMITER));
    }

任何幫助！ 提前致謝！

Answer 1

更新文件.browserslistrc 。 換行：

not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

至

IE 11

更新文件polyfills.ts 。 取消注釋這 2 行

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

運行此命令以添加 npm package。

npm install --save classlist.js

Answer 2

Thanks for the quick response!

steps i did,
1. updated the browsers list to "IE9-11"
2. Update the file polyfills.ts. Uncomment these 2 lines

import 'classlist.js';  // Run `npm install --save classlist.js`.
//import 'core-js/es6/reflect'; // es6 is not found , so commented the line 
Run this command to add the npm package.

npm install --save classlist.js


3. app.component.html-->

<mat-toolbar  color="primary"  class="fixed-header">
  <mat-toolbar-row>
  <a  routerLink="/home">My Logo</a>
</mat-toolbar-row>
</mat-toolbar>

included all required material imports in one material.module.ts and imported in app.module.ts

import { MyMaterialModule } from  './material.module';

material.module.ts -->

import { NgModule } from  '@angular/core';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatDialogModule} from  "@angular/material/dialog";
import {MatDatepickerModule} from  '@angular/material/datepicker';
import {MatRadioModule} from  '@angular/material/radio';
import {MatSelectModule} from  '@angular/material/select';
import {MatSliderModule} from  '@angular/material/slider';
import {MatDividerModule} from  '@angular/material/divider';
import {MatToolbarModule} from '@angular/material/toolbar'; 
import {MatCardModule} from '@angular/material/card';
import {MatInputModule} from '@angular/material/input';

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatNativeDateModule } from '@angular/material/core';


@NgModule({
imports: [MatFormFieldModule,MatDividerModule,MatSliderModule,MatSelectModule,MatRadioModule,MatDatepickerModule,MatDialogModule,
    MatToolbarModule,MatCardModule,
    MatInputModule,MatButtonModule,
    MatIconModule,MatNativeDateModule
],
exports: [MatFormFieldModule,MatDividerModule,MatSliderModule,MatSelectModule,MatRadioModule,MatDatepickerModule,MatDialogModule,
    MatToolbarModule,MatCardModule,
    MatInputModule,MatButtonModule,
    MatIconModule,MatNativeDateModule
],
})

export  class  MyMaterialModule { }


-----------------------

This simple header also not loading IE , Chrome working. 

Note : plain Html tags data is loading IE not issues with plain html code.`enter code here`

Facing issue with material components