angular / angular-cli Goto Github PK
View Code? Open in Web Editor NEWCLI tool for Angular
Home Page: https://cli.angular.io
License: MIT License
CLI tool for Angular
Home Page: https://cli.angular.io
License: MIT License
ng new todoapp
cd todoapp
and ng serve
index.html
change angular version and systemjsOur broccoli plugins in angular/angular are written in TypeScript, because it's a better language for a large team collaborating on a large-scale application, and because Angular is invested in TypeScript.
angular-cli project should probably do the same.
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js" "i" "-g" "angular-cli" npm ERR! node v4.0.0
npm ERR! npm v2.14.2
npm ERR! code 128
npm ERR! Command failed: git -c core.longpaths=true clone --template=C:\Users\Hans\AppData\Roaming\npm-cache_git-remotes_templates --mirror [email protected]:ember-cli/ember-cli.git C:\Users\Hans\AppData\Roaming\npm-cache_git-remotes\git-github-com-ember-cli-ember-cli-git-d003f125
npm ERR! Cloning into bare repository 'C:\Users\Hans\AppData\Roaming\npm-cache_git-remotes\git-github-com-ember-cli-ember-cli-git-d003f125'...
npm ERR! Could not create directory '/home/Hans/.ssh'.
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Hans\npm-debug.log
angular-cli suggests a command-line interface. However, we intend this tool will also serve as the backend for IDE/editor frontends which create or update your angular project. This could cause some confusion, or vendors may hesitate to use it for that purpose.
I think we should either:
I prefer the latter as it's extra-explicit, but it might cause us more work/releases.
Similar to EmberApp's import method, our Angular2App should have an import method, allowing you to include assets that will end up in the concatenated dist files.
In practice this will often be used by addons in their included
hooks. (#7)
We should be explicit about this dependency in the docs since the generator does not actually require v4 and it is easy to assume that things are just broken if you don't catch the warning..
The current version of the broccoli-typescript plugin directly logs any compiler error to the console, using console.log
, instead of throwing it for Broccoli to catch.
We need to change this so whenever we broccoli serve
or ng serve
a project, broccoli can output any compilation errors to the browser for the user to see when reloading the page.
/cc @IgorMinar
Currently we're just transpiling the source files form TypeScript to JavaScript, and then having SystemJS load the individual files through ajax.
Instead of doing that, we want our broccoli pipeline to concatenate all the source files (output as System.register), and similar to ember-cli, have our apps load only 2 files: vendor.js and app.js
This should speed up the load of apps as they get big and contain a lot of small files.
We should start the testing infrastructure for this project.
We can't use Karma as angular-cli is a command line tool, and there's no need for browsers.
We'll probably go with Mocha, following in ember-cli's footstep, and getting inspired by their already working testing infrastructure.
Let's implement the included
addon hook, to allow addon to import assets into an ng2 application.
We can follow ember-cli example to call this hook.
Related #6
Hello,
I've seen @IgorMinar 's presentation of angular-cli & @pkozlowski-opensource talk about ES2015, modules, System, JSPM etc while at AngularConnect in London and found the idea of Angular CLI to be pretty similar to 2 small projects I have created recently:
Since @IgorMinar mentioned that community participation was welcomed, here I go! :)
I don't know how far you guys are willing to go with Angular CLI and how prescriptive you want to be, but maybe some ideas below would be worth discussing.
Here's an overview of my projects:
ModernWebDevBuild is based on Google's Web Starter Kit (heavily tweaked/enhanced) and can be used to:
ModernWebDevBuild has minimal requirements regarding the project structure and the presence of some files, but I think this is positive as it provides a good starting point for larger projects.
There are some major features still missing such as testing integration, configurability & extensibility, but I think that it is already useful as is.
ModernWebDevGenerator is a Yeoman generator that integrates the use of ModernWebDevBuild (which is just one npm dep) and generates a working project starting point. It integrates some code organization/design guidelines for structuring the application components, pages, etc in a logical manner while considering componentization as first-class concept by regrouping all pieces of a given component together (e.g., component class, component styles, component tests, ...). Given that the build is flexible enough, it doesn't prevent users from reorganizing as they wish.
Both projects are pretty opinionated thus I suppose that there are choices in there that you wouldn't impose on your users (e.g., Gulp, SystemJS, JSPM, SASS, ...), but maybe the feature set and/or necessary extensibility could be integrated within Angular CLI and/or Angular Toolkit?
I think that:
Most importantly, I think that having a Google-backed basis for all this, with enough anchor points for extensions would be awesome for larger projects requiring more than Plunker :)
By having this one central piece in the Angular "build puzzle", it might be easier to make related projects evolve in the good direction; for example for now TypeScript can look up modules in node_modules but is totally incapable of doing the same with jspm_packages, although that could be really nice.
I want to use d.ts files E.g.:
/// <reference path="./../../typings/breeze/breeze.d.ts" />
Webstorm and VS Code recognize the definitions but not the TS-Compiler of angular-cli?
I realize this is probably upstream, but thought I'd mention it since you'll have to bump the ember-cli version to fix it.
angular-cli 0.0.10
ng --version
version: 1.13.8
Invalid watchman found, version: [4.1.0] did not satisfy [^3.0.0], falling back to NodeWatcher.
Visit http://www.ember-cli.com/user-guide/#watchman for more info.
node: 0.12.7
npm: 2.14.8
os: linux x64
Ubuntu 15.10
As it seems to be recommended, I decided to install watchman.
When creating a new project (and with other commands), I see this message:
Invalid watchman found, version: [4.1.0] did not satisfy [^3.0.0], falling back to NodeWatcher.
I've tried installing watchman 4.1, 3.9, 3.8 (from source using the git tag), but all of these versions show the warning.
For some reason, watchman v3.7.0 is the one that works.
Since watchman has been fixing some serious sounding bugs, it'd be nice to be able to use the latest version.
https://facebook.github.io/watchman/docs/release-notes.html
Currently ember-cli initializes the git repo with the following commit message:
Author: Tomster <[email protected]>
Date: ..
Initial Commit from Ember CLI v1.13.1
_...,
,:^;,...;
-+===;. ,,--++====++-,,, .: /.....,
:::::~+++++#:,+#++++++++++++++++++#*..: /,......
(,,,,,,::=+++##++++++++++++++++++++++#. :....../
...,,,,,::++++++++++++++++++++++++++++++*..,...:
*..+...,#@@@@@@@@@++++++++++++++++++++++#*....*
@#,;##############@@@+*+#@@@@@@@@@@#*++#..<
*@##@@+,-*^^^*-+@####@@@######@@@#####@@,,,+
@#@* @#@@@@#@@+--*^^*--#@@@@@@#
@#@. @# @##+++@#, .@@#@@
#@# @@ +@@++++#@@ @@ :@@
:@#* @#@++++++@#* #@ @@+
:*+@@#;,.__.+@#@+,-^^.++@# @@++
;* :*@@@##@@@@;++r._j^.+@##@+,.__,,@@++.
/* ........+++++++++++++#@@@@@###@@#++++,
,: ...,@@@#++===----==@@@####,,....+++++
.: ......@@##@\ ; :@####@,,...... +++.
; .........@###, ; ;xx#@;,,..... *;+,
| ........,*;xxxx--^--=xxx,........ :+#;
; ......,,;xxxxxxxxxxxxx;,..... *+#
; ......,::xxxx;. ...... +. .
*; ......... +### .... / ,. /:| ,.
.+: ... ;##++##, . ,#. (..v..;*./
** ## ###* .:*&&&+. \.,....<,
#&+**==-..,,__ ;## ### :,*+&&&&&&&v+#&,,.._/
#&&&&*...,::,,. ##; ,##* .*****;:&&&&&&&&&
,+*+;~*..*** *.* ### ###* ******* *+#&;*
##,;## **** :, **
##### ## ### ###, ######## .##### ;## ##
####### ;## #### ,###. ########## ######## ### ####
### ### ### ########## #### #### ,## ### #######*
### ,### ##############: ## ### #### ,## :#### ### ##;
########## ########### ## .## ,### ####### ##### :######
###### .###### #### ## ### ### ######* :##### ####
############# #### ################ ######## ###
#####* *#* #: :### *###* *#### #*
Using Ubuntu Linux. nodejs 4.2.1, angular-cli 0.0.10
I want to nest a component in another directory for organization.
(This issue affects all generate commands)
ng generate component my-category/my-component
version: 1.13.8
installing component
create src/app/components/my-category/my-component/my-category/my-component.css
create src/app/components/my-category/my-component/my-category/my-component.html
create src/app/components/my-category/my-component/my-category/my-component.ts
installing component-test
create src/app/components/my-category/my-component/my-category/my-component.spec.ts
For some reason, this puts an extra my-category directory in the path; this shouldn't happen.
With more subdirectories, it's clear that the argument is doubled when generating the path.
ng generate pipe 1/2/3/4
version: 1.13.8
installing pipe
create src/app/pipes/1/2/3/4/1/2/3/4.spec.ts
create src/app/pipes/1/2/3/4/1/2/3/4.ts
Angular2 has added a .nvmrc (https://github.com/angular/angular/blob/master/.nvmrc). I believe angular-cli should integrate this as well to give developers an easier time switching to the project's recommended nodejs version.
What do I have to do to install for example bootstrap and put it (automatically) into the dist folder?
The project doesn't use a task runner as gulp or grunt? It uses it's own type of taskrunner (ember-cli)?
Is it possible (recommended) to use gulp with this project?
ng build --environment=production
generate dist with dev versions of angular and systemjs, and my app files with .ts and source maps.
I've forked, cloned and played around a bit with angular-cli. One thing that surprised me is that it uses ember-cli. As far as I saw, it's not that extensible (we gotta follow they API) and there are bugs like #12.
PathLocationStrategy
requires server rewrites to be setup. We should do this OOB since we want to promote the use of this strategy over hash location strategy.
Currently the initial commit message of newly generated projects is just one line.
We can expand this to links pointing to where issues can be reported, where to get help for Angular2 or the CLI tool, etc.
We can also include ASCII art like ember-cli.
This is just a nice to have.
Obviously there's extensive name leakage from the wrapped EmberCLI library, but this one has present-day consequences:
http://www.emberaddons.com/?query=angular
There's only a single angular addon listed, but I moved my app over to angular-cli today partly to start packaging some of my code as addons. So I anticipate that changing.
We should overwrite ember-cli's test command, as it uses testem and is setup to test ember-cli applications.
We'd want to it to fire-up karma instead.
We'll need to figure out the story for karma pre-processors, combined with the broccoli build pipelines, as we need to account for addons in projects.
Related #10
Same as #3, just for the init
command.
Hello.
I like to use Jade and Less, but I can't understand how I can change generator?
I would like that generator creates less and jade instead of html or css.
Currently we initialize new Angular2 projects with a commit who's email isn't very helpful.
It would be great if we had an email in case people needed to contact us in private, something to be "advertised" here.
@IgorMinar any ideas?
Running node v4.2.1
Installed bower, angular-cli and typescript
ng new greetings-ac
ng serve
version: 1.13.8
Could not find watchman, falling back to NodeWatcher for file system events.
Visit http://www.ember-cli.com/user-guide/#watchman for more info.
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
Build successful - 2610ms.
Slowest Trees | Total
----------------------------------------------+---------------------
DiffingTSCompiler | 2495ms
Slowest Trees (cumulative) | Total (avg)
----------------------------------------------+---------------------
DiffingTSCompiler (1) | 2495ms
After opening link at http://localhost:4200
i just see
'Loading...'
in the browser. I see these error msgs in the console:
angular2.dev.js:168 Uncaught RangeError: Maximum call stack size exceededZone.addEventListener @ angular2.dev.js:168obj.addEventListener @ angular2.dev.js:1092Zone.addEventListener @ angular2.dev.js:168obj.addEventListener @ angular2.dev.js:1092Zone.addEventListener @
etc.
When running ng new myproject you will get this:
bower angular-route#* ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/angular/bower-angular-route.git", exit code of #128 fatal: unable to connect to github.com: github.com[0: 192.30.252.128]: errno=Operation timed out
still succeeds, then running: ng serve gives you this expected result:
Module not found: Error: Cannot resolve module 'angular-route'
when then trying to run a bower i angular-route --save:
bower angular-deferred-bootstrap#~0.1.5 ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/philippd/bower-angular-deferred-bootstrap.git", exit code of #128 fatal: unable to connect to github.com: github.com[0: 192.30.252.130]: errno=Operation timed out
Consider generating the initial app integrated with component router.
Add the ability to generate new routes, with something like:
ng generate route 'heroes/:id' hero-details-component
/Users/mattnewell/Projects/NG2TEST/node_modules/angular-cli-github-pages/lib/commands/deploy.js:55
(files) => RSVP.all(files.map((file) => fsCopy(path.join('dist',
^^
SyntaxError: Unexpected token =>
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Class.module.exports.includedCommands (/Users/mattnewell/Projects/NG2TEST/node_modules/angular-cli-github-pages/index.js:9:30)
at /Users/mattnewell/Projects/NG2TEST/node_modules/angular-cli/node_modules/ember-cli/lib/models/project.js:393:61
at Array.forEach (native)
Hey,
After ng new sample-project I ran ng serve and I get this error:
version: 1.13.8
Could not find watchman, falling back to NodeWatcher for file system events.
Visit http://www.ember-cli.com/user-guide/#watchman for more info.
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
2015-10-23 22:51 angular-cli7740 FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
2015-10-23 22:51 angular-cli7740 FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
2015-10-23 22:51 angular-cli7740 FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
events.js:141
throw er; // Unhandled 'error' event
^
Error: watch EMFILE
at exports._errnoException (util.js:837:11)
at FSEvent.FSWatcher._handle.onchange (fs.js:1222:26)
Currently to create a new project, we do:
ng new PROJECT_NAME --blueprint=ng2 --skip-bower
It would be great if the --blueprint=ng2 --skip-bower
part can be omitted.
To do this, we'll need to overwrite ember-cli's new
command, providing our own defaults.
Let's do this in the ng2 addon of angualr-cli.
When I changed some file then the page don't refresh and I see the message:
livereload.js?snipver=1 GET (pending) ember-cli-live-reload.js:6 Pending
The generated projects should have a testing infrastructure with karma setup.
I believe we've already decided NOT to have a test
folder in the generated projects, but instead to have a .spec.ts
file that lives close to each component of the app, which will help with isolation and maintainability. This could be discussed further.
on Windows 8. I started with 'ng serve'. then I changed something and I wait for update a lot of time:
http://i.piccy.info/i9/027b0071fa9fcdda914dbbf8c8804ce4/1445783730/39770/964005/Untitled.png
$ ng generate component newcomponent
C:\angulargen\node_modules\angular-cli-github-pages\lib\commands\deploy.js:55
(files) => RSVP.all(files.map((file) => fsCopy(path.join('dist',
^^
Unexpected token =>
C:\angulargen\node_modules\angular-cli-github-pages\lib\commands\deploy.js:55
(files) => RSVP.all(files.map((file) => fsCopy(path.join('dist',
^^
SyntaxError: Unexpected token =>
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Class.module.exports.includedCommands (C:\angulargen\node_modules\angular-cli-github-pages\index.js:9:30)
at C:\angulargen\node_modules\angular-cli\node_modules\ember-cli\lib\models\project.js:393:61
at Array.forEach (native)
Currently ember-cli does not make use of the cli.name
parameter we pass it, and so it always outputs ember
in its help commands for example.
I already started work in my ember-cli fork to fix that.
I should have a PR for ember-cli soon.
I'll update this issue with my progress in the coming days.
The Angular2App should implement the Addon Hooks of ember-cli
The only hook that doesn't make sense for now is config
, as Angular2 applications don't have configuration settings.
Let's use this issue to track our progress, but open up a new issue for each hook we intend to implement now and work on.
the current scaffold uses a22
I have simple project with router.
Create the ng test
command to use karma start
.
Maybe take the opportunity to abstract some configurations and let the karma-test-shim.js
lighter.
If you build a new project from scratch the *.d.ts files in node_modules/angular2/ are not picked up in visual studio code or sublime text with the typescript plugin.
When a user mails us (or someone else) for help, it would be useful to gather information about their local environment, for example what version of node, npm, angular, libs they are using, log files, etc. This helps us reproduce their problem, and avoids a lot of back-and-forth communication to gather info ourselves.
We need more design thought, but my rough idea is a command for angular-cli that behaves a lot like the Send Feedback link in google properties. A wizard appears prompting user to explain their problem, gathers up the local repro info, and presents them with everything that will be sent off their machine (so they have a chance to prevent secrets being leaked).
I'm unable to import the http module in the project created using angular-cli.
import {Http} from 'angular2/http';
I'm seeing the below error in the console.
GET http://localhost:4200/angular2/http 404 (Not Found)
I checked the angular2 node modules and http.d.ts is available
node_modules/angular2/http.d.ts
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js" "i" "-g" "angular-cli" npm ERR! node v4.0.0
npm ERR! npm v2.14.2
npm ERR! code 128
npm ERR! Command failed: git -c core.longpaths=true clone --template=C:\Users\Hans\AppData\Roaming\npm-cache_git-remotes_templates --mirror [email protected]:ember-cli/ember-cli.git C:\Users\Hans\AppData\Roaming\npm-cache_git-remotes\git-github-com-ember-cli-ember-cli-git-d003f125
npm ERR! Cloning into bare repository 'C:\Users\Hans\AppData\Roaming\npm-cache_git-remotes\git-github-com-ember-cli-ember-cli-git-d003f125'...
npm ERR! Could not create directory '/home/Hans/.ssh'.
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Hans\npm-debug.log
Hi there, I was wondering if you plan to have a inbuilt system for acceptance tests similar to ember-cli?
I am interesting in automatically recording stub tests too for this platform if this is the case, I am the author of a similar feature for ember: https://github.com/QuantumInformation/ember-cli-test-recorder
Version tested: 832b83b
1- Create an angular-cli project:
$ ng new test339
2- Step into it and try to run any of the commands:
$ cd test339
$ ng
/Users/cironunes/work/angular-cli/bin/ng:27
cli({
^
TypeError: object is not a function
at /Users/cironunes/work/angular-cli/bin/ng:27:3
at /Users/cironunes/work/angular-cli/node_modules/resolve/lib/async.js:44:21
at ondir (/Users/cironunes/work/angular-cli/node_modules/resolve/lib/async.js:187:31)
at /Users/cironunes/work/angular-cli/node_modules/resolve/lib/async.js:153:39
at onex (/Users/cironunes/work/angular-cli/node_modules/resolve/lib/async.js:93:22)
at /Users/cironunes/work/angular-cli/node_modules/resolve/lib/async.js:24:18
at FSReqWrap.oncomplete (fs.js:95:15)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.