Stackblitz导入GitHub公开Angular项目遇404问题求助

一、解决GitHub导入404的问题 #

• 核对链接格式：确保替换{GH_USERNAME}和{REPOSITORY_NAME}时无多余符号，GitHub仓库名大小写敏感，别写错。如果要指定分支，链接格式是stackblitz.com/github/{GH_USERNAME}/{REPOSITORY_NAME}/{BRANCH_NAME}，默认拉取主分支，要是你的主分支不是main/master，就得加上分支名。
• 重新授权GitHub权限：登录Stackblitz后，去GitHub的「设置→应用→授权的OAuth Apps」找到Stackblitz，确认它有权限读取你的公共仓库，没权限的话重新授权一次。
• 检查项目兼容性：Stackblitz对旧版Angular支持有限，比如Angular 8及以下可能无法正常导入，先确认项目的Angular CLI版本是否在Stackblitz支持范围内。
• 手动导入替代链接：直接去Stackblitz官网点「Import Project」，选「GitHub」，搜索仓库名导入，手动操作比拼链接更不容易踩坑。

二、本地VSCode导入Stackblitz的更优方法 #

• 用Stackblitz VSCode插件：安装「Stackblitz」插件后，右键点击项目根目录，选「Upload to Stackblitz」，插件会自动打包上传，完整保留本地的文件结构和配置，一步到位。
• 打包Zip上传：不想装插件的话，把本地项目打包成Zip，然后在Stackblitz官网点「Import Project」→「Upload Zip」，上传后Stackblitz会自动解析package.json并构建项目。
• Git双向同步：如果本地项目已经关联GitHub仓库，导入时选择从GitHub同步，之后还能开启双向同步——本地提交代码后Stackblitz自动更新，在Stackblitz上修改也能同步回GitHub，适合跨场景开发。

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