Adding angular-cli to existing project? On using ng init

_> Please provide us with the following information:

---

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)_

Windows 10

2. Versions. Please run ng --version. If there's nothing outputted, please
run in a Terminal:
node --version
And paste the result here.
angular-cli: 0.1.0
node: 4.2.1
os: win32 x64

3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
do on your code? etc.
Create an Angular 2 project without angular-cli, for example:
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm install angular-cli
ng **???? -- how to add angular-cli to project at this point?**

To make that project use angular-cli for commands like:
ng generate route magazines

4. The log given by the failure. Normally this include a stack trace and some
more information.

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

5. Mention any other details that might be useful.

Apologies if this is a duplicate, looking for answers in doc and SO.

---

Thanks! We'll be in touch soon.

[pkamdem]

@jmb-mage

ng init inside root folder and following instructions will do.

In this particular case, there was a /app folder with the components, code in it.

After I run ng init there is a /src/app folder that does not have the same components in it as /app Is this intentional?

Or is it understood that at this point the developer will copy and paste files from their folders into the new angular-cli structure?

And ng init is missing from readme.md on this page: https://github.com/angular/angular-cli

[pkamdem]

@jmb-mage

When running ng init you have the option to provide the source directory as ng init --source-dir [my_source_directory]. Default is set to src.

This will create App components following Style guide conventions

Note that there may be some configuration to be done depending of the current project setup

WITH --source-dir

Following these steps, brand new:
git clone https://github.com/angular/quickstart.git test
cd test
npm install
npm start
npm install angular-cli --save
ng init --source-dir "app"

It made a /app/app folder for the angular-cli files.

And then I get this error:
Installing packages for tooling via npmmodule.js:339
throw err;
^

Error: Cannot find module 'C:\dev\angular\test\node_modules\angular-cli\node_modules\ember-cli\node_modules\npm\lib/build.js'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.defineProperty.get (C:\dev\angular\test\node_modules\angular-cli\node_modules\ember-cli\node_modules\npm\lib\npm.js:196:15)
at C:\dev\angular\test\node_modules\angular-cli\node_modules\ember-cli\node_modules\npm\lib\install.js:1163:17
at asyncMap (C:\dev\angular\test\node_modules\angular-cli\node_modules\ember-cli\node_modules\npm\node_modules\slide\lib\async-map.js:27:18)
at andBuildResolvedTree (C:\dev\angular\test\node_modules\angular-cli\node_modules\ember-cli\node_modules\npm\lib\install.js:761:9)
at C:\dev\angular\test\node_modules\angular-cli\node_modules\ember-cli\node_modules\npm\lib\install.js:715:9
at asyncMap (C:\dev\angular\test\node_modules\angular-cli\node_modules\ember-cli\node_modules\npm\node_modules\slide\lib\async-map.js:27:18)

---

WITHOUT --source-dir

In my other project, where I did ng init without the --source-dir, I had to run this:
npm install ember-cli --save
And now I am getting errors when I try and run ng-serve:

Could not require 'angular-cli-build.js': Cannot find module 'angular-cli/lib/broccoli/angular2-app'
Error: Could not require 'angular-cli-build.js': Cannot find module 'angular-cli/lib/broccoli/angular2-app'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (C:\dev\angular\test\angular-cli-build.js:3:19)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)

[pkamdem]

@jmb-mage

Just complete these steps, and everything went ok.

git clone https://github.com/angular/quickstart.git test
cd test
npm install
ng init --source-dir app (Make sure to accept overwriting files and tweak after if need be. This will also install angular-cli as your dev dependencies)
npm start

thanks @pkamdem it seems there may have been a network error getting all the packages or something. I did npm uninstall angular-cli and npm install angular-cli and it started working again.

[hansl]

Considering this fixed per last message from @jmb-mage

[Sri276286]

@pkamdem

Doing what you told , in app folder it's again creating one more app folder with same files as we have in quick-start project. How to fix this

[dvidsilva]

Also, if the current project has already some progress it will overwrite all that, is there a way to get the steps needed to get it to run in an existing project without overwriting the code I already have? I'm mostly interested because of the github pages deploy capabilities.

[rmcsharry]

@dvidsilva I wanted that too (easy github pages deploy) but I could not successfully add angular-cli to an existing project, too many config and file version changes.

However, to deploy to github pages I found a workaround without needing the cli:

1. create a new repository for your 'github pages deployment' - eg. .github.io
   NOTE - it must start with your username followed by github.io
   [this is because of assets like images that must be loaded from relative paths]
2. clone that repo in local folder myapp-prod (OUTSIDE of your existing app repo folder) - ensure this folder has the origin set to your repo created in (1)
3. build your project locally as prod (ie: ng build -prod)
4. copy the resulting DIST folder from (3) into (2)
5. cd into (2) and commit the changes (ie. the dist folder you just copied there)
6. then run: git subtree push --prefix dist origin master
7. on github, goto settings tab for the repo and in the github pages section, set source to master branch
8. browse to .github.io - your prod app is running there

Each time now, just run your prod build, copy the dist folder, commit it, push the subtree (steps 3-6 basically)