change - ¿Cómo agregar una biblioteca de terceros al usar angular-cli?

page title angular 4

Question

Quería probar creando una aplicación Angular 2 con angular-cli ( https://github.com/angular/angular-cli ) y luego usar ng2-material ( https://github.com/justindujardin/ng2-material ) para los componentes de la interfaz de usuario. Pero no entiendo cómo / dónde tengo que incluir la biblioteca ng2-material para poder usarla.

ng new myproject un proyecto con ng new myproject luego comencé el servidor con ng serve y abrí la página web, que funcionó bien. El siguiente paso, instalé ng2-material con npm install ng2-material --save . Luego agregué MATERIAL_PROVIDERS a bootstrap de angular como se muestra aquí https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master/app/bootstrap.ts .

Esto da como resultado un mensaje de error GET http://localhost:4200/ng2-material/all 404 (Not Found) en el navegador web, y simplemente no puedo averiguar cómo deshacerme de él.

angular-cli parece estar haciendo algo para crear una carpeta dist donde algunos de los módulos de nodo que se usan en index.html terminan, pero no veo dónde ni cómo se configura.

Answer 1

Intente configurar SystemJS en el index.html esta manera:

System.config({
    packages: {
        app: {
            format: ''register'',
            defaultExtension: ''js''
        },
        ''node_modules/ng2-material'': {
            format: ''register'',
            defaultExtension: ''js''
        }
    },
    paths: {
        ''ng2-material/all'': ''node_modules/ng2-material/all''
    }
});

Answer 2

[EDITAR 29/09/2016] Ahora que angular-cli está usando webpack iso system.js, esta respuesta ya no tiene mucho sentido. Verifique las páginas '' 3d party lib installation '' e '' global lib installation '' en la wiki de angular-cli.

[EDITAR 10/05/2016] Esto ahora se describe en detalle en la wiki de cli angulares .

Esto funcionó para mí:

En el ember-cli-build.js , agrega la dependencia a vendorNpmFiles , por ejemplo

module.exports = function (defaults) {
  var app = new Angular2App(defaults, {
      vendorNpmFiles: [
          ''a2-in-memory-web-api/web-api.js''
      ]
  });
  return app.toTree();
}

(donde a2-in-memory-web-api / web-api.js es un archivo en mi carpeta node_modules )

En el index.html agregas la siguiente línea:

<script src="vendor/a2-in-memory-web-api/web-api.js"></script>

Finalmente reinicia su servidor.

No lo he probado con material angular pero entiendes la idea.