Angular2在优化首页的时候,使用AoT碰到问题,require('app.module.ngfactory')失败。

按照AoT的文档配置,并成功编译通过后,访问页面。

发现提示SyntaxError: Unexpected token <,其实是因为请求获取到xxx.com/aot/app/app.module.ngfactory后返回了html页面导致,解析失败,其实这个请求应该是xxx.com/aot/app/app.module.ngfactory.js

见下图:

请求app.module.ngfactory返回的是html页面

图片描述

app.module.ngfactory.js文件是有的,直接通过URL也是能访问的

图片描述

之前以为是Nginx路由配置的问题,后面切换Lite后,发现还是一样

不知道大家有没有碰到过类似问题.

================== [ 10-12 11:26 ] ===================

补充下,感觉根本原因是:

require('xxxx'); 的时候, 发起的请求去加载了xxxx,而不是xxxx.js,怀疑是不是mapping没写好。

看了下 AMDUMDCommonJS,应该是用的CommonJS,看重点看下CommentJS.

但我AoT的配置文件应该是设置的modulees2015/es6

配置文件:tsconfig-aot.json

"compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "types": []
  },

好吧,我把配置文件tsconfig.json删除后,能正常编译出es2015格式的了。

我执行的命令是:node_modules/.bin/ngc -p tsconfig-aot.json, 不知道为啥会读tsconfig.json

现在是另外的错误了:

404,没找到traceur,这个是JS的编译器TC,应该是JiT方式下才有的,按理我使用AoT方式后,预先编译,就不会加载这个编译器了。应该是哪里配置有误导致的。

=========== 10-28 17:30 =============

前面格式自动转换为commonjs的原因找到了...是PHPStorm读取配置文件tsconfig.json自动转换的。

不用Systemjs了,感觉不好使,换了Webpack。已经能正常打包成压缩后的文件了。不过依旧有900k

目前还需要解决的问题有两个:

  1. AOT:预编译,目前的Webpack打包后的js还是需要在加载后,动态处理生成ngFactory的。用AOT的话,就能预先编译,增加加载速度了。目前不使用AOT执行的时间大概在0.8s

  2. 摇树优化:Angular包还是很大的,在import的时候,需要按需加载(使用的模块),而不是加载整个文件。

还可以优化的地方:

  1. 试试Web Workers

阅读 7.5k
4 个回答

webpack+aot可以看下我的starter,这个是之前做的,现在更换aot方式了,推荐使用@ngtools/webpack插件

angular-cli 好像支持AOT了。。。但是没有实际使用过我也不知道你的问题能不能靠这个解决

先放在这里,等最后上线的时候,再来解决这个问题。

新手上路,请多包涵

webpack 和 aot 该怎么结合

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题