Angular Cli new project with Sass and Bootstrap + Angular Cli Snippets

exhtml

7/11/2018 - 8:10 AM

Angular Cli new project with Sass and Bootstrap + Angular Cli Snippets

angular-cli-scss-bootstrap

Rendered
Source

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:

"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

Generates the webpack.config.js file:
ng eject
Install the new dependencies generated by CLI:
npm install
Now we have:

"ejected": true in .angular-cli.json
webpack.config.js
package.json modified with run scripts

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

webpack.common.js
webpack.dev.js
webpack.local.js
webpack.prod.js

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

Customize angular-cli.json / npm scripts

Add extra scripts to an app

For example bootstrap javascript dependencies:

"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

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

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

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

Working with Sass and Bootstrap

for example: Sass 7-1 Pattern

src/
    scss/
        _variables.scss
        _mixins.scss
        styles.scss

in src/scss/styles.scss:

@import './variables';
@import './mixins';

modify .angular-cli.json:

"styles": [
  "scss/styles.scss"
],

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.json):

"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:

@import 
  'functions',
  'variables',
  'mixins',
  'print',
  'reboot',
  'type';

But you won’t be able to customise it as whenever you add a new path to the styles array inside .angular-cli.json, they get appended as internal CSS between your <head> tags in your index.html

Customise global variables from Bootstrap

The SASS version of Bootstrap has all the default colours, font sizes, backgrounds etc. defined in a separate file (https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss). This allows you to customise it and have your own version of Bootstrap.

Create a _variables.scss and import it in the styles.scss before bootstrap styles:

// styles.scss
@import "variables";
@import "~bootstrap/scss/bootstrap.scss";

In the _variables.scss file provided by Bootstrap, you will see that all variables have the !default keyword at the end. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one This is why we need to import our custom variables first, otherwise they won’t be used when we import Bootstrap.

I usually tend to first start overriding the default colours provided by Bootstrap as such.

$primary: #3498db;
$secondary: #e67e22;
$success: #2ecc71;
$danger: #e74c3c;

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:

@import '~src/scss/variables';
@import '~src/scss/mixins';
@import '~src/scss/base/typography';

Importing bootstrap javascript files

OPTION 1: Available to all components
(https://medium.com/wdstack/angular-7-bootstrap-4-starter-25573dff23f6)

Incluir en angular.json:

// projects > architect > build
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js", // solo se necesitan para Dropdowns, Popovers y Tooltips, luego si usamos ngx-bootstrap no es necesario incluirlo
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Cuando hacemos esto, se inyectan los scripts con etiquetas <script> en el html.

Make Bootstrap available to all the apps' component: (ESTE PASO NO ES NECESARIO SI LOS INCLUIMOS EN EL angular.json NO?)

app.module.ts

import bootstrap from "bootstrap";

OPTION 2: Import scripts in your app
(https://getbootstrap.com/docs/4.3/getting-started/webpack/)

Add to your app entry point (usually index.js or app.js):

import 'bootstrap';

Alternatively, you may import plugins individually as needed:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
//...

Install bootstrap directives

There are two packages:

ng-bootstrap: https://ng-bootstrap.github.io/#/home
ngx-boostrap: 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()

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:

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

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

export class OtherModule {
}

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster