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

[ghost]

_> 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.

[ghost]

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?

[ghost]

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

[ghost]

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:devangulartestnode_modulesangular-clinode_modulesember-clinode_modulesnpmlib/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:devangulartestnode_modulesangular-clinode_modulesember-clinode_modulesnpmlibnpm.js:196:15)
at C:devangulartestnode_modulesangular-clinode_modulesember-clinode_modulesnpmlibinstall.js:1163:17
at asyncMap (C:devangulartestnode_modulesangular-clinode_modulesember-clinode_modulesnpmnode_modulesslidelibasync-map.js:27:18)
at andBuildResolvedTree (C:devangulartestnode_modulesangular-clinode_modulesember-clinode_modulesnpmlibinstall.js:761:9)
at C:devangulartestnode_modulesangular-clinode_modulesember-clinode_modulesnpmlibinstall.js:715:9
at asyncMap (C:devangulartestnode_modulesangular-clinode_modulesember-clinode_modulesnpmnode_modulesslidelibasync-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:devangulartestangular-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

[ghost]

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)

[phil123456]

ng build

You have to be inside an Angular CLI project in order to use the build command.

ng init

The specified command init is invalid. For available options, see ng help.

wtf ???

using angular 2.4.0

[nbora98]

Hi ,
Try the below solution may be it could help.
Step 1. Run this command on root folder [npm install -g angular -cli]
Step 2. Create new folder for your project [ng new project_folder_name]
Step 3. Enter inside that folder [cd project_folder_name]
Step 4. Run the project by this command [ng serve]
(Note: Now on localhost:4200, the demo project will run)
Step 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.

Do let me know if you have any confusion.

[lagofvc]

@nbora98 , thanx for that tip! That helped me out. I had just gotten done updating an old project to @angular 4.0.1 and wanted to use ng generate commands. I did as your steps indicate except for step 5. Instead I did a diff on the top level files in both projects and then brought those changes from new_project_name and boiled down to these files :

angular-cli.json
karma.conf.js
package.json
protractor.conf.js
tslint.json

[tanzeelrana]

When I run ng init src I get the following :

I am new to angular, can someone guide me how to deploy my app to an apache ?

My package.json :

