How to generate .angular-cli.json file in Angular

问题:

I have installed Angular CLI package separately using npm:

npm install --save-dev @angular/cli@latest

When I try to use commands cli I get an error:

Unable to find any apps in `.angular-cli.json`.

How to generate .angular-cli.json for current project?

回答1:

I got this same error in my current project and was confused because I'm running the application / ng serve in one terminal, but got this when I tried to generate a component from another terminal. .angular-cli.json was already there and correct. So what gives?

I realized that I used the shortcut to open VisualStudio Code's internal terminal -- which opened the terminal to the *root of the project * (like most IDEs). The project contains other things in addition to the Angular application folder that has the .angular-cli.json file in question. I just had to cd to the right folder and run ng g c again and things were fine.

In my case it was just a silly error. I thought I'd come back to share in order to save people a real headache for something so simple. I see that Shiva actually has mentioned this above, but I thought I would give a bit more detail so it doesn't get overlooked.

回答2:

In Angular 6, .angular-cli.json has been replaced with angular.json

For Angular < 6:

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": {}
  }
}

回答3:

Since Angular version 6 .angular-cli.json is deprecated. That file was replaced by angular.json file which supports workspaces.

回答4:

You are just outside the directory which you are working. Enter into the directory which your project is there and run command ng g c name.

回答5:

In angular.json you can insert all css and js file in your template. Other ways, you can use from Style.css in src folder for load stylesheets.

@import "../src/fonts/font-awesome/css/font-awesome.min.css";
@import "../src/css/bootstrap.min.css";
@import "../src/css/now-ui-kit.css";
@import "../src/css/plugins/owl.carousel.css";
@import "../src/css/plugins/owl.theme.default.min.css";
@import "../src/css/main.css";

回答6:

I found similar error it was located to C:\Users\sony\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@schematics\angular\workspace\files

it is installed in windows try to search in c drive angular.json you will view the file

回答7:

As far as I know Angular-cli file can't be created via a command like Package-lock file, If you want to create it, you have to do it manually.

1. You can type ng new to create a new angular project

2. Locate its .angular-cli.json file

3. Copy all its content

4. Create a folder in your original project, and name it .angular-cli.json

5. Paste what copied from new project in newly created angular cli file of original project.

6. Locate this line in angular cli file you created, and change the name field to original project's name. You can find the project name in package.json file

project": {
  "name": "<name of the project>"
},

However, in newer angular version now it uses angular.json instead of angular-cli.json.

回答8:

If you copy paste your project the .angular-cli.json you wil not find this file try to create a new file with the same name and add the code and it wil work.

回答9:

I couldn't see .angular-cli.json too. Because my Angular version is 6. ng version -> Angular CLI : 6.0.7. Check your Angular version.