问题
I have a SPFx web part with Knockout framework. Its developed for SharePoint on premises (V1.1.0). Deployed all the Assets in the SharePoint library. Application is working fine in Chrome. But in IE, web part is not loaded in the page. Even I have not any console logs/errors. If I refresh the page with developer console open, it works.
I have removed all my console logs in the application, even I have removed the console logs from the bundled JS. Still web part is not loaded.
Then I thought it could be a problem with the order of loading the JS. So I have commented all code and package import statements. But no luck.
In Some Article, I found it could be a problem with Master page. So I have removed the custom Master and set back to settle master. But still have the issue.
Then, I have loaded the page with developer console open, I found an issue in console,
Object doesn't support property or method 'warn'
and it was thrown from sp-classic-page-assembly_en-us.js.
Also I can see the stack overflow error from sp-classic-page-assembly_en-us.js sometimes.
Below is the sample ViewModel.ts file code.
import * as ko from 'knockout';
import styles from './Search.module.scss';
import { ISearchWebPartProps } from './SearchWebPart';
import pnp, { SearchResults, Web, SearchResult, SortDirection } from 'sp-pnp-js';
import { QueryBuilder } from './Support/QueryBuilder';
import { SearchParameters } from './Entities/SearchParameters';
import { CommonFunctions } from './Support/CommonFunctions';
import { AppConstants } from './Constants/AppConstants';
import { ListNames } from './Constants/ListNames';
import { DocumentCategory } from './Entities/DocumentCategory';
import { ResultTableProperties } from './Entities/ResultTableProperties';
import { PinnedDocuments } from './Entities/PinnedDocuments';
import { SPComponentLoader } from '@microsoft/sp-loader';
import * as $ from "jquery";
import { Topics } from './Entities/Topics';
import { PinnedLists } from "./Entities/PinnedLists";
import { UserPinnedLists } from "./Entities/UserPinnedLists";
import { ConfigProperties } from "./Entities/ConfigProperties";
import { ConfigKeys } from "./Constants/ConfigKeys";
import 'jqueryui';
require('./es6-promise.auto.min.js');
let Swal: any = require('./sweetalert2.min.js');
let moment: any = require('./MyWIMS-I/js/moment.min.js');
require('./SwalStyles.css');
export interface ISearchBindingContext extends ISearchWebPartProps {
shouter: KnockoutSubscribable<{}>;
}
export default class SearchViewModel {
public resultTablePageSize: KnockoutObservable<number> = ko.observable(50);
public mmsName: KnockoutObservable<string> = ko.observable("");
public topicsTermID: KnockoutObservable<string> = ko.observable("");
public startPageNumber: KnockoutObservable<number> = ko.observable(1);
public lastPageNumber: KnockoutObservable<number> = ko.observable(1);
public currentPageNumber: KnockoutObservable<number> = ko.observable(1);
public pinnedDocumentsCount: KnockoutObservable<number> = ko.observable(0);
public isPrevEnabled: KnockoutObservable<boolean> = ko.observable(false);
public isNextEnabled: KnockoutObservable<boolean> = ko.observable(false);
public selectedCategory: KnockoutObservable<string> = ko.observable('');
public resultTableDocProperties: KnockoutObservableArray<ResultTableProperties> = ko.observableArray([]);
public rootCategoryDetails: KnockoutObservableArray<DocumentCategory> = ko.observableArray([]);
public topicsTerms: KnockoutObservableArray<Topics> = ko.observableArray([]);
public pinnedsectionDetails: KnockoutObservableArray<PinnedLists> = ko.observableArray([]);
public selectpinListDetails: KnockoutObservableArray<UserPinnedLists> = ko.observableArray([]);
public associatedLists: KnockoutObservableArray<string> = ko.observableArray([]);
public docToUnPin: KnockoutObservable<string> = ko.observable('');
public searchParameters: KnockoutObservable<SearchParameters> = ko.observable(new SearchParameters());
public openedPinnedList: KnockoutObservable<PinnedLists> = ko.observable(new PinnedLists());
public isLoading: KnockoutObservable<boolean> = ko.observable(true);
public isPinnedSectionOpen: KnockoutObservable<boolean> = ko.observable(false);
public webAbsUrl: string = '';
public webServRelUrl: string = '';
public docCategoryDetails: DocumentCategory[] = [];
private oWeb: Web = undefined;
constructor(bindings: ISearchBindingContext) {
this.webAbsUrl = bindings.webAbsUrl;
this.webServRelUrl = bindings.webServRelUrl;
this.isLoading(true);
this.resultTablePageSize(parseInt(bindings.pageSize));
this.mmsName(bindings.mmsName);
this.topicsTermID(bindings.topicsTermID);
this.oWeb = new Web(bindings.webAbsUrl);
SPComponentLoader.loadScript(this.webAbsUrl + '/_layouts/15/clienttemplates.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
});
SPComponentLoader.loadCss(this.webAbsUrl + '/SiteAssets/css/bootstrap.min.css');
SPComponentLoader.loadCss('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
SPComponentLoader.loadScript(this.webAbsUrl + '/SiteAssets/js/jquery-2.2.4.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
SPComponentLoader.loadScript(this.webAbsUrl + '/SiteAssets/js/jquery-ui.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
SPComponentLoader.loadScript(this.webAbsUrl + '/SiteAssets/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js', { globalExportsName: 'jQuery' }).then((): void => {
});
});
});
});
this.oWeb.currentUser.get().then((_currentUser: any) => {
this.currentUserID = _currentUser.Id;
this.GetUserPinnedLists();
const sessionKey: string = CommonFunctions.GetQueryStringParameter(AppConstants.CONST_Session_Key);
const _srchParams: SearchParameters = CommonFunctions.GetSearchParameters(sessionKey);
this.searchParameters(_srchParams);
this.InitiateWIMSSearch();
});
}
private GetUserPinnedLists(): void {
this.pinnedListsDetails = [];
this.oWeb.lists.getByTitle(ListNames.LIST_User_Specific_Pinned_Lists).items.filter("UserNameId eq " + this.currentUserID).orderBy("PinnedListOrder", true).get().then(_pinnedLists => {
if (_pinnedLists && _pinnedLists.length > 0) {
for (let i = 0; i < _pinnedLists.length; i++) {
this.pinnedListsDetails.push({ ListName: _pinnedLists[i].Title, ListID: _pinnedLists[i].ID, Documents: [], IsExpanded: false, IsSeeMoreVisible: true });
}
}
this.pinnedListsDetails.push({ ListName: AppConstants.CONST_DEFAULT_PinnedList, ListID: 1, Documents: [], IsExpanded: false, IsSeeMoreVisible: true });
}).catch(e => { this.LogException("GetUserPinnedLists", e); });
}
private InitiateWIMSSearch(): void {
this.GetTopicsTerms();
this.SearchDocuments(1);
}
}
来源：https://stackoverflow.com/questions/53701586/spfx-web-part-is-not-loading-in-ie-11