Cacher is the code snippet organizer for pro developers

ng new

Crea un nuevo proyecto en un nuevo folder con el nombre de aplicación , ejemplo:
ng new scoty --style=”styl”
options:
Creating a new application has a few different options we can use. There are many options that can be seen by typing ng help. I'll show off a few of the important ones here:

• directory: Specify the directory you want to create this project in
• style: (Default: css) The style file default extension. Possible values: css, scss, less, sass, styl(stylus). You can later change the value in ".angular-cli.json" (defaults.styleExt).
• prefix (Default: app) The prefix to use for all component selectors. You can later change the value in ".angular-cli.json" (apps[0].prefix)
• routing (Default: false) Generate a routing module.

ng init

Let's say you already have a folder that you've started working in. The ng init command is here so that you can use the current folder you're already working in. In the folder you are working in, run:
ng init project_name

ng serve

Serving Our Application
Another really cool thing that our CLI allows us to do is to serve our application in the browser. Previously, we would have to create a server using lite-server or create our own Node (or other) server. The Angular CLI let's us do this with one simple command:
ng serve
Just like that, the Angular CLI will build a server for us with webpack and we can view it in browser at http://localhost:4200

ng serve -o o bienng serve --open: abre la aplicación angular en el browser

Generate Parts of Your Application

This is where things get interesting. So far we've just created and instantiated a new project. The ng generate command can do so much for us:

The generate command and the different sub-commands also have shortcut notations, so the following commands are similar:

ng g cl my-new-class: add a class to your application
ng g c my-new-component: add a component to your application
ng g d my-new-directive: add a directive to your application
ng g e my-new-enum: add an enum to your application
ng g m my-new-module: add a module to your application
ng g p my-new-pipe: add a pipe to your application
ng g s my-new-service: add a service to your application

That's a ton of functionality and helps speed up development. First let's talk about the options that we can use for all of the above.

ng generate options

• flat: Don't create the code in it's own directory. Just add all files to the current directory.
• route=: Specify the parent route. Only used for generating components and routes.
• skip-router-generation: Don't create the route config. Only used for generating routes.
• default: The generated route should be a default route.
• lazy: Specify if route is lazy. default true

FOR COMPONENT

--flat: boolean, default false, generate component files in src/app instead of src/app/site-header
--inline-template: boolean, default false, use an inline template instead of a separate HTML file
--inline-style: boolean, default false, use inline styles instead of a separate CSS file
--prefix: boolean, default true, use prefix specified in .angular-cli.json in component selector
--spec: boolean, default true, generate spec file with unit test
--view-encapsulation: string, specifies the view encapsulation strategy
--change-detection: string, specifies the change detection strategy

FOR DIRECTIVE

--flat: boolean, default true, generate directive files in src/app instead of src/app/admin-link
--prefix: boolean, default true, use prefix specified in .angular-cli.json in directive selector
--spec: boolean, default true, generate spec file with unit test

FOR MODULE

--routing: boolean, default false, generate an additional module AdminRoutingModule with just the routing information and add it as an import to your new module
--spec: boolean, default false, add src/app/admin/admin.module.spec.ts with a unit test that checks whether the module exists

FOR PIPE

--flat: boolean, default true, generate component files in src/app instead of src/app/site-header
--spec: boolean, default true, generate spec file with unit test

FOR SERVIVE

--flat: boolean, default true, generate service file in src/app instead of src/app/backend-api
--spec: boolean, default true, generate spec file with unit test

Creating a component inside a module:
ng g component mymodule/user

Build

When we want to prepare our Angular app for deployment, we only need to run one command. ng build

for production:
We can also build for production to get some more efficiently sized bundles. Tree shaking goodness and more!
ng build --prod

Building with Ahead-of-Time Compilation
We can also build with AOT to make sure our Angular app is compiled during build-time instead of in browser at run-time. This can help reduce the size of our app by more than half!
ng build --prod --aot
Once you do that, notice the difference in bundle sizes from the previous non-aot build.

Other commands

Here's the list of commands that we can also run:

• ng test: Run unit tests with karma
• ng e2e: Run end-to-end tests with protractor
• ng get: Gets values for project
• ng set: Sets values for project
• ng version: Get the version of the CLI
• ng lint: Run codelyzer to analyze code
• ng doc: Generate docs for your project
• ng eject: Get access to the webpack configuration files

Historias comunes

Config files

package.json => Here we can specify the package dependencies for the project.
tsconfig.json => defines how the TypeScript compiler generates JavaScript from the project’s files.
typings.json => provides additional definition files for libraries that the TypeScript compiler doesn’t natively recognize.

systemjs.config.js => provides information to a module loader about where to find application modules, ana registers all the necessary packages. It also contains other packages that will be needed by later documentation examples.

Packages

@angular/materail-->/cdk CDK is the short form of component dev kit.

Several components in core/, such as Overlay, have had their prefix changed to cdk- (short for "component dev kit"). This signifies that these are general-purpose tools for building components that are not coupled to Material Design.The old selectors are still available as deprecated but will be removed in the next release. The CSS classes have been changed.