1

when we try to import 3rd party libs in angular 2 cli we are using this,

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      '@angular2-material/**/*.js'
    ]
  });
};

and in system-config.ts we write it like this,

/** Map relative paths to URLs. */
const map: any = {
  '@angular2-material': 'vendor/@angular2-material'
};

/** User packages configuration. */
const packages: any = {
  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  },
  '@angular2-material/checkbox': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'checkbox.js'
  },
  // And so on...
};

and in component

import { Component } from '@angular/core';
import { MdCheckbox } from '@angular2-material/checkbox';

@Component({
  selector: 'my-app',
  template: `<md-checkbox></md-checkbox>`,
  directives: [MdCheckbox]
})
export class AppComponent { }

all library is in .js but what if it's css how do we import it? like how to use fontawesome , sweetalert or bootstrap ?

Rommy
  • 447
  • 3
  • 10
  • 23

1 Answers1

0

If you'd like to pull in a style library (bootstrap/font-awesome) you can place the files in the generated public directory.

Within there I create a style directory and place the files in there for example....

[project-root]/public/style/bootstrap.css

When builds run it will take the contents of public and move it to dist...

[project-root]/dist/style/bootstrap.css

And you can reference these files within index.html like so...

<link rel="stylesheet" href="style/bootstrap.css">
Brocco
  • 62,737
  • 12
  • 70
  • 76
  • thanks for your fast responses, so basically we just copy the .css file from node_module to public folder? but how to import it into component? – Rommy Jun 23 '16 at 02:34
  • Basically, yes. You don't need to import it into a component. What do you think you need to import? – Brocco Jun 23 '16 at 02:36
  • like modal directive? for using bootstrap modal – Rommy Jun 23 '16 at 02:37
  • If you're looking to use bootstrap JS components, I suggest you look into a library like `ng2 bootstrap` instead. https://github.com/valor-software/ng2-bootstrap – Brocco Jun 23 '16 at 02:39
  • @Rommy you can see this answer http://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project/37674735#37674735 – pd farhad Jun 23 '16 at 04:55