Converting an existing angular 2 project to use angular CLI

Question

I have a project that was not created using ng new (rather, I followed the quickstart guide). When I run an angular CLI command in that project (such as ng generate) I get this error message:

You have to be inside an angular-cli project in order to use the generate command.

Is there a way I can turn my existing project into an angular-cli project? (I wanted to try using it because it apparently automatically works around an issue with barrel imports and SystemJS.)

Answer 1

You should be able to run ng init and follow the prompts. Have a look at this issue if you need some guidance: https://github.com/angular/angular-cli/issues/755

Edit (March 13, 2017):

ng-init was removed from the latest version of the angular cli. https://github.com/angular/angular-cli/pull/4628

So for now you'll need to resort to mimicking what it tried to accomplish. ie:

1. Create a new angular project ng new myTemplate

2. Copy relevant files to your existing project from your new myTemplate project:

   .angular-cli.json package.json tslint.json src/polyfills.ts src/styles.css src/tsconfig.json

Depending on the state of your existing application you may want to copy over way more or way less. I guess this is why the feature was removed from the CLI. There isn't really any way for it to know exactly what you want it to do.

Answer 2

ng init has been removed. What worked for me was to manually create a .angular-cli.json file in the root folder with the following keys:

 {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "version": "1.0.0",
      "name": "new-cli"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": [
          "assets"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",

        "prefix": "app",
        "scripts": [],
        "environmentSource": "environments/environment.ts"
      }
    ]
  }

You will have to change values according to your setup of course.

Answer 3

ng init was removed from the latest version of the angular CLI but You can use yarn package manager to resolve all the dependencies. In order to use yarn, you have to install it first.

To install yarn in Ubuntu, enter the following command in your terminal:

sudo apt-get update && sudo apt-get install yarn

For Windows you can download yarn installer from here .

After installing yarn, you can run the command yarn install in your project direcotry which will download all the dependencies of your project.

For additional information about yarn check official docs

Answer 4

Try the below solution may be it could help.

1. Run this command on root folder npm install -g angular-cli
2. Create new folder for your project ng new project_folder_name
3. Enter inside that folder cd project_folder_name
4. Run the project by this command ng serve (Note: Now on localhost:4200, the demo project will run)
5. Copy the src folder of your existing project and replace with the src of your newly created project from project's root folder only.

Copy everything from package.json from the existing project. Run npm install again.If it breaks, it probably needs tinker with webpack.config