How to rename an Angular project?

Question

I renamed my Angular 4 project folder from auction-life to auction-05-life and replaced 3 occurrences of the old project name in:

angular-cli.json Line 4
app.e2e-spec.ts Line 3
package.json Line 2

I then ran ng serve and got this:

You seem to not be depending on "@angular/core". This is an error.

Edit: Following the instructions in the comments below, I restarted the terminal window, ensured I was in the correct project folder auction-05-life, ran npm install then ng serve and this time got a different exception:

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)
...

I doubt with three occurrences of the old project name sentence. — micronyks, Aug 26 '17 at 04:16
Are you sure you're in the correct folder when you run `ng serve`, where `@angular/core` is installed in `node_modules` and is present in `node_modules`? — Lazar Ljubenović, Aug 26 '17 at 05:30
You seem to have somewhere a hardcoded path. Look for that. Otherwise, as you said you have the option to: remove all node-modules, uninstall angular-cli (instructions are on angular cli page, very useful) it. And run npm install and install angular-cli again. — Vega, Aug 26 '17 at 19:50

score 38 · Answer 1 · answered Feb 11 '19 at 12:21

38

Search in your project wherever the old name is used.
In Visual Studio Code search can be done by using the search bar provided.
Replace old name with your new name.
Rename the project folder name as well and you are done.
If some error occurs while running your project , delete the node_modules and do "npm install".Everything will be fine and running again.

answered Feb 11 '19 at 12:21

daksh khetarpal

481
4
5

1

Does the folder name have to be the same as the project name? – Neville Feb 21 '20 at 11:52
3

@Neville not necessarily but is common practice. – Felipe Romero Jun 14 '20 at 02:06
Warning: while replacing, you may also replace other data/code if the name is same as project name. check @Reza 's answer. – 27px May 12 '21 at 02:00

score 36 · Answer 2 · edited May 12 '21 at 05:36

36

Modify Project name in angular.json file (Replace all occurrences of the old name in angular.json)
Rename Project folder name.
Delete node_modules folder from your project directory.
Run npm install command.
Finally run ng serve command.

edited May 12 '21 at 05:36

27px

430
5
16

answered Mar 31 '20 at 10:20

Reza

361
3
2

1

much easier and cleaner. Thanks! – omostan Jun 07 '20 at 09:19
This is the proper answer – 27px May 09 '21 at 03:42
1

In my case deleting the `package-lock.json` following this tuto(https://www.youtube.com/watch?v=T7ef0bOOWs4) helped me – Md.Habibur Rahman Sep 14 '21 at 06:05
That is the correct answer @Reza but also do not forget the "README.md" file contents also – Code with Benji Oct 29 '22 at 17:40

salah-1 · Answer 3 · 2019-03-25T14:30:07.760

As of this writing, the Angular-cli commandline doesn't do renaming. So, this is what i did (manually):

1. First, see how really invested the old name is in the project by searching the "old name". On Linux, i used simple grep as.

grep -ir "oldname" .

That showed so many files, most of them under /node_modules. So i removed the /node_modules (and will use npm install after i finish the rename).

2. Next, i did Linux find & replace command against the files in current folder as follows (source sited at bottom):

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

Finally, don’t forget to do npm install on the current directory to install dependencies listed in your package.json (remember we removed node_modules that had old name)

** Credits:

Find replace "sed" command is from: How to replace a string in multiple files in linux command line

The idea was very helpful. Unfortunately, it was not enough. The search and replace under Linux could not capture all the files. I still had to use the search & replace function in VSCode to replace most of the files. Somehow the old name was still found in the package.json, which I had to change manually. Note: To optimize the search process, remove the node_modules folder first. Thanks for sharing! — omostan, Jun 24 '21 at 12:57

Hoan Danh · Answer 4 · 2021-08-21T03:03:44.530

4

1. Open your project directory with "Visual Studio Code"
2. Usually Ctrl+Shift+H enter "old project name" and replace "new project name" it everywhere Ctrl+Alt+Enter.
3. Delete "node_modules" folder from your project directory.
4. Rename project folder name to "new project name".
5. Run "npm install" command.

Finally run "ng serve" command.

edited Aug 21 '21 at 03:03

answered Aug 09 '21 at 03:32

Hoan Danh

51
3

Why it is required to delete node_modules folder? It has no reference with project name or it does? – Vimal Patel Aug 09 '21 at 04:31
To clean up and make sure there are no errors while running your project. @VimalPatel – Hoan Danh Aug 21 '21 at 03:13

score 2 · Answer 5 · answered Apr 28 '18 at 14:09

2

With macOS you go to your angular project folder, and use sed command to replace old name by the new that you want:

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

answered Apr 28 '18 at 14:09

Walterwhites

1,287
13
9

score 0 · Answer 6 · edited Dec 26 '18 at 20:59

0

If you are not familiar with bash scripting but with your IDE, you always can perform recursive search in your files (usually Ctrl+Shift+F) and replace it everywhere - Ctrl+Alt+Enter on VSCode. Visual Studio Code Example

edited Dec 26 '18 at 20:59

slava

791
1
11
26

answered Dec 24 '18 at 17:10

Alexander Sergan

1

score 0 · Answer 7 · answered Apr 01 '22 at 10:03

0

In the last version of Angular (13 ) no use of the Project name in the code so to change the Project folder name you need only to change the name of the folder and run you app is like this.

answered Apr 01 '22 at 10:03

Salah dine Maham

191
2
5

2

angular.json still references the Project Name in multiple configurations such as outputpath, defaultProject and browserTarget – Melvin Otieno May 27 '22 at 11:59

How to rename an Angular project?

7 Answers7

Linked