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

_> Please provide us with the following information:

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.

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

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.

@nbora98

@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

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

ng build -prod

gives me :

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

@daton89

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

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.

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.

ng init no longer works

here is the solution

#5431

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

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

For me npm install did the thing.

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

@nbora98

@nbora98
Can you please explain the src folder I have "project>fuse>e2e-node_module-src-browserlistrc-editorconfig...."
How to open the existing project has enclosed in the given above folder.
Thanks for posting the solution to existing project.

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.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

phil123456 commented on Mar 2, 2017

nbora98 commented on Mar 6, 2017

lagofvc commented on Mar 30, 2017

tanzeelrana commented on Apr 1, 2017

tanzeelrana commented on Apr 1, 2017

daton89 commented on May 18, 2017

kithoffman commented on May 18, 2017

shyamalm88 commented on May 25, 2017

FlameStriker commented on Jul 7, 2017

ORESoftware commented on Jan 5, 2018

rawatnaresh commented on Sep 25, 2018

brahimdev commented on Mar 17, 2019

muneebshafiq commented on Aug 22, 2019

Priyanka1234512345 commented on Oct 17, 2019

Balarama888 commented on Feb 26, 2021

angular-automatic-lock-bot commented on Mar 29, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions