AnimationRendererFactory AOT：无法读取未定义的属性“ createRenderer”

Question

I am trying to compile my angular4 app AOT and am stuck on the error:

TypeError: Cannot read property 'createRenderer' of undefined
at AnimationRendererFactory.createRenderer (http://localhost:8080/cwp/static/app.bundle.undefined.js:114555:54)
at DebugRendererFactory2.createRenderer (http://localhost:8080/cwp/static/app.bundle.undefined.js:13319:49)
at createRootData (http://localhost:8080/cwp/static/app.bundle.undefined.js:12759:53)

Here are my relevant configs:

tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmit": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "strictNullChecks": false,
    "lib": [
      "es2015",
      "dom"
    ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "include": [
    "app/app.module.ts",
    "app/**/*.ts",
    "app/main.aot.ts"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "**/*.spec.ts",
    "**/*.e2e.ts",
    "test",
    "app/main.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "compiled",
    "skipMetadataEmit": true
  }
}

webpack.config

var webpack = require('webpack');
const helpers = require('./helpers');

var version = '.' + process.env.version;

module.exports = function MakeConfig() {
    var config = {};

    config.entry = {
        'polyfills': './polyfills.ts',
        'app': ['./app/main.aot.ts' ]
    };

    config.output = {
        path: helpers.root('dist'),
        filename: "./[name].bundle" + version + ".js",
        chunkFilename: "./[id].chunk" + version + ".js",
        publicPath: '/cwp/static/'
    };

    config.module = {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader'
                    },
                    {
                        loader: 'angular2-template-loader'
                    },
                    {
                        loader: 'angular-router-loader?aot=true&genDir=compiled'
                    }
                ],
                exclude: [/\.(spec|e2e)\.ts$/]
            },

            /* Raw loader support for *.html
             * Returns file content as string
             *
             * See: https://github.com/webpack/raw-loader
             */
            {
                test: /\.(css|html)$/,
                use: 'raw-loader'
            },
            {
                test: /jquery/,
                loader: 'expose-loader?$!expose-loader?jQuery'
            }
        ]
    };

    config.plugins = [

    ];

    config.resolve = {
        extensions: ['.ts', '.js', '.css', '.html']
    };

    return config;
}();

main.aot.ts

import { platformBrowser } from '@angular/platform-browser';

import { AppModuleNgFactory } from '../compiled/app/app.module.ngfactory';

let Highcharts = require('highcharts/highstock');
require('highcharts/modules/map')(Highcharts);
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
require('highcharts/modules/exporting')(Highcharts);

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

I am using angular v4.1.0 and webpack v2.4.1.

Has anyone encountered something similar?

Answer 1

Maybe it's too late, but try to add <meta charset="utf-8"> to your index.html. The reason is that Angular requires utf-8 ( https://github.com/angular/angular/issues/15638#issuecomment-293084801 )

Source: https://github.com/angular/angular/issues/15008#issuecomment-294234685