Angular 2 TypeError:无法读取null的属性“动画" [英] Angular 2 TypeError: Cannot read property 'animate' of null

问题描述

我正在使用Chrome 51和Angular 2.rc4，并在加载我的角度应用程序时在控制台中弹出以下错误消息.

I'm using Chrome 51 and Angular 2.rc4 and following errors popup in the console when loading my angular app.

TypeError: Cannot read property 'animate' of null
at e.supportsWebAnimation (platform-browser.umd.js:2232)
at st (platform-browser.umd.js:2896)
at t._instantiate (core.umd.js:6370)
at t._instantiateProvider (core.umd.js:6311)
at t._new (core.umd.js:6300)
at t.getObjByKeyId (core.umd.js:5954)
at t._getByKeyDefault (core.umd.js:6480)
at t._getByKey (core.umd.js:6452)
at t._getByReflectiveDependency (core.umd.js:6442)
at t._instantiate (core.umd.js:6342)
at c (vendors.js:3)
at vendors.js:3
at t.invokeTask (vendors.js:3)
at Object.onInvokeTask (core.umd.js:9091)
at t.invokeTask (vendors.js:3)
at t.runTask (vendors.js:3)
at s (vendors.js:3)
at XMLHttpRequest.invoke (vendors.js:3)

如果我再次刷新它，它会消失并且应用程序可以正常加载.当我进一步研究它时，我发现以下有问题的代码，其中文件的 body 在文件 platform-b​​rowser.umd中似乎为 null ..js .

If i refresh it again it disappears and the app loads fine. When i dig into it a bit more, i found out the following problematic code where the body of the document seems to be null in file platform-browser.umd.js.

BrowserDomAdapter.prototype.supportsWebAnimation = function () {
        return isFunction(document.body['animate']);
};

我正在使用systemjs-builder绑定角度组件，如下所示:

I am using systemjs-builder for bundline the angular components, like so:

//Bundle auth module to a single script file
gulp.task('bundle_auth', ['bundle_vendors'], function() {
var builder_auth = new Builder('', 'assets/js/dependencies/config/auth.system.js');
return builder_auth
    .buildStatic('assets/app/auth/main.js', 'assets/dist/js/auth/bundle.js', { minify: true, sourceMaps: true })
    .then(function() {
        //console.log('Build complete for auth module');
    })
    .catch(function(err) {
        console.log(err);
    });
});

如果需要，这是我的 systemjs 配置:

And here is my systemjs config, if needed:

(function(global) {

// map tells the System loader where to look for things
var map = {
    'app' : 'assets/app/auth',
    '@angular': 'node_modules/@angular',
    'ng2-translate': 'node_modules/ng2-translate',
    'rxjs': 'node_modules/rxjs', // added this map section
    'primeng': 'node_modules/primeng',
    'angular2-recaptcha': 'node_modules/angular2-recaptcha'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app': { main: 'assets/app/auth/main.js',  defaultExtension: 'js'},
    'rxjs': { defaultExtension: 'js' },
    'primeng': {defaultExtension: 'js'},
    'angular2-recaptcha': {defaultExtension: 'js'}
};

var packageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'forms',
    'platform-browser',
    'platform-browser-dynamic',
    'router'
];

// Individual files (~300 requests):
function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}

// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

// Add package entries for angular packages
packageNames.forEach(setPackageConfig);

var config = {
    defaultJSExtensions: true,
    map: map,
    packages: packages
};

System.config(config);

})(this);

此问题仅在Chrome中发生.

This issue only happens in chrome.

编辑

这是角度引导文件:

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './component/app.component';
import {HTTP_PROVIDERS} from '@angular/http';
import {HttpService} from '../common/service/http.service';
import {enableProdMode} from '@angular/core';
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import {APP_ROUTER_PROVIDERS} from '../routes/auth.routes';
import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';

enableProdMode();
bootstrap(AppComponent,[
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    TRANSLATE_PROVIDERS,
    HttpService,
    disableDeprecatedForms(),
    provideForms()
]).catch(err => console.error(err));

推荐答案

我认为您将捆绑的js文件包含在index.html的头部部分中，但是您应该将这些文件转移到应用程序下的主体部分中.

I think you include your bundled js files inside of the head section in the index.html but you should transfer those to the body part under your app.

为了更加清晰，我将应用程序转移到webpack后，我遇到了完全相同的问题.

For being more clear after i transfered my application to webpack i had exactly same issue.

例如，

<!DOCTYPE html>
<html>
<head>
    <base href="">

    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="prod/vendor.js"></script>
    <script src="prod/app.js"></script>
</head>

<body>
    <app-one>
        Loading...
    </app-one>
</body>

</html>

我这样转移了脚本

<!DOCTYPE html>
<html>
<head>
    <base href="">

    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>
    <app-one>
        Loading...
    </app-one>
  
    <script src="prod/vendor.js"></script>
    <script src="prod/app.js"></script>
</body>

</html>

这篇关于Angular 2 TypeError:无法读取null的属性“动画"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！