markdown Angular Cli新项目，包括Sass和Bootstrap + Angular Cli Snippets

Posted 2021-05-06

### Start the project with angular-cli

New angular project with scss support:  
`ng new my-project --style scss`

*if you want to use sass:*  
`ng new my-sass-project --style scss`  

**if you have an existing project and want to use sass:**  
`ng set defaults.styleExt scss`  

*This adds to .angular-cli.json:*
```javascript
"defaults": {
  "styleExt": "scss",
  "component": {
  }
}
```

Serve project:  
`ng serve`

Build project:  
`ng build --prod`

Create a new component:  
`ng g c my-component`
- without the 'spec' file:  
`ng g c recipes --spec false`
- inside a folder:  
`ng g c recipes/recipes-list`

Create a new directive:  
`ng g d my-directive`

Crete a new pipe:  
`ng generate pipe my-filter`

### Update a project

`ng update`  
* pero cuidado porque updatea a última versión todo lo relacionado con Angular, con lo cual pueden romperse cosas, por ejemplo de Angular 5 a 6 ya no se usa .angular-cli.json sino angular.json


### Eject if you need more custom configuration

1) Generates the webpack.config.js file:  
`ng eject`

2) Install the new dependencies generated by CLI:  
`npm install`

3) Now we have:
* `"ejected": true` in .angular-cli.json
* webpack.config.js
* package.json modified with `run` scripts

4) Refactor ugly webpack config and make configs for local, development and production with WebpackMerge. More info: [https://github.com/elcodabra/angular4-starter/tree/master/config](https://github.com/elcodabra/angular4-starter/tree/master/config)
* webpack.common.js
* webpack.dev.js
* webpack.local.js
* webpack.prod.js

5) If we add `"ejected": false` to .angular-cli.json we can also use the `ng` command:  
`ng build --prod`  
`ng build --prod --aot`

*Ampliar con usos mas avanzados:*  
[https://medium.com/@s2dent/from-angular-cli-to-webpack-2-and-other-production-solutions-with-examples-f127abe06842](https://medium.com/@s2dent/from-angular-cli-to-webpack-2-and-other-production-solutions-with-examples-f127abe06842)


### Customize angular-cli.json / npm scripts

#### Add extra scripts to an app
For example bootstrap javascript dependencies:
```javascript
"scripts": [
	"../node_modules/jquery/dist/jquery.min.js",
	"../node_modules/popper.js/dist/umd/popper.min.js",
	"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
```

#### Extract styles to external css file (when `serve` or `build` not `--prod`)

`ng build -ec`

*Cuando hacemos `ng build --prod` extrae automaticamente los estilos a un archivo externo*

#### Multiple apps integration

* [https://github.com/angular/angular-cli/wiki/stories-multiple-apps](https://github.com/angular/angular-cli/wiki/stories-multiple-apps)

`ng serve --app app2`  
`ng build --app app2`  

#### Hacer que funcione el live-reload del dev server integrado en vista ASP.NET

* [https://github.com/angular/angular-cli/issues/8705](https://github.com/angular/angular-cli/issues/8705)

`ng serve --app app2 --public-host http://localhost:4200`


#### Evitar que se borre la carpeta `dist` cuando `ng serve`

Importante por ejemplo si estamos usándolo en conjunto con *bundleconfig* en proyecto ASP NET. [https://github.com/angular/angular-cli/issues/4366](https://github.com/angular/angular-cli/issues/4366)

`ng serve --app app2 --delete-output-path false`


### Working with Sass and Bootstrap

* for example: [Sass 7-1 Pattern](https://sass-guidelin.es/#the-7-1-pattern)
```
src/
	scss/
		_variables.scss
		_mixins.scss
        styles.scss
```

* in src/scss/styles.scss:
```scss
@import './variables';
@import './mixins';
```

* modify .angular-cli.json:
```javascript
"styles": [
  "scss/styles.scss"
],
```

#### Importing scss files into angular components

* You may be used to having access to your scss variables in all locations, but in Angular all components are self-contained and so are their scss files. In order to use a variable from within a component's scss file, you'll need to import the `_variables.scss` file. 
* You have to `@import` with a relative path from the component. The CLI provides an easy way to import scss files using the `~`. No matter what component scss file we're in, we can do an import like so:
```scss
@import '~sass/variables'; // ~ will tell Sass to look in the src/ folder
```

#### Importing Bootstrap scss files

* install bootstrap:  
`npm install --save bootstrap`

* install dependencies:  
`npm install --save jquery popper.js`

* now you can:  
`@import "~bootstrap/scss/bootstrap";`

* You also can use `includePaths` to tell sass to look in bootstrap folder (in angular-cli.json):
```javascript
"styles": [
  "styles.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "../node_modules/bootstrap/scss"
  ]
},
```

With this, we don't need to use the `~`. For example, let's import only the Bootstrap base tools:

src/sass/styles.scss:  
```scss
@import 
  'functions',
  'variables',
  'mixins',
  'print',
  'reboot',
  'type';
```

#### Install bootstrap directives

There are two packages:
* ng-bootstrap: [https://ng-bootstrap.github.io/#/home](https://ng-bootstrap.github.io/#/home)
* ngx-boostrap: [https://valor-software.com/ngx-bootstrap/#/](https://valor-software.com/ngx-bootstrap/#/)

### ng-bootstrap

`npm install --save @ng-bootstrap/ng-bootstrap`

* Import the main module in your root module and any additional application modules that make use of the components in this library:
*in the root (top-level) module you'll need to use `.forRoot()`*

```javascript
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
  	AppComponent, ...
  ],
  imports: [
    NgbModule.forRoot(), ...
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {
}
```

* Other modules in your application can simply import `NgbModule`:

```javascript
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})

export class OtherModule {
}
```