素材巴巴 > 程序开发 >

angular 编译错误, 提示组件成员 private 错误

程序开发 2023-09-07 11:17:41

0. bug
       ① 在ng s -o 开发环境下正常
       ②使用ng build --prod 以后报错
在这里插入图片描述
在这里插入图片描述
1. angular的2种编译方式 (编译的时机不同,即执行ng编译器 ngc的时间不同)

      ① ng build,ng server,ng server --open, 使用的是 即时编译(JIT)-在运行期间编译该应用,也就是在浏览器加载应用时编译。(默认使用的编译方式就是JIT)。
          即JIT是浏览器在渲染页面的时候先把Angular编译器下载到本地,然后把HTML模板编译成浏览器可识别运行的es5代码。
          即JIT编译模式是 在打包的时候,使用tsc把component ts代码编译成ts代码,不会编译模板文件。再在浏览器渲染阶段,执行ngc,把ts代码 编译成 es5 代码

       ② 命令中加入 --aot或者 --prod 标志,使用的就是 预先编译(AOT)—构建时编译应用,即在服务端完成了编译。
         即AoT是项目在打包的时候就把HTML模板编译成浏览器可识别运行的es5代码。
         AOT编译模式在打包的时候,先使用ngc把模板和component ts代码编译成ts/es6代码,然后使用tsc变成es5代码。
       --prod里面默认包含 --aot的配置

在这里插入图片描述
       ③ 2种编译方式 , angular编译的时机不同,即执行ng编译器 ngc的时间不同
          ngc 输出的代码无论是es5形式的,还是es6/ts 模式的,都是浏览器可以真正运行的代码。
在这里插入图片描述

       ④ 开发时使用JIT编译,打包部署时使用AOT编译。
       ⑤ 在以前使用gulp或webpack的项目中,无论是开发时还是部署时,都是代码编译成es5 代码。即相当于angular的AOT编译。

2. AOT编译的好处

① 省时: 浏览器拿来页面,直接呈现 ,省去了编辑时间
② 较少异步http请求:因为不需要下载源文件来进行编译了。
③ ng应用体积更小:因为已经编辑过了,不需要再次ng编译了,因此不需要ng编译器了。(编译器差不多占了 Angular 自身体积的一半儿) (ng编译器让ng 可以在浏览器中编译ts代码)
④ 更安全:由于是在发送给客户端之前就编译了,没有注入的可能性

3. bug解决
① 原因: ng s -o 使用的编译方式是默认的JIT方式,ng build --prod 使用的是AOT编译模式 。(AOT编译方式了编译了模板文件)
② 临时解决方案:修改为public
③ 此问题,可以持续关注 这个issue 
在这里插入图片描述
在这里插入图片描述

( 参考文章1 )
( 参考文章2 )
( 参考文章3 )


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。