navigationend - angular 2: agregar bibliotecas de terceros

router events subscribe angular 4

Question

Estoy tratando de comenzar a usar angular 2 cli.
Quiero usar momentjs en mi proyecto, así que esto es lo que he hecho:
1. proyecto creado usando angular cli.
2. ejecute npm install --save moment
3. desde la carpeta src ejecute typings init + typings install --save moment .
4. momento añadido a los módulos del sistema:

System.config({
  packages: {
    app: {
      format: ''register'',
      defaultExtension: ''js''
    },
    moment: {
      map: ''node_modules/moment/moment.js'',
      type: ''cjs'',
      defaultExtension: ''js''
    }
  }
});

5. import * as moment from ''moment''; agregada import * as moment from ''moment''; a mi componente deseado.
6. ejecutando ng serve y obteniendo:

[DiffingTSCompiler]: Typecript encontró los siguientes errores: app / angular-day-picker.ts (2, 25): No se puede encontrar el módulo ''momento''. Error: [DiffingTSCompiler]: Typecript encontró los siguientes errores: app / angular-day-picker.ts (2, 25): No se puede encontrar el módulo ''momento''. en DiffingTSCompiler.doFullBuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:202:29) en DiffingTSCompiler.rebuild (/ Users / vioffe / personal / angular-day-picker / node_modules / angular-cli / lib / broccoli / broccoli-typescript.js: 101: 18) en DiffingPluginWrapper.rebuild (/ Users / vioffe / personal / angular-day-picker / node_modules / angular-cli / lib / broccoli / diffing-broccoli-plugin.js: 87: 45) en / Users / vioffe / personal / angular-day-picker / node_modules / angular-cli / node_modules / angular-cli / node_modules / broccoli / lib / api_compat. js: 42: 21 en lib $ rsvp $$ internal $$ tryCatch (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js : 1036: 16) en lib $ rsvp $$ internal $$ invokeCallback (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js : 1048: 17) en / Users / vioffe / personal / angular-day-picker / node_modules / angular-cli / node_modules / angular -cli / node_modules / rsvp / dist / rsvp.js: 331: 11 en lib $ rsvp $ asap $$ flush (/ Users / vioffe / personal / angular-day-picker / node_modules / angular-cli / node_modules / angular-cli /node_modules/rsvp/dist/rsvp.js:1198:9) en doNTCallback0 (node.js: 430: 9) en process._tickCallback (node.js: 359: 13)

Aquí está mi archivo tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "",
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "rootDir": ".",
    "sourceMap": true,
    "sourceRoot": "/",
    "target": "es5"
  },
  "files": [
    "typings/main.d.ts"
  ],
  "exclude": [
    "typings/browser.d.ts",
    "typings/browser"
  ]
}

¿Qué hice mal? No puedo encontrar en los documentos una guía para agregar librerías de terceros.

Answer 1

Aún así Angular-cli tiene algún problema con la integración de la biblioteca de terceros. Hasta que lo arreglen adecuadamente, puedo darte una oportunidad. Digamos que quieres usar _ of lodash en tu código. Entonces te daré mi escenario de código de trabajo

Para instalar lodash

npm install lodash --save
typings install lodash --ambient --save

antes de eso, asegúrese de instalar tipings a nivel mundial

npm install typings -g

Luego, en su angular-cli-build.json, asegúrese de que permanezca así

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

y en su system-config.ts:

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

 /** User packages configuration. */
 const packages: any = {
   ''lodash'': {
     format: ''cjs''
   }
 };

en su src / index.html agregue esta línea (Esta es la solución extraña)

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

ahora en su componente donde desea usar lodash, escriba de esta manera

declare var _:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
     console.log(_.chunk([''a'', ''b'', ''c'', ''d''], 2));
  }
}

funcionó para mí :) He utilizado enormes bibliotecas de terceros en mi proyecto angular2 a través de angular-cli. Espero que te ayude también

Editar:

Si no obtiene ningún npm para sus bibliotecas de terceros. Haga una carpeta de assets debajo de su carpeta src . Luego puede agregar carpetas separadas para js , css e images . Coloque su js de terceros dentro de la carpeta js . Luego debe hacer referencia al archivo js en su index.html de esta manera:

<script src="assets/js/your_js.js"></script>

Ahora, cuando haga un ng serve o ng build , actualizará automáticamente la carpeta pública con sus assets/js . Espero que entiendas todo el escenario :)

Answer 2

Actualmente no estoy usando moment.js en este momento. Así que no estoy seguro, pero me parece que está tratando de usar moment.js como un módulo de mecanografía y tal vez no sea un módulo de mecanografía. Sugiero otro enfoque. No use moment.js como módulo para importar, sino que use un archivo d.ts en su lugar. Para lograr esto, uso tsd: Abra un cmd:

• npm install tsd -g

• Instalación global de tsd

• cd [el directorio de tu proyecto]

