1

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

Any suggestions would be helpful. Thanks.

7
  • can you share some sample code ? Dec 10, 2018 at 9:08
  • @GautamSheth, Thanks, updated the question with sample code. Dec 10, 2018 at 9:48
  • replace const in your code with let or var. It should start working. Dec 10, 2018 at 9:55
  • Hi @GautamSheth, I don't think so. Because the app is working fine in another test environment. How const will make a problem? Dec 10, 2018 at 9:59
  • Usually, const is a newer declaration and it gave some some weird errors while using it in IE 11, changing them to var or let fixed it for me. Can you give it a try and check ? Dec 10, 2018 at 10:14

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.