javascript - tour - tutorial angular 4

Desarrollo en Angular2 con TS pero sin NPM

Question

Todas las guías sugieren instalar npm , pero estoy buscando un camino sin él.

Hay archivos Angular2 disponibles , pero ninguno de ellos es código TypeScript.

Entonces, ¿qué debo hacer? ¿Necesito Angular2.ts o Angular2.ts específicos Angular2-xx.js y .d.ts ?

ACTUALIZACIÓN: he descargado Angular2 través de NPM y he obtenido el árbol fuente completo, en el que es difícil encontrar cosas específicas. La búsqueda de .d.ts para Angular2 no Angular2 resultados. Muchos archivos .ts y .d.ts encuentran en la enorme colección de códigos.

Answer 1

De hecho, estos archivos son una versión empaquetada de Angular2 y sus dependencias. Se pueden usar dentro de una aplicación escrita con TypeScript. Como cuestión de hecho, TypeScript no se puede utilizar de forma inmediata en los navegadores. Debe preprocesarlos para compilarlos en el código ES con el compilador de TypeScript o transpíralos en el navegador directamente con la biblioteca de TypeScript.

Esto se puede configurar dentro de SystemJS directamente a través de su transpiler configuración del transpiler (ver a continuación).

Primero simplemente agregue estos archivos en su archivo HTML:

<script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/http.dev.js"></script>

Si desea implementar una aplicación sin NPM, puede transpilar sus archivos de TypeScript dentro del navegador. Es lo que hacemos al usar plunkr. Para esto, necesita configurar SystemJS como se describe a continuación:

<script>
  System.config({
    transpiler: ''typescript'', 
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    packages: {
      ''app'': {
        defaultExtension: ''ts''
      }
    } 
  });
  System.import(''app/main'')
        .then(null, console.error.bind(console));
</script>

Tenga cuidado de definir sus archivos de TypeScript en una carpeta de app

Aquí hay un plunkr simple (y completo) que describe cómo hacerlo: https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info .

Puede descargar el código correspondiente y usar su código localmente con un servidor HTTP estático como http-server sin usar NPM. Este podría ser un buen punto de partida para su caso de uso ...

Editar

Si sus archivos de TypeScript son compilados por VS, debe adaptar la configuración de SystemJS, tal como se describe a continuación:

<script>
  System.config({
    packages: {
      app: {
        defaultExtension: ''js'',
      }
    }
  });
  System.import(''app/boot'')
        .then(null, console.error.bind(console));
</script>

De esta forma, SystemJS cargará sus archivos JS cuando realice una importación. Por ejemplo: System.import(''app/boot'') usará la app/boot.js y no la de TypeScript