GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | ||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | ||
GeezerVison is showing github.com — ng add fails to find app.module.ts when using custom tsconfig.json paths · Issue #12740 · angular/angular-cli Open Labels area: @schematics/angularfreq1: lowOnly reported by a handful of users who observe it rarelyOnly reported by a handful of users who observe it rarelyseverity3: brokentype: bug/fix Milestone DescriptionBug Report or Feature Request (mark with an
|
| 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'?
Activity
Relates to
#12729Reacted by Sean G. WrightReacted by Nam Pham- addedfreq1: lowOnly reported by a handful of users who observe it rarelyOnly reported by a handful of users who observe it rarely
on Oct 25, 2018 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?
Reacted by Oleksandr Yefymov, Kent and Mohammad Jawad (Kasir) BaratiI 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 addschematic.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.readis 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 theng-addschematic.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.tsconst 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.tschange 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.tsReacted by drmencos and tbrix84This 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=falseReacted by Diego Luiz BrumI can confirm this. I'm having the same issue right now:
Cannot statically analyze bootstrapApplicationthis happens when I run:
ng add @angular/ssrEDIT:
I had to change:
import { appConfig } from "app/app.config";to:
import { appConfig } from "./app/app.config";adding a
./to the pathReacted by Daniel Naranjo, rems, Daniel Ehrhardt, Daniel Correia, JayPansuriyaSF, L. Papa, Hazem Karoui, Mohamed Birali and tbrix846 years later and still hasn't been fixed. I can confirm the same behaviour.
Updated the path in
main.tsonly for theAppModuleand finished successfully.Reacted by Ivan Skiridomov and Daniel CorreiaIf you still have the same issue with Angular 19, as @JonasDev17 said
Your
main.tsfile 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/pwaeven after copying the other people's examples above line for line.Reacted by elsantoalcielo
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
Issue actions
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.