Relates to
#12729

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?

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.

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

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?

Found a temporary solution: In your main.ts change the import path of AppModule.

For me it looks like this:
import { AppModule } from '@app/app.module'; -> import { AppModule } from './app/app.module';

Absolute path didn't work:

import { AppModule } from 'src/app/app.module';
Could not read Angular module file: /src/src/app/app.module.ts

This still happens on Angular 17

Setup to fail:

• In your tsconfig.json add a custom path:

...
    "paths": {
      "@app/*": ["app/*"],
...

• Then use it in your main.ts:

import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from '@app/app.component';
import { appConfig } from '@app/app.config';

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

• For example, try to add ssr package:
  ng add @angular/ssr

The command fails:

Cannot statically analyze bootstrapApplication call in src/main.ts

• If you change main.ts to:

import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

It works @alan-agius4

By default Angular 17 create a project that use standalone.
You can change that putting false when you create your project.
ng new nameproject --standalone=false

I can confirm this. I'm having the same issue right now:

Cannot statically analyze bootstrapApplication

this happens when I run:

ng add @angular/ssr

EDIT:

I had to change:

import { appConfig } from "app/app.config";

to:

import { appConfig } from "./app/app.config";

adding a ./ to the path

6 years later and still hasn't been fixed. I can confirm the same behaviour.

Updated the path in main.ts only for the AppModule and finished successfully.

If you still have the same issue with Angular 19, as @JonasDev17 said

Your main.ts file should look like:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);

And NOT:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from 'app/app.component';
import { appConfig } from 'app/app.config';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);

The difference is ./

Getting this error trying to add @angular/pwa even after copying the other people's examples above line for line.