时间戳

首页 > 解决方案 > Angular - 材料组件在 IE11 中不起作用

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

问题描述

我正在使用 Angular 9 Material 组件开发带有输入、日期选择器和选择框的简单页面。

它可以工作 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));
    }

任何帮助！提前致谢！

标签： angular

解决方案

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

推荐阅读