• Cambiar a la raíz de tu proyecto

• tsd init

• Entre otras cosas, crea un archivo tsd.json para realizar un seguimiento de los archivos d.ts instalados

• tsd install moment -save

Después de esto, obtuve la finalización del código en mecanografiado después de: momento.

No probé más ...

Ahora estoy usando typings , en lugar de tds, como administrador de definiciones TypeScript. Tds ahora está en desuso.

Probablemente pueda instalar moment.d.ts así: tipings install moment --ambient --save

Answer 3

Consulte https://coryrylan.com/blog/angular-2-cli-adding-third-party-libraries , para saber cómo agregar la biblioteca de terceros con systemjs.

Answer 4

Cuando se incluyen bibliotecas de terceros, hay dos partes ... el código de JavaScript que desea ejecutar y los archivos de definición para darle al IDE todo lo bueno que está fuertemente tipado.

Obviamente, el primero debe estar presente para que la aplicación funcione. La forma más fácil de conseguirlo es incluir la biblioteca de terceros con una etiqueta <script src="thirdLib.js"> en la página html que aloja su aplicación Angular 2. Eso no obtendrá definiciones, por lo que no tendrá bondad IDE, pero la aplicación funcionará. (para evitar que el IDE se queje de que no conoce la variable ''thirdLib'', agregue declare var thirdLib:any a su archivo ts. Debido a que es de tipo any el IDE no ofrecerá la finalización del código para thirdLib, pero lo hará tampoco arrojar errores IDE).

Para ejecutar el código y las definiciones , si la lib se escribió en Typecript, puede agregar una referencia a ese archivo ts desde su código con import {thirdLib} from ''thirdLibfolder/thirdLib'' . El archivo ts de la biblioteca, por su naturaleza, tiene tanto el código de ejecución como las definiciones de mecanografiado.

Si la lib no está escrita en Typecript, pero alguna buena alma escribió un archivo de definición thirdLib.d.ts para ella, puede hacer referencia al archivo d.ts con /// <reference path="thirdLibfolder/thirdLib.d.ts" /> en su archivo ts. Y luego aún incluya el javascript real en ejecución con la referencia del script como se mencionó anteriormente.

La ubicación de estos archivos, y si incluye extensiones en la referencia, son específicos de la configuración de su proyecto y del paquete y la herramienta de compilación que está utilizando. Webpack buscará en la carpeta node_modules bibliotecas a las que se hace referencia en la import {... y aceptará una referencia con extensión .ts y sin ella. Meteor arrojará un error si incluye la extensión .ts .

Answer 5

Ejemplo .. Primero necesitamos instalar ChartJS desde npm.

npm install chart.js --save

Ahora que hemos instalado ChartJS, necesitamos decirle a la CLI en el archivo angular-cli-build.js dónde está ubicado el nuevo archivo JavaScript para que pueda agruparse.

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

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ''systemjs/dist/system-polyfills.js'',
      ''systemjs/dist/system.src.js'',
      ''zone.js/dist/**/*.+(js|js.map)'',
      ''es6-shim/es6-shim.js'',
      ''reflect-metadata/**/*.+(js|js.map)'',
      ''rxjs/**/*.+(js|js.map)'',
      ''@angular/**/*.+(js|js.map)'',
      ''chart.js/Chart.min.js'',
    ]
  });
};


const map: any = {
  ''chartjs'': ''vendor/chart.js/''
};


const packages: any = {
  chartjs: { defaultExtension: ''js'', main: ''Chart.min.js'' }
};

Answer 6

La compatibilidad con lib de terceros a través del comando todavía no es compatible.

Haz lo siguiente por el momento:

1. npm momento de instalación
2. copie moment.js de node_modules / moment a src / assets / js / moment.js
3. incluye assets / js / moment.js en tu index.html
4. instale los tipings e importe lib a su archivo .ts donde lo necesite
5. ejecuta ng serve y disfruta usando moment :)

Esta página wiki ofrece una explicación más detallada:

https://github.com/angular/angular-cli/wiki/3rd-party-libs

Answer 7

La respuesta se puede encontrar en el siguiente enlace: https://github.com/angular/angular-cli/issues/274#issuecomment-192490084

Answer 8

Si la biblioteca que desea incluir no está en tipificación, tiene dos formas de incluirla en una aplicación angular 2:

1. usando npm: paso a. instalar biblioteca usando el administrador de paquetes

   paso b. agregue la ruta de la biblioteca al objeto de mapa en el archivo systemjs.config.js.

ejemplo:

''jquery'': ''npm: jquery / dist / jquery.js'', ''d3'': ''npm: d3 / build / d3.js''

paso c. importarlo en app.module.ts ejemplo:

importar ''jquery''; importar ''d3'';

paso d. declararlo

ejemplo: declare var $: any;

declarar var d3: cualquiera;

2. simplemente puede incluir eso en la etiqueta del script en index.html y declararlo.