Приложение Angular 7 не работает нормально в IE 11

Question

Приложение работает нормально в локальной среде во всех браузерах (включая IE 11).

Но после deployemnt оно не загружает главную страницу в IE, за исключением перехода на страницу ошибки по умолчанию.Это происходит только в IE 11.

Единственное, что я заметил, что IE удаляет косую черту в развернутой версии.

http://localhost:4200/ - отлично работает в IE, но http://myapplication.com/main/ не работает в IE, отображается страница ошибки.

Модуль маршрутизации приложений

const routes: Routes = [
  {path: '', loadChildren: './modules/customer/customer.module#CustomerModule'},
  {path: '**', component: ErrorpageComponent, data: {name: 'noMatch'}},
]; 

Клиентский модуль

const customerRoutes: Routes = [
  {
    path: '',
    component: CustomerComponent,
    children: [
      {path: '', component: OnboardingComponent},
      {path: '**', component: ErrorpageComponent, data: {name: 'noMatch'}}
    ]
  }
]; 

В IE после развертывания он всегда перенаправляется на ErrorPageComponent.Работая в локальном режиме, он хорошо работает и в IE.

Любая помощь приветствуется.

Редактировать

Я забыл упомянуть, что myapplication.com/main/ добавляется из nginx (на стороне сервера).На стороне клиента мы не добавляем main.

Я попытался запустить приложение в режиме Prod ng serve --prod, и он отлично работает в IE.После развертывания в Dev он не работает

Answer 1

Возможно, вам потребуется включить полифилы IE.Их можно найти в src / polyfills.ts, и вы можете раскомментировать следующее:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/   
import 'core-js/es6/symbol';   
import 'core-js/es6/object';   
import 'core-js/es6/function';   
import 'core-js/es6/parse-int';   
import 'core-js/es6/parse-float';   
import 'core-js/es6/number';   
import 'core-js/es6/math';   
import 'core-js/es6/string';   
import 'core-js/es6/date';   
import 'core-js/es6/array';   
import 'core-js/es6/regexp';  
import 'core-js/es6/map';  
import 'core-js/es6/weak-map';  
import 'core-js/es6/set';

Answer 2

Наконец-то я нашел проблему и исправил ее, поделившись здесь, поскольку это может помочь другим.Я добавил относительный путь в app.module, и он начал работать в IE.

Appmodule

export function getBaseHref(): string {
  return window.location.pathname;
} 

....

providers: [{
  provide: APP_BASE_HREF,
  useFactory: getBaseHref,
}], 

Answer 3

Я подозреваю, что вам нравится видеть OnboardingComponent, если вы перейдете к myapplication.com/main/.В этом случае вы должны добавить main к пути вашего OnboardingComponent.

 {path: 'main', component: OnboardingComponent},

Конечно, вам придется использовать это в вашем местном окружении также с localhost:4200/main/.