Could not find the project main file inside of the workspace config (src)

Question

I started a personal project that using angular 17 in front-side and decided to use ngx-bootstrap. Ngx-bootstrap released a version([email protected]) compatible with angular 17. But I got an error that says "Could not find the project main file inside of the workspace config (src)" when downloading ngx-bootstrap.

$ ng add ngx-bootstrap
ℹ Using package manager: npm
✔ Found compatible package version: [email protected].
✔ Package information loaded.

The package [email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
    ✅️ Added "bootstrap
    ✅️ Added "ngx-bootstrap
Could not find the project main file inside of the workspace config (src)

folder structure

I tried to download again but got same error.

Arkansas

Answer 1

An issue has already been created on ngx-bootstrap github page So you can just use ng-bootstrap as per their suggestion which actually works great!

This is the code that breaks the command. It seems to expect app.module instead of main.ts

export function getProjectMainFile(project: workspaces.ProjectDefinition): string {
  const buildOptions = getProjectTargetOptions(project, 'build');
  if (!buildOptions.main) {
    throw new SchematicsException(`Could not find the project main file inside of the ` +
      `workspace config (${project.sourceRoot})`);
  }

  return buildOptions.main.toString();
}

If you really want ngx-bootstrap only, then you need to install it manually. Here is the installation guide.

Allayne

which means for now we don't have any solution for this problem, either downgrade to angular 16 or wait for ngx-bootstrap 12 to release. – Newscast

@Newscast you can add ngz bootstrap manually instead of ng add – Allayne

if you are talking about the solution give here github.com/valor-software/ngx-bootstrap I was actually not able to get that, as I'm new to angular. – Newscast

@Newscast in the last line of my answer, i have provided instruction to install manually! – Allayne

the solution you mentioned is using Moduels, I'm working with standalone components. I don't have any modules in project. I'm using Angular17 – Newscast

@Newscast ok raise a question, if possible with a stackblitz I will check it – Allayne

Answer 2

this might be late , but for angular 17, there is a quick fix: under angular.json , go to architect/build/options and add the property "main" and make it point to your main.ts , like this :

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "main": "src/main.ts", ... 

you will get a warning saying that it is not allowed but just re run the ng add ngx-bootstrap and it will work just fine.

and before running ng serve , remove that property "main" so it can be built normally.

Grassy

Just to mention this will work only for project with modules. – Mcclean

It also works well for angular 18 but as m1ld mentioned only for projects with modules. – Lennie