Question

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

它可以在Chrome上运行，但不能在IE11上运行。

在IE中获取以下错误： SCRIPT1002：语法错误 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软件包。

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

角度-材质组件在IE11中不起作用

2 个答案: