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

Question

I m using Angular 9 Material components to develop simple page with input,date picker and select box.

It is working Chrome but not working IE11.

Getting the following error in IE: SCRIPT1002: Syntax error vendor.js (6164,30)

Script in 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));
    }

Any help!! Thanks in advance!

Answer 1

Update the file .browserslistrc . Change the line:

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

to

IE 11

Update the file polyfills.ts . Uncomment these 2 lines

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

Run this command to add the 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