CODEWITHSUNDEEP
angular-cli
Akash Surana
Akash Surana

Reputation: 75

How to generate an 'angular.json' file

My current application was in Angular 4 without Angular CLI. So I never had a angular.json file or Angular-cli.json file. Now we want to generate that Angular CLI or angular.json file. Because this file is not available it is not taking any of the ng commands like ng serve or ng g c testing.

How can I generate the file without using the ng new command, because ng new will create a new project which I don't want. I want to support my existing project.

Few notes on my project:

  1. We are launching multiple applications from one folder
  2. We are launching each application from the ASPX page without using index.html.

Please see the screenshot attached of the error and the folder structure of my project

Enter image description here

Enter image description here

Upvotes: 4

Views: 20364

Answers (2)

Humayoun_Kabir
Humayoun_Kabir

Reputation: 2251

From Angular >= 6 '.angular-cli.json' file is replaced by the 'angular.json' file. As your project is based on Angular 4 that you have said so you need to create '.angular-cli.json' file not 'angular.json' file.

As you have ready made project of Angular 4 and you want to generate file command (as you mentioned above) like:

ng g c sample

So I assume you have installed the latest Angular CLI in globally.

You can make a trick. Just create a new project in another location and copy that '.angular-cli.json' file in your desired project folder. After that, just change the project name and other things which is relevant to your need. Create a '.angular-cli.json' file in own hand is a little bit tedious and time-consuming also as you know. And if you already have CLI installed then I think no need to create it manually which may cause you compiling error also. That's all my friend. You can also use this '.angular-cli.json' below if you want:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Upvotes: 0

Hasitha Amarathunga
Hasitha Amarathunga

Reputation: 2005

Create a new file with name '.angular-cli.json' and add this file in your main directory.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Upvotes: 2

Related Questions