按照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
。
目前还需要解决的问题有两个:
AOT
:预编译,目前的Webpack
打包后的js还是需要在加载后,动态处理生成ngFactory
的。用AOT
的话,就能预先编译,增加加载速度了。目前不使用AOT
执行的时间大概在0.8s
。摇树优化
:Angular包还是很大的,在import
的时候,需要按需加载(使用的模块),而不是加载整个文件。
还可以优化的地方:
试试
Web Workers
webpack+aot可以看下我的starter,这个是之前做的,现在更换aot方式了,推荐使用@ngtools/webpack插件