Angular新手集成Gulp时Chrome出现Avoid using document.write()违规提示

嘿，作为Angular新手碰到这种“看不见的代码出问题”的情况太正常了！我之前也踩过类似的坑，给你梳理下可能的原因和解决办法：

为什么会出现这个提示？ #

你本地的index.html里确实没写document.write，但Gulp构建/开发服务过程中，有脚本被自动注入到页面里了——控制台里的那段//\/script>".replace("HOST", location.hostname)); //]]>就是被转义后的注入代码，实际运行时会变成document.write来插入脚本标签。

常见的注入来源有这些：

• BrowserSync这类开发服务器工具，它会自动注入livereload脚本，旧版本里这段脚本用了document.write
• Gulp的注入类插件（比如gulp-inject），如果配置不当可能会生成带document.write的代码
• 某些第三方依赖库（比如旧版的SDK、统计脚本），在初始化时偷偷用了document.write

排查&解决步骤 #

1. 先看浏览器实际加载的源码 #

别盯着本地的index.html了，打开Chrome的“查看页面源代码”（右键页面→查看源代码），找到第13行附近的内容——你能直接看到生成的document.write代码，这能帮你定位到底是哪部分注入的。

2. 检查BrowserSync（如果用了的话） #

这是最常见的原因！如果你的Gulp任务里用了BrowserSync，试试在配置里添加injectChanges: false，关闭自动注入：

browserSync.init({
  server: './dist',
  injectChanges: false // 关掉自动注入
});

或者直接升级到最新版的BrowserSync，新版本已经替换掉了document.write的写法。

3. 排查Gulp插件 #

如果你用了gulp-inject之类的插件，检查它的配置和生成的代码。可以换成更现代的替代工具，比如gulp-html-replace，这类工具不会生成依赖document.write的代码。

4. 检查第三方依赖 #

看看package.json里的依赖，有没有比较旧的库。可以暂时注释掉某个依赖，重新运行Gulp任务，看看提示会不会消失，这样就能定位到具体的库。找到后要么升级该库，要么换成替代方案。

最后说两句 #

这种“隐形代码”的问题确实容易让人懵，但一步步排查就能找到根源，慢慢来就好！

内容的提问来源于stack exchange，提问作者Rav