Big shoutout to jonrsharpe's response for guiding me in the right direction. Even though I added the recommended paths as per the suggestion, I still couldn't get it to work. In case someone encounters the same issue down the line, here's how I troubleshooted and resolved it.

I have a shared module with services utilized across multiple components, thus...

tsconfig.json:

{
    "compilerOptions": {
        ...
        "baseUrl": ".", //also included this
        "paths": {
            "@shared/*": ["src/app/modules/shared/*"]
        }
    }
}

With this update, VS Code successfully resolved the import, but during compilation, I encountered an error from webpack.

Module not found: Error: Can't resolve

To address this, I needed to incorporate

1. baseUrl of tsconfig into webpack's resolve.modules
2. paths of tsconfig within webpack's resolve.alias

webpack.config.js:

resolve: {
  extensions: ['*', '.js', '.ts'],
  modules: [
    rootDir,
    path.join(rootDir, 'node_modules')
  ],
  alias: {
    '@shared': 'src/app/modules/shared'
  }
},

component.ts:

import { FooService } from '@shared/services/foo.service'
import { BarService } from '@shared/services/bar.service'
import { BazService } from '@shared/services/baz.service'

To further streamline, I created an index.d.ts within the services directory and exported all services from there, like so:

index.d.ts:

export * from './foo.service';
export * from './bar.service';
export * from './baz.service';

and now within any component:

import { FooService, BarService, BazService } from '@shared/services';

After much searching and experimentation, I finally discovered the importance of understanding how baseUrl and Path work together to solve a problem.

If you set baseUrl:"." it may work in VScode, but not when compiling your code.

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["src/app/*"]
    }    
}

Based on my experience and analyzing angular aio code, I recommend setting baseUrl:"src" like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "@myproject/*": ["app/*"],
      "testing/*": ["testing/*"]
    }    
}

Setting the base url as the source (src directory) allows the compiler to properly resolve modules.

I hope this information will assist others in resolving similar issues.

For some reason, when I tested the other solutions in VS2017, Angular compiled without any errors. However, I still encountered issues with VS showing "Cannot find Module ...". Changing the baseUrl from "." to "src" resolved this issue.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "baseUrl": "src",                 // Main source directory same level as tsconfig
    "paths": {
      "app/*": [ "app/*" ],           // src/app
      "ui/*": [ "ui/*" ],             // src/ui       
      "services/*": [ "services/*" ], // src/services
      "assests/*": [ "assests/*" ],     // src/assests
      "models/*": [ "models/*" ]      // src/models
    },
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

To import:

import { AppMenuComponent } from 'ui/app-menu/app-menu.component';

Note: If Visual Studio continues to display errors, try closing and reopening the file or restarting Visual Studio to recognize the updated paths.

When working with Angular 8, there is no longer a need for the *. If you use the *, it may result in an error message saying Cannot find module. To resolve this issue, simply include the following configuration in your tsconfig.json file:

"baseUrl": "./",
"paths": {
      "@test": [ "src/app/test/" ],
      "@somthing": [ "src/app/something/" ],
      "@name": [ "src/app/name/" ]
    },

Simplicity is Key

To keep things simple, we only need to understand a few key concepts in order to apply this solution to any upcoming projects.

Angular takes a different approach by not setting up the traditional @/ or ~/ path mappings, as it prefers to be less prescriptive in this area.

Instead, Angular assigns a baseUrl for all imports, starting with ./ (indicating the directory where the tsconfig.json file is located).

This implies that any imports without relative paths (not starting with ./ or ../) automatically include the baseUrl.

By using paths that originate from this base URL for your imports, you already have a solution in place! Refactoring should also be seamless if your tool recognizes the base URL and can apply import path refactoring accurately.

Therefore, with an unchanged TS config, you can use imports like the following example without worrying about managing relative paths:

// Sample import considering the preset baseUrl for automatic prefixing:

import { ComingSoonComponentModule } from 'src/app/components/coming-soon/coming-soon.module';

An Alternative Approach

If you prefer to implement a prefix like @/, you can achieve this easily by creating a simple path mapping, such as the one below:

// tsconfig.json

{
  // ...
  "compilerOptions": {
    "baseUrl": "./",
    // Note that the mapping below is relative to the baseUrl: `src/app/*` actually translates to `{baseUrl}src/app/*`, meaning `./src/app/*`.
    "paths": { "@/*": ["src/app/*"] },
    // ...
  },
  // ...
}

You can then import using either of these methods:

import { ComingSoonComponentModule } from 'src/app/components/coming-soon/coming-soon.module';
import { ComingSoonComponentModule } from '@/components/coming-soon/coming-soon.module';

Points to Keep in Mind:

1. The paths option in tsconfig is relative to the baseUrl setting (therefore, ensure you use relative paths for the paths keys).
2. The * symbol denotes the specific module path (as defined in your code), while everything else acts as a prefix or suffix added according to your specifications in the tsconfig file.

I've tried various solutions on Stackblitz, but none of them seem to work, even when using paths like src/app/... as suggested by Paul. It seems that Stack Blitz does not support paths specified in tsconfig.json, as highlighted in this issue.

The only workaround I discovered was to use ../, which allows you to navigate back one folder from the current file. You can stack multiple instances of ../ to go back multiple folders.

For instance, if my component is located in src/app/components/mycomponent, and the file I need to include is in src/app/shared/myservice, simply specifying src/app/shared/myservice/service wouldn't work on Stackblitz. In this case, I had to use ../../shared/myservice/service instead. The first ../ takes me back to src/app/components, while the second one resolves the directory to src/app, allowing access to the shared folder.