Setting up Angular 2 in your application is quite time-consuming compare to AngularJS 1. For setting up Angular 1.x, all you need to do is to just add the reference of library but with Angular 2, it requires some more work due to dependency on Grunt or Gulp for build process, TypeScript and it's compiler. And setting this with Visual Studio 2015 is even more time-consuming. Angular Team is aware of this and they came up with a solution and introduced a new command line tool (cli) for Angular 2. Yes, Angular CLI is here for Angular 2 applications.
CLI tools are becoming very useful and handy option to allow users to do all the stuff. Node.js, bower, ruby on rails and many other are already having it. And earlier ASP.NET team also introduced dotnet cli to create ASP.NET application. So why not for Angular 2? It's thoughtful and brilliant idea. At the time of writing this article, Angular CLI is in beta stage.
Angular CLI is very powerful and comes with lots of capabilities. You can create new Angular 2 application, build it, compile it, test it against unit test case, run it in your browser with live reload, deploy it in production. Phew!!! Start to end everything… In fact, you can also generate new components, routes, services and pipes for your application.
How to install and do magic with Angular CLI?
To use Angular Cli, you need to have Node 4 or greater installed on your system. Let's first install Angular Cli on system. Go to npm and execute following command to install it globally.
It will take some time for installation to finish. Now, let's create a new project. Before creating new application just run following command to fix npm permission related errors.
So let's create a sample application.
Once you run this command, you should following screen where node.js is downloading the packages and installing it.
And if you visit the folder, you should see following structure. "src" folder will be having your typescript files and components.
Now without doing anything, let's run this application. So select the directory and run following command.
And you will get a URL on command prompt. Open the URL in browser and you should see your Angular 2 application running in browser. Cool.. Isn't it.. Following are the other commands.
As mentioned earlier, you can also create new classes, components, directives, services and pipes to your application via Angular CLI. You need to use ng generate or ng g command.
You can also create route via Angular CLI.
This will create a folder named "test" and also create test component, related style sheets and HTML file. But if you don't wish to have separate stylesheet and html file, and want to use inline html template and style then run following command.
Below image shows the difference between two commands.
And below is the code for newly generated component.
Notice that html template and styles are part of class component metadata.
You can also lint and format your code.
At the time of writing this post, Angular CLI is in beta stage so you may encounter some errors while working with this. But it's a great tool to configure and start Angular 2 applications. The CLI tool is capable of doing all things from creating the application and deploying the application.
Thank you for reading and I hope it helped you. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.
how do i add some server side routes.
How to use the Angular CLI generated code with VS2015 IDE?
I'm interested in adding a SPA page into a Core RC2 project, but to scaffold it using the Angular CLI (eg a Dashboard page written in Angular) .
Is it possible to Create a new MVC Core RC2 app, and THEN use an external tool (the Angular CLI) to scaffold the SPA page (and its sub-pages) that sit INSIDE the VS2015 project? How would Visual Studio communicate with those Angular pages that were scaffolded with an external tool?
As of now, there is no way to open Angular CLI project with VS 2015 IDE. And there is no way to integrate Angular CLI project automatically in Core RC 2 Project. I understand your concern as currently configuring Angular 2 with ASP.NET Core project is a pain but that's how it is as of now. Angular CLI is still in beta phase, you may expect this feature in future.
How does one open the generated project within visual studio 2015? I can do it with VS Code but want it in VS 2015.
As of now, I don't think so it is possible to open Angular cli project to open in VS 2015. Only VS Code has option to "Open Folder". Since it is in beta stage, we can expect the VS 2015 support in future.
Installed Angular-cli but while creating new project using ng new application-name. Getting error as ng: not found. Please help to resolve this issue.
That's strange. I tried to install on another machine and it worked successfully. I think it's an issue with npm rather than angular-cli. Check out this github issue link where others faced similar issue and it was due to NPM.
Let me know if this helps you!!!!
I check issue log comments, they are suggesting to use nvm instead of npm. I also tried to add alias ng= PATH in .profile but my proxy settings are there in .profile. Can you suggest any other alternatives?
Can you please check your NPM version? It should be greater than 4. Also, can you please uninstall npm and then install it again? I know It's a weird idea but I believe it's issue with your npm only.