javascript - 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没写好。

看了下 AMD，UMD，CommonJS，应该是用的CommonJS，看重点看下CommentJS.

但我AoT的配置文件应该是设置的module为es2015/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

解决方案

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

这篇关于javascript - Angular2在优化首页的时候，使用AoT碰到问题，require('app.module.ngfactory')失败。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！