locked
Angular Template vendor.js errors RRS feed

  • Question

  • User912300892 posted

    I am just starting to learn Angular.  I have VS 2017 and I created a new project using the Web --> ASP.NET Core Web Application --> Angular template.

    When I press go and the application starts using IIS Express, I get the following error.  Can someone help me resolve it?

    Unhandled exception at line 33893, column 5 in http://localhost:58077/dist/vendor.js?v=9ctzbS0ikla4GoIO8m21qp805HAfs2-bXTOOGaEjQS0
    0x800a138f - JavaScript runtime error: Unable to get property 'apply' of undefined or null reference occurred

    When I F5 past the error, the web page starts and looks beautiful.  How do I get a clean startup?

    Thanks for your help,

    Joel

    Sunday, February 25, 2018 6:36 PM

Answers

  • User283571144 posted

    Hi Joel Palmer,

    According to your description, this error is related with Polyfills.

    To be more specific, IE11 doesn't implement 'apply' function; thus we need to ensure the polyfills are loaded before Angular.

    I suggest you could try below way to solve this issue.

    Add the following code into ‘boot-client.ts’ in ClientApp folder in your ASP.NET core project.

    /** 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/set';

    More details, you could refer to this article.

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 26, 2018 7:44 AM

All replies

  • User283571144 posted

    Hi Joel Palmer,

    According to your description, this error is related with Polyfills.

    To be more specific, IE11 doesn't implement 'apply' function; thus we need to ensure the polyfills are loaded before Angular.

    I suggest you could try below way to solve this issue.

    Add the following code into ‘boot-client.ts’ in ClientApp folder in your ASP.NET core project.

    /** 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/set';

    More details, you could refer to this article.

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 26, 2018 7:44 AM
  • User912300892 posted

    Thanks for your help.  The template actually creates the following typescript classes:

    • boot.browser.ts
    • boot.server.ts

    So, I added your code to the top of my boot.browser.ts class (included below).  I continue to get the error

    /** 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/set';
    
    import 'reflect-metadata';
    import 'zone.js';
    import 'bootstrap';
    import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app/app.browser.module';
    
    if (module.hot) {
        module.hot.accept();
        module.hot.dispose(() => {
            // Before restarting the app, we create a new root element and dispose the old one
            const oldRootElem = document.querySelector('app');
            const newRootElem = document.createElement('app');
            oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
            modulePromise.then(appModule => appModule.destroy());
        });
    } else {
        enableProdMode();
    }
    
    // Note: @ng-tools/webpack looks for the following expression when performing production
    // builds. Don't change how this line looks, otherwise you may break tree-shaking.
    const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);
    

    Monday, February 26, 2018 3:47 PM
  • User912300892 posted

    Actually, I must of had something cached.  I created a new project from the template, added these imports and tried it.  It got me past the errors.  Thanks.

    Monday, February 26, 2018 3:55 PM