ng add fails to find app.module.ts when using custom tsconfig.json paths

[seangwright]

Bug Report or Feature Request (mark with an x)

- [X ] bug report -> please search issues before submitting
- [X ] feature request

Whether this is a bug or a feature depends on whether or not custom paths in tsconfig.json are supported with the Cli.

Command (mark with an x)

- [X ] add

Versions

Angular CLI: 7.0.2
Node: 10.8.0
OS: win32 x64
Angular: 7.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Repro steps

• ng new app-name (pick defaults)
• Add "paths": { "@app/*": ["src/app/*"] } to tsconfig.json
• Update main.ts to use this new path
  import { AppModule } from '@app/app.module';
import { environment } from './environments/environment';
• ng add @angular/material
• Select Yes for ? Set up browser animations for Angular Material?

Repository all set up to reproduce this error is available here.
Just clone and type ng add @angular/material.

The log given by the failure

Could not read Angular module file: /src/@app/app.module.ts

Desired functionality

Cli handles custom paths in tsconfig.json.

Mention any other details that might be useful

Here is where material tries to get the app.module.ts path
https://github.com/angular/material2/blob/985774a4eaa14d1dcbf1ad96ab176043d38f433e/src/lib/schematics/ng-add/setup-project.ts#L56

Here is where the path to app.module.ts is being calculated in the schematics code

angular-cli/packages/schematics/angular/utility/ng-ast-utils.ts

Line 78 in 82f2bda

export function getAppModulePath(host: Tree, mainPath: string): string {

I believe the above link is what is causing the problem.

I've always preferred absolute urls in Angular apps compared to the relative paths (which become very difficult to read for nested components).

Adding custom paths to tsconfig.json works pretty well to solve this problem. VSCode works fine with it and the Cli has no other issues I've run into.

If using paths isn't officially supported does the Angular team recommend using relative paths like import { MyApiService } from '../../../../../my-api.service'?

[alan-agius4]

Relates to
#12729

[serridavide]

Did anyone find a workaround for this issue? I'm trying to add angular material to an existing project and run into this issue. Can someone help me to get it working?

[Splaktar]

I just wanted to bump this and say that with Nx and people learning TS more, these custom path mappings are very common. I would suggest moving the frequency of this issue up from low to medium.

This is something that Angular Material users have been running into for 3 years now when using our ng add schematic.

Also based on my investigation in #20118, this is still occuring with 11.2.1.

[alan-agius4]

I had a look at this and continuing on what @Splaktar mentioned in #20118, in https://github.com/angular/components/blob/8f558eeb7e475da54ad69e85ec07229fb4b0c3e9/src/cdk/schematics/utils/ast/ng-module-imports.ts#L16 the tree.read is invoked with an inexistent path. Schematics are not aware of specific TypeScript path mappings logic as it works similar to the Node.JS file system and hence it is correctly failing.

The module needs to be provided prior to passing it to tree.read. Since, the module resolution logic, is within the Angular Components schematic, it does appear to me that this is more of an Angular Material bug, where path mappings are not supported by the ng-add schematic.

I did a high level example on what needs to be done in the schematic:

const workspace = await getWorkspace(host);
const project = getProjectFromWorkspace(workspace, options.project);
let appModulePath = getAppModulePath(host, getProjectMainFile(project));

if (!host.exits(appModulePath)) {
  const tsConfig = project.targets.get('build')?.options?.tsConfig;
  if (typeof tsConfig === 'string') {
    const { config } = ts.readConfigFile(tsConfig, host.read);
    const { resolvedModule } = ts.resolveModuleName(appModulePath, getProjectMainFile(project), config.options, {
      readFile: function (fileName: string): string {
        return host.read(fileName).toString().replace(/^\uFEFF/, '');
      },
      directoryExists: function (directoryName: string): boolean {
        // When the path is file getDir will throw.
        try {
          const dir = host.getDir(directoryName);

          return !!(dir.subdirs.length || dir.subfiles.length);
        } catch {
          return false;
        }
      },
      fileExists: function (fileName: string): boolean {
        return host.exists(fileName);
      },
      realpath: function (path: string): string {
        return path;
      },
      getCurrentDirectory: function () {
        return host.root.path;
      },
    });

    appModulePath = resolvedModule.resolvedFileName;
  }
}

Alternatively, for a simpler approach an addition option can be added that would allow the users to provide the module path.

ng add @angular/material --module /src/app/app.module.ts

const workspace = await getWorkspace(host);
const project = getProjectFromWorkspace(workspace, options.project);
let appModulePath = options.module ?? getAppModulePath(host, getProjectMainFile(project));