How to run angular app on local environment

Question

I have created a website on angular. I am trying to run it locally. But I am unable to run it. Below is my file

angular.json

{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "version": 1,
 "newProjectRoot": "projects",
 "projects": {
 "sweetreat": {
  "projectType": "application",
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/sweetreat",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "sweetreat:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "sweetreat:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "sweetreat:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.spec.json",
        "karmaConfig": "karma.conf.js",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "src/styles.scss"
        ],
        "scripts": []
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    },
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js",
        "devServerTarget": "sweetreat:serve"
      },
      "configurations": {
        "production": {
          "devServerTarget": "sweetreat:serve:production"
        }
      }
    }
  }
  }
  },
  "defaultProject": "sweetreat"
  }

Files

When I try to do ng serve. The command doesn't do anything

However, if I try Setting up the local environment and workspace I am able to run it

Angular CLI: 13.0.3
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64Angular CLI: 13.0.3
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

How can I run it locally?

Update 1

My package.json file

{
  "name": "sweetreat",
  version": "0.0.0",
  "scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
   },
  "private": true,
  "dependencies": {
  "@angular/animations": "~8.2.14",
  "@angular/cdk": "~8.2.3",
  "@angular/common": "~8.2.14",
  "@angular/compiler": "~8.2.14",
  "@angular/core": "~8.2.14",
  "@angular/forms": "~8.2.14",
  "@angular/material": "^8.2.3",
  "@angular/platform-browser": "~8.2.14",
  "@angular/platform-browser-dynamic": "~8.2.14",
  "@angular/router": "~8.2.14",
  "bootstrap": "^4.5.2",
  "hammerjs": "^2.0.8",
  "jquery": "^3.5.1",
  "popper.js": "^1.16.1",
  "rxjs": "~6.4.0",
  "tslib": "^1.10.0",
  "zone.js": "~0.9.1"
 },
   "devDependencies": {
   "@angular-devkit/build-angular": "~0.803.23",
   "@angular/cli": "^13.0.3",
   "@angular/compiler-cli": "~8.2.14",
   "@angular/language-service": "~8.2.14",
   "@types/jasmine": "~3.3.8",
   "@types/jasminewd2": "~2.0.3",
   "@types/node": "~8.9.4",
   "codelyzer": "^5.0.0",
   "jasmine-core": "~3.4.0",
   "jasmine-spec-reporter": "~4.2.1",
   "karma": "~4.1.0",
   "karma-chrome-launcher": "~2.2.0",
   "karma-coverage-istanbul-reporter": "~2.0.1",
   "karma-jasmine": "~2.0.1",
   "karma-jasmine-html-reporter": "^1.4.0",
   "protractor": "~5.4.0",
   "ts-node": "~7.0.0",
   "tslint": "~5.15.0",
   "typescript": "~3.5.3"
  }
 }

Any help would be highly appreciated.

Maybe there's a mismatch between Angular CLI and your Node version. Have a look at this link : https://stackoverflow.com/a/60258560/6444705 — Emilien, Dec 02 '21 at 13:34
@Emilien I have created a new project and tried to run it and it does work. Then I copied the `src->app` files to the newly created project and then again tried to build it. At this point, it gives me lots of errors. — Moeez, Dec 04 '21 at 05:23

score 0 · Answer 1 · edited Aug 14 '23 at 19:19

You need to use the new configuration option (this works for ng build and ng serve as well)

ng serve --configuration=local

or

ng serve -c local

If you look at your angular.json file, you'll see that you have finer control over settings for each configuration (aot, optimizer, environment files,...)

{
    "configurations": {
        "production": {
            "optimization": true,
            "outputHashing": "all",
            "sourceMap": false,
            "extractCss": true,
            "namedChunks": false,
            "aot": true,
            "extractLicenses": true,
            "vendorChunk": false,
            "buildOptimizer": true,
            "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
            ]
        }
    }
}

You can get more info here for managing environment specific configurations.

As pointed in the other response below, if you need to add a new 'environment', you need to add a new configuration to the build task and, depending on your needs, to the serve and test tasks as well.

Adding a new environment

Edit: To make it clear, file replacements must be specified in the build section. So if you want to use ng serve with a specific environment file (say dev2), you first need to modify the build section to add a new dev2 configuration

{
    "build": {
        "configurations": {
            "dev2": {
                "fileReplacements": [
                    {
                        "replace": "src/environments/environment.ts",
                        "with": "src/environments/environment.dev2.ts"
                    } /* You can add all other options here, such as aot, optimization, ... */
                ],
                "serviceWorker": true
            }
        }
    }
}

Then modify your serve section to add a new configuration as well, pointing to the dev2 build configuration you just declared

{
  "serve": {
    "configurations": { 
      "dev2": { 
        "browserTarget": "projectName:build:dev2" 
      }
    }
  }
}

Then you can use ng serve -c dev2, which will use the dev2 config file

Please format your code in the answer! – Talha Tayyab Dec 05 '21 at 01:59 — Talha Tayyab, Dec 05 '21 at 01:59

score -1 · Answer 2 · answered Dec 07 '21 at 02:54

-1

You try to change your node version to reinstall( Node: 16.13.0 to Node: 14LTS)

or You try to fix npm package

--npm audit fix --force

--npm install then run the command

ng serve to run your code

answered Dec 07 '21 at 02:54

Arun Karthi

1
1

How to run angular app on local environment

2 Answers2