如何为现有电商项目添加Angular CLI并集成Angular应用？

1. ng generate报错原因 #

ng generate仅能在Angular工作区内执行，工作区是通过ng new或ng init创建、包含angular.json和package.json等核心配置文件的目录。你的电商项目未被初始化为Angular工作区，因此触发该错误。

2. 能否将ng new创建的Angular应用直接整合进现有webApp？ #

可以，但不能直接拖拽源码文件，需按以下步骤操作：

• 先构建Angular应用：在新Angular项目目录下执行 ng build --prod，编译后的可部署静态资源会生成在dist/[项目名称]目录中。
• 将dist目录内的所有文件复制到现有电商项目的静态资源目录（比如你提到的src/.../resources），注意调整资源引用路径，确保现有项目能正确加载这些文件。
• 若要在现有页面中嵌入Angular应用，需在对应HTML文件中引入Angular构建后的main.js、polyfills.js等文件，并添加Angular根组件标签（例如<app-root></app-root>）。

3. 是否应放入src/.../resources文件夹？ #

不建议直接将Angular源码放入该目录，仅需放入构建后的产物即可。源码需要Angular构建环境才能编译，直接放入会打乱现有项目结构，且无法正常运行。

如果希望更深度集成，推荐方案：

• 在电商项目根目录执行 ng init，将其转换为Angular工作区，之后即可直接使用ng generate生成组件、服务等代码。
• 修改Angular的angular.json配置，将构建产物输出路径指定为现有项目的src/.../resources目录，实现自动同步。

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