Repository navigation
Adding angular-cli to existing project? On using ng init #755
Description
_> 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.
Activity
pkamdem commentedon May 13, 2016
@jmb-mage
ng initinside root folder and following instructions will do.pkamdem commentedon May 13, 2016
@jmb-mage
When running
ng inityou have the option to provide the source directory asng init --source-dir [my_source_directory]. Default is set tosrc.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
[-]Adding angular-cli to existing project?[/-][+]Adding angular-cli to existing project? On using ng init[/+]pkamdem commentedon May 13, 2016
@jmb-mage
Just complete these steps, and everything went ok.
git clone https://github.com/angular/quickstart.git testcd testnpm installng 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 starthansl commentedon May 13, 2016
Considering this fixed per last message from @jmb-mage
Sri276286 commentedon Oct 26, 2016
@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 commentedon Nov 4, 2016
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 commentedon Jan 3, 2017
@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:
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]
git subtree push --prefix dist origin masterEach time now, just run your prod build, copy the dist folder, commit it, push the subtree (steps 3-6 basically)
3 remaining items
tanzeelrana commentedon Apr 1, 2017
When I run
ng init srcI 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 commentedon Apr 1, 2017
ng build -prodgives me :
daton89 commentedon May 18, 2017
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
kithoffman commentedon May 18, 2017
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
shyamalm88 commentedon May 25, 2017
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 commentedon Jul 7, 2017
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 commentedon Jan 5, 2018
ng initno longer workshere is the solution
#5431
rawatnaresh commentedon Sep 25, 2018
you can use yarn package manager to install angular-cli or other dependencies to the existing project.
brahimdev commentedon Mar 17, 2019
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 commentedon Aug 22, 2019
For me
npm installdid the thing.Priyanka1234512345 commentedon Oct 17, 2019
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.....?????
Balarama888 commentedon Feb 26, 2021
@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.
angular-automatic-lock-bot commentedon Mar 29, 2021
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.