{ "name": "ng2-admin", "version": "0.9.0", "description": "Angular 2 and Bootstrap 4 Admin Template.", "author": "akveo", "homepage": "http://akveo.github.io/ng2-admin/", "license": "MIT", "dependencies": { "@angular/common": "2.4.9", "@angular/compiler": "2.4.9", "@angular/core": "2.4.9", "@angular/forms": "2.4.9", "@angular/http": "2.4.9", "@angular/platform-browser": "2.4.9", "@angular/platform-browser-dynamic": "2.4.9", "@angular/platform-server": "2.4.9", "@angular/router": "3.4.9", "@angularclass/conventions-loader": "1.0.13", "@angularclass/hmr": "1.2.2", "@angularclass/hmr-loader": "3.0.2", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "@ngui/auto-complete": "^0.13.1", "amcharts3": "github:amcharts/amcharts3", "ammap3": "github:amcharts/ammap3", "angular2-busy": "^1.0.2", "angular2-google-maps": "^0.17.0", "angular2-modal": "^2.0.3", "animate.css": "3.5.2", "ap-angular2-fullcalendar": "^1.1.7", "bootstrap": "4.0.0-alpha.4", "chart.js": "1.1.1", "chartist": "0.10.1", "ckeditor": "4.6.0", "core-js": "2.4.1", "easy-pie-chart": "2.1.7", "font-awesome": "4.7.0", "fullcalendar": "2.9.1", "google-maps": "3.2.1", "http-server": "0.9.0", "ie-shim": "0.1.0", "ionicons": "2.0.1", "is-electron-renderer": "2.0.1", "jquery": "2.2.4", "jquery-slimscroll": "1.3.8", "leaflet": "0.7.7", "leaflet-map": "0.2.1", "lodash": "4.17.4", "moment": "^2.15.2", "moment-precise-range-plugin": "^1.2.1", "ng2-bootstrap": "1.3.3", "ng2-ckeditor": "1.1.5", "ng2-completer": "^1.3.0", "ng2-date-picker": "^0.6.2", "ng2-datepicker": "^1.8.3", "ng2-smart-table": "0.6.0-1", "ng2-tree": "2.0.0-alpha.3", "ngx-uploader": "2.2.0", "normalize.css": "4.2.0", "parse": "^1.9.2", "reflect-metadata": "0.1.9", "rxjs": "5.1.1", "tether": "1.4.0", "twix": "^1.1.4", "zone.js": "0.7.7" }, "devDependencies": { "@angular/compiler-cli": "2.4.9", "@types/electron": "1.4.32", "@types/fullcalendar": "2.7.37", "@types/hammerjs": "2.0.34", "@types/jquery ": "2.0.40", "@types/jquery.slimscroll": "1.3.30", "@types/lodash": "ts2.0", "@types/node": "6.0.63", "@types/source-map": "0.5.0", "@types/uglify-js": "2.6.28", "@types/webpack": "2.2.5", "add-asset-html-webpack-plugin": "1.0.2", "angular2-template-loader": "0.6.0", "assets-webpack-plugin": "3.5.1", "awesome-typescript-loader": "3.0.4", "bootstrap-loader": "2.0.0-beta.21", "codelyzer": "2.0.0", "copy-webpack-plugin": "4.0.1", "css-loader": "0.26.1", "electron": "1.6.0", "es6-promise": "4.0.5", "es6-shim": "0.35.3", "es7-reflect-metadata": "1.6.0", "exports-loader": "0.6.3", "expose-loader": "0.7.3", "extract-text-webpack-plugin": "2.0.0-rc.3", "file-loader": "0.10.0", "find-root": "1.0.0", "font-awesome-sass-loader": "1.0.3", "gh-pages": "0.12.0", "html-webpack-plugin": "2.28.0", "imports-loader": "0.7.0", "json-loader": "0.5.4", "ng-router-loader": "2.1.0", "ngc-webpack": "1.2.0", "node-sass": "4.5.0", "npm-run-all": "4.0.1", "optimize-js-plugin": "0.0.4", "postcss-loader": "1.3.1", "raw-loader": "0.5.1", "resolve-url-loader": "1.6.1", "rimraf": "2.5.4", "sass-loader": "4.1.1", "script-ext-html-webpack-plugin": "1.7.1", "source-map-loader": "0.1.6", "string-replace-loader": "1.0.5", "style-loader": "0.13.1", "to-string-loader": "1.1.5", "ts-helpers": "1.1.2", "ts-node": "2.1.0", "tslint": "4.4.2", "typedoc": "0.5.6", "typescript": "2.0.10", "typogr": "0.6.6", "underscore": "1.8.3", "url-loader": "0.5.7", "webpack": "2.2.0", "webpack-dev-middleware": "1.9.0", "webpack-dev-server": "2.2.0", "webpack-dll-bundles-plugin": "1.0.0-beta.5", "webpack-merge": "2.6.1", "wintersmith": "2.2.5", "wintersmith-sassy": "1.1.0" }, "scripts": { "rimraf": "rimraf", "tslint": "tslint", "typedoc": "typedoc", "webpack": "webpack --progress --profile --bail", "webpack-dev-server": "webpack-dev-server", "webdriver-manager": "webdriver-manager", "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled dll", "clean:dist": "npm run rimraf -- dist", "clean:dll": "npm run rimraf -- dll", "clean:electron": "npm run rimraf -- build", "preclean:install": "npm run clean", "clean:install": "npm set progress=false && npm install", "preclean:start": "npm run clean", "clean:start": "npm start", "watch": "npm run watch:dev", "watch:dev": "npm run build:dev -- --watch", "watch:dev:hmr": "npm run watch:dev -- --hot", "watch:prod": "npm run build:prod -- --watch", "build": "npm run build:dev", "prebuild:dev": "npm run clean:dist", "build:dev": " npm run clean:dist && npm run webpack -- --config config/webpack.dev.js", "prebuild:prod": "npm run clean:dist", "build:prod": "npm run clean:dist && webpack --config config/webpack.prod.js --progress --profile", "server": "npm run server:dev", "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/", "server:dev:hmr": "npm run server:dev -- --inline --hot", "server:prod": "http-server dist -c-1 --cors", "server:test": "http-server dist-demo -c-1 --cors", "server:prod:ci": "http-server dist -p 3000 -c-1 --cors", "webdriver:update": "npm run webdriver-manager update", "webdriver:start": "npm run webdriver-manager start", "lint": "npm run tslint \"src/**/*.ts\" --force", "ngc": "./node_modules/.bin/ngc-w -p tsconfig.webpack.json", "pree2e": "npm run webdriver:update -- --standalone", "pretest": "npm run lint", "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/", "gh-pages": "wintersmith build -C docs && gh-pages -d docs/build", "start": "npm run server:dev", "start:hmr": "npm run server:dev:hmr", "version": "npm run build", "postversion": "git push && git push --tags", "build:electron": "npm run build:electron.full", "prebuild:electron.full": "npm run clean:electron", "build:electron.full": "npm run build:electron.renderer && npm run build:electron.main", "postbuild:electron.full": "npm run electron:start", "build:electron.renderer": "npm run webpack -- --config config/electron/webpack.renderer.prod.js", "build:electron.main": "npm run webpack -- --config config/electron/webpack.electron.prod.js", "electron:start": "electron build", "build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail", "build:aot": "npm run build:aot:prod", "clean:aot": "npm run rimraf -- compiled", "build:ci": "npm run build:prod && npm run build:aot" }, "repository": { "type": "git", "url": "https://github.com/akveo/ng2-admin.git" }, "bugs": { "url": "https://github.com/akveo/ng2-admin/issues" }, "engines": { "node": ">= 5.4.1 < 7" } }

