Angular 2
Instalar complementos de terceros con [email protected]

Observaciones

 'lodash': {
   format: 'cjs',
   defaultExtension: 'js',
   main: 'index.js'
 }

 'moment': {
   main: 'moment.js'
 }

Añadiendo librería jquery en proyecto angular-cli.

1. Instalar jquery a través de npm:

 npm install jquery --save 

Instalar mecanografías para la biblioteca:

Para agregar mecanografías para una biblioteca, haga lo siguiente:

typings install jquery --global --save

2. Agregue jquery al archivo angular-cli-build.js a la matriz vendorNpmFiles:

   Esto es necesario para que el sistema de compilación recoja el archivo. Después de configurar el angular-cli-build.js debería verse así:

Examine los node_modules y busque los archivos y carpetas que desea agregar a la carpeta del proveedor.

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

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      // ...
      'jquery/dist/*.js'


    ]
  });
};

3. Configure las asignaciones de SystemJS para saber dónde buscar jquery:

   La configuración de SystemJS se encuentra en system-config.ts y, una vez que se haya realizado la configuración personalizada, la sección relacionada debería verse así:

/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery'
};

/** User packages configuration. */
const packages: any = {
            
// no need to add anything here for jquery

};

4. En su src / index.html agregue esta línea

<script src="vendor/jquery/dist/jquery.min.js" type="text/javascript"></script>

Sus otras opciones son:

<script src="vendor/jquery/dist/jquery.js" type="text/javascript"></script>

o

<script src="/vendor/jquery/dist/jquery.slim.js" type="text/javascript"></script>

y

<script src="/vendor/jquery/dist/jquery.slim.min.js" type="text/javascript"></script>

5. Importación y uso de la biblioteca jquery en los archivos de origen de su proyecto:

   Importe la biblioteca jquery en sus archivos fuente .ts como este:

declare var $:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
    $.("button").click(function(){
       // now you can DO, what ever you want 
     });
     console.log();
  }
}

Si siguió los pasos correctamente, ahora debería tener una biblioteca jQuery trabajando en su proyecto. ¡Disfrutar!

Agregar una biblioteca de terceros que no tenga mecanografía

¡Note, esto es solo para angular-cli hasta la versión 1.0.0-beta.10!

Algunas bibliotecas o complementos pueden no tener tipografías. Sin estos, TypeScript no puede escribirlos y, por lo tanto, provoca errores de compilación. Estas bibliotecas se pueden seguir utilizando de forma diferente a los módulos importados.

1. Incluya una referencia de script para la biblioteca en su página ( index.html )

   <script src="//cdn.somewhe.re/lib.min.js" type="text/javascript"></script>
   <script src="/local/path/to/lib.min.js" type="text/javascript"></script>
   

   • Estos scripts deben agregar un global (por ejemplo, THREE , mapbox , $ , etc.) o adjuntarlos a un global

2. En el componente que los requiere, use declare para inicializar una variable que coincida con el nombre global utilizado por la biblioteca. Esto permite que TypeScript sepa que ya se ha inicializado. ¹

   declare var <globalname>: any;
   

   Algunas bibliotecas se adjuntan a la window , que deberían extenderse para poder acceder a la aplicación.

   interface WindowIntercom extends Window { Intercom: any; }
   declare var window: WindowIntercom;
   

3. Utilice la lib en sus componentes según sea necesario.

   @Component { ... }
   export class AppComponent implements AfterViewInit {
       ...
       ngAfterViewInit() {
           var geometry = new THREE.BoxGeometry( 1, 1, 1 );
           window.Intercom('boot', { ... }
       }
   }
   

   • NOTA: Algunas bibliotecas pueden interactuar con el DOM y deben usarse en el método de ciclo de vida del componente apropiado.