2017-08-02 153 views
4

我正在使用Angular 4 Universal Starter,并将我所有的Angular 2代码都集成到了此启动器中。一切工作正常,但在终端我得到这个奇怪的错误。不知道是什么问题Angular 4 Universal this.html.charCodeAt不是函数

ERROR TypeError: this.html.charCodeAt is not a function at Preprocessor.advance (/home/user/node/project/dist/server.js:152260:24) at Tokenizer._consume (/home/user/node/project/dist/server.js:45694:30) at Tokenizer.getNextToken (/home/user/node/project/dist/server.js:45652:23) at Parser._runParsingLoop (/home/user/node/project/dist/server.js:102429:36) at Parser.parseFragment (/home/user/node/project/dist/server.js:102384:10) at Object.parseFragment (/home/user/node/project/dist/server.js:55136:19) at Parse5DomAdapter.setInnerHTML (/home/user/node/project/dist/server.js:53609:49) at Parse5DomAdapter.setProperty (/home/user/node/project/dist/server.js:53250:18) at EmulatedEncapsulationServerRenderer2.DefaultServerRenderer2.setProperty (/home/user/node/project/dist/server.js:54766:94) at setElementProperty (/home/user/node/project/dist/server.js:9982:19)

及其下面的代码在server.js造成由于

Preprocessor.prototype.advance = function() { 
    this.pos++; 

    if (this.pos > this.lastCharPos) { 
     if (!this.lastChunkWritten) 
      this.endOfChunkHit = true; 

     return $.EOF; 
    } 

    var cp = this.html.charCodeAt(this.pos); // Error Occurs here 

    //NOTE: any U+000A LINE FEED (LF) characters that immediately follow a U+000D CARRIAGE RETURN (CR) character 
    //must be ignored. 
    if (this.skipNextNewLine && cp === $.LINE_FEED) { 
     this.skipNextNewLine = false; 
     this._addGap(); 
     return this.advance(); 
    } 

    //NOTE: all U+000D CARRIAGE RETURN (CR) characters must be converted to U+000A LINE FEED (LF) characters 
    if (cp === $.CARRIAGE_RETURN) { 
     this.skipNextNewLine = true; 
     return $.LINE_FEED; 
    } 

    this.skipNextNewLine = false; 

    //OPTIMIZATION: first perform check if the code point in the allowed range that covers most common 
    //HTML input (e.g. ASCII codes) to avoid performance-cost operations for high-range code points. 
    return cp >= 0xD800 ? this._processHighRangeCodePoint(cp) : cp; 
}; 

this.html typeof将返回“串”,但之前出错它返回下面的对象。

{ treeAdapter: 
    { createDocument: [Function], 
    createDocumentFragment: [Function], 
    createElement: [Function], 
    createCommentNode: [Function], 
    appendChild: [Function], 
    insertBefore: [Function], 
    setTemplateContent: [Function], 
    getTemplateContent: [Function], 
    setDocumentType: [Function], 
    setDocumentMode: [Function], 
    getDocumentMode: [Function], 
    detachNode: [Function], 
    insertText: [Function], 
    insertTextBefore: [Function], 
    adoptAttributes: [Function], 
    getFirstChild: [Function], 
    getChildNodes: [Function], 
    getParentNode: [Function], 
    getAttrList: [Function], 
    getTagName: [Function], 
    getNamespaceURI: [Function], 
    getTextNodeContent: [Function], 
    getCommentNodeContent: [Function], 
    getDocumentTypeNodeName: [Function], 
    getDocumentTypeNodePublicId: [Function], 
    getDocumentTypeNodeSystemId: [Function], 
    isTextNode: [Function], 
    isCommentNode: [Function], 
    isDocumentTypeNode: [Function], 
    isElementNode: [Function] } } 

下面是我的通用server.ts

import 'zone.js/dist/zone-node'; 
import 'reflect-metadata'; 
import 'rxjs/Rx'; 
import * as express from 'express'; 
import { Request, Response } from 'express'; 
import { platformServer, renderModuleFactory } from '@angular/platform-server'; 
import { ServerAppModule } from './app/server-app.module'; 
import { ngExpressEngine } from '@nguniversal/express-engine'; 
import { ROUTES } from './routes'; 
import { enableProdMode } from '@angular/core'; 
enableProdMode(); 
const app = express(); 
const port = 4200; 
const baseUrl = `http://localhost:${port}`; 

app.engine('html', ngExpressEngine({ 
    bootstrap: ServerAppModule 
})); 

app.set('view engine', 'html'); 
app.set('views', 'src'); 

app.use('/', express.static('dist', {index: false})); 

// ROUTES.forEach((route: string) => { 
    app.get('/*', (req: Request, res: Response) => { 
    console.time(`GET: ${req.originalUrl}`); 
    res.render('../dist/index', { 
     req: req, 
     res: res 
    }); 
    console.timeEnd(`GET: ${req.originalUrl}`); 
    }); 
// }); 

app.listen(port,() => { 
    console.log(`Listening at ${baseUrl}`); 
}); 
  • Node: v6.9.2
  • Angular: 4.1.0
+0

不显示'server.js'的内容,你的问题不能解决。 –

+0

@ShanevandenBogaard对不起,我刚刚更新了我的问题。我正在使用与angular 4通用启动程序中给出的相同server.ts文件 – mohit

+0

您可以检查预处理程序实例中的“html”字段的类型。 –

回答

5

我使用

<div [innerHTML]="someHtml"></div> 

时遇到了同样的错误,但我* ngIf = “someHtml” 解决它像这

<div *ngIf="someHtml" [innerHTML]="someHtml"></div> 

希望这也适用于你!

+0

真棒!它的工作原理:D – mohit