[tanzeelrana]

ng build -prod

gives me :

[daton89]

i've this problem...

➜ create git:(master) ✗ ng init
The specified command init is invalid. For available options, see ng help.
➜ create git:(master) ✗ ng version
_ _ ____ _ ___
/ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ | '_ / _| | | | |/ _ | '__| | | | | | |
/ ___ | | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/
@angular/cli: 1.0.3
node: 7.10.0
os: darwin x64
@angular/cli: 1.0.3

[betasteps]

I have same issue as @daton89

$ ng init
The specified command init is invalid. For available options, see ng help.
$ ng version
_ _ ____ _ ___
/ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ | '_ / _| | | | |/ _ | '__| | | | | | |
/ ___ | | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/
@angular/cli: 1.0.3
node: 6.9.4
os: darwin x64
@angular/animations: error
@angular/common: error
@angular/compiler: error
@angular/core: error
@angular/forms: error
@angular/http: error
@angular/platform-browser: error
@angular/cli: 1.0.3
@angular/compiler-cli: error
@angular/platform-browser-dynamic: error
@angular/platform-server: error
@angular/router: error

[ghost]

@y2ls02 and @daton89
Those commands no longer exiss.
see https://github.com/asnowwolf/angular-cli/blob/master/docs/documentation/stories/moving-into-the-cli.md

[shyamalm88]

Working with master

git clone https://github.com/angular/angular-cli.git
cd angular-cli
npm link
npm link is very similar to npm install -g except that instead of downloading the package from the repo, the just cloned angular-cli/ folder becomes the global package. Additionally, this repository publishes several packages and we use special logic to load all of them on development setups.

Any changes to the files in the angular-cli/ folder will immediately affect the global @angular/cli package, allowing you to quickly test any changes you make to the cli project.

Now you can use @angular/cli via the command line:

ng new foo
cd foo
npm link @angular/cli
ng serve
npm link @angular/cli is needed because by default the globally installed @angular/cli just loads the local @angular/cli from the project which was fetched remotely from npm. npm link @angular/cli symlinks the global @angular/cli package to the local @angular/cli package. Now the angular-cli you cloned before is in three places: The folder you cloned it into, npm's folder where it stores global packages and the Angular CLI project you just created.

You can also use ng new foo --link-cli to automatically link the @angular/cli package.

Please read the official npm-link documentation and the npm-link cheatsheet for more information.

To run the Angular CLI test suite use the node tests/run_e2e.js command. It can also receive a filename to only run that test (e.g. node tests/run_e2e.js tests/e2e/tests/build/dev-build.ts).

As part of the test procedure, all packages will be built and linked. You will need to re-run npm link to re-link the development Angular CLI environment after tests finish.

[FlameStriker]

hey can you please tell me how to add angular 2 component into existing java web application project.
i created angular 2 component and now i want to add it into java project. please i need help for these issue.

[ORESoftware]

ng init no longer works

here is the solution

https://github.com/angular/angular-cli/issues/5431

[rawatnaresh]

you can use yarn package manager to install angular-cli or other dependencies to the existing project.

[brahimdev]

please i need help i have to run exiting angular cli project with client server so i'm stacking how to do that i test some command but i still don't have solution

[muneebshafiq]

For me npm install did the thing.

[Priyanka1234512345]

i m making a dist folder but inside dist folder one more folder is build by own which is present in my system how to remove this.....?????