SHORT: Renaming a service or ponent is no problem, but can you also move it to another folder?

LONG: This is the service I generated at the wrong directory with the ng new service data mand:

When I move it from the src folder into the _service folder I'm getting asked, if I want to update the imports. Of course I press yes, but when starting the app I get this error:

Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: ENOENT: no such file or directory ...\data.service.ts

So I checked the index.js file, if I could update the path to data.service.ts manually, but that's not possible as this is all that is in the index.js file:

"use strict";

function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./angular_piler_plugin"));
__export(require("./interfaces"));
var loader_1 = require("./loader");
exports.default = loader_1.ngcLoader;
exports.NgToolsLoader = __filename;

SHORT: Renaming a service or ponent is no problem, but can you also move it to another folder?

LONG: This is the service I generated at the wrong directory with the ng new service data mand:

When I move it from the src folder into the _service folder I'm getting asked, if I want to update the imports. Of course I press yes, but when starting the app I get this error:

Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: ENOENT: no such file or directory ...\data.service.ts

So I checked the index.js file, if I could update the path to data.service.ts manually, but that's not possible as this is all that is in the index.js file:

"use strict";

function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./angular_piler_plugin"));
__export(require("./interfaces"));
var loader_1 = require("./loader");
exports.default = loader_1.ngcLoader;
exports.NgToolsLoader = __filename;

• javascript
• angular

• 1 either your auto update doesn't fix your NgModule path definitions or you don't have typescript paths defined for folder into which you are moving your classes – Xesenix Commented Jun 17, 2020 at 20:17

4 Answers 4

In VS code, you can simply rename the ponent to include the folder you want to use as a container and everything will be updated automatically.

Let's say you have some like:

And you want to move the ponent named 'single-value-card' to the 'visualization' folder. Then all you have to do is to rename the ponent folder as shown:

And voilá:

Note: After renaming, VS Code will ask you if you want to apply the reference refactor. As I've answered 'Always apply the reference update' (or smth like that) it never asked me again

TL;DR: Auto updating imports doesn't seem to work for nested Angular ponent folders and the error is useless. Check that those imports were updated correctly (anything in the _ponents folder in the poster's example).

I just ran into this same issue. I'm using the "Move TS" VSCode Extension, and it doesn't appear to update imports in ponents that are grouped by folders. For example, consider the following folder structure:

> Component 1
> Component 2
> Forms
      > Name Component
      > Email Component
> Services
api.service.ts

When I moved api.service.ts from its current location into the Services folder, the extension updated the imports in Component 1 and Component 2 correctly. However, it failed to update the imports in the Name Component and the Email Component correctly. I would guess the native VS Code "Update Imports" option has the same defect. So I would check your _ponents folder to ensure the imports were updated correctly.

We can move the services and ponents to desired folder. In Visual Studio Code after moving the ponent or service you would have to manually remove the initial imports and add than do Auto import from Source Action then it would update the dependencies correctly

Visual Studio Code does not seems to auto update the imports in this case.

The only way I think is to move the files in to desired location using any code editor(used vscode) and manually update the imports. VS code also takes care of GIT. If we do it from the folder structure I think we need to delete and add the file.