CODEWITHSUNDEEP
angularwebpackangular2-cli
TheUnreal
TheUnreal

Reputation: 24492

Uncaught TypeError: this._input.charCodeAt is not a function

I created an Angular 2 project using Angular 2 CLI and used ng build --prod command and got no errors.

When I upload the dist folder into my website, I get the following error when the app loads:

enter image description here

Uncaught TypeError: this._input.charCodeAt is not a function_Tokenizer._advance @ main .688167 c….bundle.js: 1716 _Tokenizer @ main .688167 c….bundle.js: 1716 tokenize @ main .688167 c….bundle.js: 1709 Parser.parse @ main .688167 c….bundle.js: 219 HtmlParser.parse @ main .688167 c….bundle.js: 380 DirectiveNormalizer.normalizeLoadedTemplate @ main .688167 c….bundle.js: 598 DirectiveNormalizer.normalizeTemplateSync @ main .688167 c….bundle.js: 598 DirectiveNormalizer.normalizeDirective @ main .688167 c….bundle.js: 598 RuntimeCompiler._createCompiledTemplate @ main .688167 c….bundle.js: 1090(anonymous
function) @ main .688167 c….bundle.js: 1090(anonymous
function) @ main .688167 c….bundle.js: 1090 RuntimeCompiler._compileComponents @ main .688167 c….bundle.js: 1090 RuntimeCompiler._compileModuleAndComponents @ main .688167 c….bundle.js: 1090 RuntimeCompiler.compileModuleAsync @ main .688167 c….bundle.js: 1090 PlatformRef_._bootstrapModuleWithZone @ main .688167 c….bundle.js: 717 PlatformRef_.bootstrapModule @ main .688167 c….bundle.js: 717(anonymous
function) @ main .688167 c….bundle.js: 1509 __webpack_require__ @ inline.js: 1(anonymous
function) @ main .688167 c….bundle.js: 2131 __webpack_require__ @ inline.js: 1 window.webpackJsonp @ inline.js: 1(anonymous
function) @ main .688167 c….bundle.js: 1

I'm using the latest Angular 2 CLI with webpack and Angular 2 RC.7

What could have gone wrong?

The this._input.charCodeAt is only used in the angular compiler folder as below: enter image description here

Upvotes: 12

Views: 12541

Answers (3)

Nupin
Nupin

Reputation: 101

The raw-loader has changed. You have to use .default when requiring the xlf file.

const translations = require('raw-loader!./i18n/messages.ko.xlf').default;

I faced same issue when I have updated @ngx-translate/i18n-polyfill to version 1.0.0 in my angular project. And issue has fixed when I implemented above changes

Refer: ngx-translate/i18n-polyfill Issue#60

Upvotes: 10

Mikhail Nasyrov
Mikhail Nasyrov

Reputation: 898

A following debug code helped me a lot to find out which template was incorrectly imported.

Inject a next snippet to compiler's _Tokenizer in your ./node_modules/@angular/compiler/bundles/compiler.umd.js (or other bundle which are used):

function _Tokenizer(_file, _getTagDefinition, _tokenizeIcu, _interpolationConfig) {
    // ...
    try {
        this._advance();
    } catch (e) {
        console.log('[Tokenizer Error]: ' + _file && JSON.stringify(_file, null, 2));
        throw e;
    }
}

See a screenshot as example:

enter image description here

Upvotes: 0

tomaszbak
tomaszbak

Reputation: 8287

Might be caused by loading component code instead of template, i.e.

templateUrl: 'my.component'

instead of

templateUrl: 'my.component.html'

Upvotes: 49

Related Questions