如何重命名一个Angular项目？

Question

我将我的Angular 4项目文件夹从auction-life重命名为auction-05-life，并在以下三处替换了旧的项目名称:

• angular-cli.json第4行
• app.e2e-spec.ts第3行
• package.json第2行

然后我运行了ng serve，结果出现了这个错误信息：

你似乎没有依赖于"@angular/core"。这是一个错误。

编辑:遵循下面评论区的指示，我重新启动了终端窗口，确保我在正确的项目文件夹auction-05-life中，运行了npm install，然后运行ng serve，这次得到了不同的异常：

module.js:471
    throw err;
    ^
Error: Cannot find module 'heimdalljs-logger'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
...

- Liwy

---

尝试过 ./node_modules/.bin/ng serve 吗？ - Rajez

我对“旧项目名称”这句话出现三次感到怀疑。 - micronyks

你确定在运行 ng serve 时所在的文件夹是正确的吗？@angular/core 应该已经安装在 node_modules 中并且存在于 node_modules 文件夹中。 - Lazar Ljubenović

重新启动终端窗口。 - Vega

你似乎在某个地方有一个硬编码的路径。找到它并修改。否则，按照你所说的方法，你可以选择：删除所有的node-modules，卸载angular-cli（指令在angular cli页面上非常有用），然后运行npm install并重新安装angular-cli。 - Vega

Answer 1

1. 在项目中搜索旧名称的使用情况。
2. 在Visual Studio Code中，可以使用提供的搜索栏进行搜索。
3. 将旧名称替换为新名称。
4. 同时重命名项目文件夹名称，完成以上步骤即可。
5. 如果在运行项目时出现错误，请删除node_modules并执行"npm install"。一切都会恢复正常并重新运行。

- daksh khetarpal

---

文件夹名称必须与项目名称相同吗？ - Neville

@Neville 不一定，但是通常这样做。 - Felipe Romero

警告：在替换时，如果名称与项目名称相同，则可能还会替换其他数据/代码。请查看@Reza的答案。 - 27px

Answer 2

1. 修改 angular.json 文件中的项目名称 (将所有旧名称的出现替换为新名称)

2. 重命名项目文件夹。

3. 从项目目录中删除 node_modules 文件夹。

4. 运行 npm install 命令。

5. 最后运行 ng serve 命令。

- Reza

---

更加容易和清晰。谢谢！ - omostan

这就是正确答案。 - 27px

在我的情况下，按照这个教程(https://www.youtube.com/watch?v=T7ef0bOOWs4)删除`package-lock.json`文件帮助了我。 - Md.Habibur Rahman

那是正确的答案@Reza，但也不要忘记“README.md”文件的内容。 - Code with Benji

Answer 3

截至目前撰写此文，Angular-cli命令行不支持重命名。因此，我手动进行了以下操作：

1. 首先，通过搜索“旧名称”来查看该项目中旧名称的真正投入程度。在Linux上，我使用了简单的grep命令。

grep -ir "oldname" .

这显示了许多文件，其中大部分都在/node_modules下。因此，我删除了/node_modules（并将在重命名完成后使用npm install）。

2。接下来，我对当前文件夹中的文件执行了Linux的查找和替换命令，如下所示（源网址在底部引用）：

cd your folder
sed -i 's/oldName/newName/g' *

最后，不要忘记在当前目录下执行npm install以安装你的package.json文件中列出的依赖项（请记住我们删除了旧名称的node_modules）

** 来源：

查找替换“sed”命令来自: 如何在Linux命令行中替换多个文件中的字符串

- salah-1

---

这个想法非常有帮助。不幸的是，它还不够。在Linux下的搜索和替换无法捕获所有文件。我仍然需要使用VSCode中的搜索和替换功能来替换大部分文件。不知何故，在package.json中仍然找到了旧名称，我不得不手动更改它。注意：为了优化搜索过程，请先删除node_modules文件夹。感谢分享！ - omostan

Answer 4

1. 用"Visual Studio Code"打开你的项目目录。
2. 通常使用Ctrl+Shift+H输入“旧项目名称”，并在使用Ctrl+Alt+Enter替换为“新项目名称”。
3. 从项目目录中删除“node_modules”文件夹。
4. 将项目文件夹名称更改为“新项目名称”。
5. 运行“npm install”命令。
最后运行“ng serve”命令。

- Hoan Danh

---

为什么需要删除node_modules文件夹？它与项目名称没有关联吗？ - Vimal Patel

清理并确保在运行项目时没有错误。@VimalPatel - Hoan Danh

Answer 5

使用 macOS，您需要进入您的 Angular 项目文件夹，并使用 sed 命令将旧名称替换为您想要的新名称：

LC_CTYPE=C && LANG=C && find * -type f -exec sed -i "" "s/old-angular-project-name/new-name/g" {} +

- Walterwhites

Answer 6

如果您不熟悉Bash脚本编写，但熟悉您的IDE，您可以在文件中执行递归搜索（通常使用Ctrl+Shift+F），并在所有位置替换它 - 在VSCode上使用Ctrl+Alt+Enter。 Visual Studio Code示例

- Alexander Sergan

Answer 7

在最新版本的Angular（13）中，代码中不再使用项目名称，因此要更改项目文件夹名称，您只需要更改文件夹名称并运行应用程序即可。

- Salah dine Maham

---

angular.json 文件仍然在多个配置中引用了项目名称，例如 outputpath、defaultProject 和 browserTarget。 - Melvin Otieno