Separe los archivos Angular2 TypeScript y los archivos JavaScript en diferentes carpetas, tal vez 'dist'

Estoy usando el inicio rápido de 5 minutos del sitio web angular.io, que contiene una estructura de archivo como esta:

angular2-quickstart
 app
   app.component.ts
   boot.ts
 index.html
 license.md
 package.json
 tsconfig.json

tsconfig.json es un bloque de código como este:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
} 

También el package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

Cambio el sourceMap de verdadero a falso, por lo que en el editor de código, el archivo de mapa no se genera nuevamente, pero el archivo js aún se genera.

Quiero trabajar solo en el archivo ts y no quiero obtener un brunch de archivos js y js.map, ¿qué debo hacer para poner todos mis archivos ts en mi carpeta de aplicaciones como floder de desarrollo regular y todos los js y js? mapear archivos en una carpeta llamada dist?

Un buen ejemplo de esto podría ser angular2-webpack-quickstart . ¿Pero no supe cómo lo hacen?

Cualquier consejo sobre cómo hacerlo, por supuesto, no manualmente.

Gracias,

Probablemente tarde, pero aquí hay una solución de dos pasos.

Paso 1

Cambie system.config.js actualizando 'app'a 'dist/app':

var  map = {
    'app':                        'app', // 'dist/app',
    .
    .
    .
};

Ahora se verá así:

var  map = {
    'app':                        'dist/app', // 'dist/app',
    .
    .
    .
};

Paso 2

Cree la carpeta dist .

Edite tsconfig.json y agregue:

"outDir": "dist"

El resultante tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

    "outDir": "dist" // Pay attention here
  },
  "exclude": [
    .
    .
    .
  ]
}

Ejecutar npm starty debería ver todos los archivos .jsy compilados .map.jsen la carpeta dist .

Nota : Repase otras respuestas. Son bastante útiles e informativos también.

Mi solución es un poco diferente a la anterior. Estaba comenzando desde la semilla de inicio rápido Angular2 definida aquí: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

Y luego solo cambió lo siguiente:

• Agregado "outDir": "../dist"atsconfig.json
• Cambió el baseDiratributo interior bs-config.jsona"baseDir": ["dist", "src"]

Luego, npm run startfunciona como antes (incluso html / css y otros archivos sin copiar), pero los archivos compilados .jsy .mapintegrados dist/appno contaminarán su src/appdirectorio.

Tenga en cuenta que aún no he probado cómo afecta esto a las pruebas.

Puede que también llegue tarde, pero hice esto.

Primero haz lo que dijo Raheel Shan .

Luego crea la carpeta dist .

Después de crear la carpeta, vaya al archivo tsconfig.jsony agregue esto:

"outDir": "dist"

La resultante tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Si ahora ejecuta npm starty guarda un archivo, debería ver todo el compilado .jsy .map.jsen la carpeta dist .

Gracias raheel shan, su respuesta le dio una ventaja,

Como @Adavo preguntó correctamente arriba en los comentarios

Desafortunadamente, mis archivos html / css no están presentes en la carpeta dist. ¿Cómo hacer para copiar todos los html / css en la carpeta dist?

La respuesta a esta pregunta es * proporcionar la ruta completa al archivo HTML / CSS usando '/' (desde el directorio raíz) en todos los archivos .ts y principalmente en la propiedad "templateURL" de @Component

después de mucho tiempo, lo entendí, sin usar Gulp :) Yipppeee

Desafortunadamente, mis archivos html / css no están presentes en la carpeta dist. ¿Cómo hacer para copiar todos los html / css en la carpeta dist?

Las rutas relativas en Angular 2 no son tan sencillas porque el marco quiere ser flexible con la forma en que carga sus archivos (CommonJs, SystemJs, .. etc.) de acuerdo con el artículo Component-Relative Paths en Angular 2 .

Como explica el artículo module.idcuando se usa con CommonJs (verifique su tsconfig.json) contiene la raíz absoluta del módulo y se puede usar para construir una ruta relativa.

Entonces, una mejor alternativa podría ser dejar los archivos css / html con los archivos ts y configurar su componente como se muestra a continuación, asumiendo que solo tiene sus archivos de compilación en una carpeta separada llamada dist . De esta manera, sus archivos css y html se cargarán con no hay problema para usar rutas relativas al convertir la ruta de compilación derivada en la fuente que las contiene, esencialmente eliminándola /dist/o renombrándola /src/;)

@Component({
   moduleId: module.id.replace("/dist/", "/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

si tiene carpetas separadas para la fuente y la compilación, puede hacer esto en su lugar:

@Component({
   moduleId: module.id.replace("/dist/", "/src/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

Entonces, para resolver esto:

Desafortunadamente, mis archivos html / css no están presentes en la carpeta dist. ¿Cómo hacer para copiar todos los html / css en la carpeta dist?

Siga los pasos de las respuestas de @raheel shan y @ Lirianer. ... entonces puedes terminar con esto.

He resuelto esto para mis propósitos usando scripts npm. La sección de scripts en mi archivo package.json está debajo. La solución es ejecutar onchnage(un paquete npm - npm install --save onchange) simultáneamente con tscy el servidor. Luego use rsync para copiar los activos que desea mover:

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/"
}

Para aquellos de ustedes en Windows, puede obtener a rsynctravés de Cygwino con soluciones empaquetadas como cwRsync .

Probé @WillyC sugerencia 's y funcionó como un encanto, nota sólo que tendrá que añadir la onchangedependencia a su package.jsonarchivo. Agregué un poco, solo un poco de scripts adicionales para tener una configuración limpia en la primera ejecución y también para eliminar los archivos html / css sobrantes (sería bueno si se pudiera hacer lo mismo para TSC)

De todos modos, aquí hay una sección de mi package.jsonarchivo.

{
  ...
  "scripts": {
    "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
    ...
    "cleandist": "rm -rf dist/*",
    "moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/"
  },
  ...
  "devDependencies": {
    ...
    "onchange":"^3.0.2"
  }
}

Para la rsynceliminación, observe la --deletebandera en el rsynccomando del watchassetsscript

Archivos Angular2 TypeScript y archivos JavaScript en carpetas diferentes

Aquí está mi configuración para Angular 2, la última versión V2.1.1, ¡y funciona muy bien!

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "./app/dist"
    }
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      // app: 'app/dist',  &&  main: './dist/main.js',
      // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/dist/main.js(…)
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        // index.html import path
        // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/main.js(…)
        // app: 'app/dist',  &&  main: './main.js',
        main: './dist/main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Inspirado por @Nagyl, desarrollé mi propio camino y creo que vale la pena compartirlo:

1) Instalar cpx

npm install cpx

2) Actualice bs-config.json y cambie baseDir de "src" a "dist"

"baseDir":"dist"

3) Actualice tsconfig.json y agregue outDir al final de compilerOptions:

"outDir": "../dist"

4) Actualizar package.json: 4.1) agregar un nuevo comando al final de los scripts:

"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"

4.2) modificar la línea de "inicio" para incluir el comando "cpx":

"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",

Puede transpilar .tsarchivos en el navegador, tal como lo hace Plunker en su plantilla angular de 2 ts.

Simplemente inicie el editor, seleccione nuevo, luego AngularJS y la opción 2.0.x (TS) (en la parte inferior). Pero el objetivo de usar webpack (o cualquier otra herramienta de agrupación) es transpilar archivos localmente.

Probé algunas de las opciones mencionadas anteriormente y, finalmente, me decidí por esto: Peep : una extensión para Visual Studio Code.

Cómo instalar:

• Ver -> Extensiones
• Mirar furtivamente
• Instalar en pc
• Recargar
• Ver -> Command Pallet
• Peep Ninguno
• modificar .vscode / settings.json según sea necesario (el mío se muestra a continuación)

-

{
  "typescript.check.workspaceVersion": false,
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true,
    "node_modules/": true,
    "dist/": true,
    "lib/": true
  }
}

25/01/2017 - actualizaciones: angular-cli listo para usar , se encarga de esto. y obras de instalación y ahora.

Probé las soluciones enumeradas aquí. Son buenos, pero no ideales para mí. Quiero una solución sencilla. No quiero codificar la información de la ruta en todos mis archivos de componentes. No quiero instalar más paquetes npm para encargarme de esto.

Así que se me ocurrió una alternativa más sencilla. No es una respuesta directa a esta pregunta, pero me funciona muy bien.

Simplemente modifico la configuración de mi espacio de trabajo para que los jsarchivos debajo /appno se muestren. Todavía están ahí. Simplemente están ocultos en mi espacio de trabajo. Para mí, eso es suficiente.

Estoy usando Sublime Text, así que esto es lo que tengo para la configuración de mi proyecto:

"file_exclude_patterns": ["app/*.js"]

Estoy seguro de que muchos otros editores tienen funciones similares.

ACTUALIZAR:

Solo usa Angular CLI. Todo se resuelve automáticamente.

Para Angular 4 con archivos de inicio rápido, todo lo que tenía que hacer era lo siguiente (una combinación de las respuestas indicadas anteriormente pero valores ligeramente diferentes):

• En tsconfig.json (agregar): "outDir": "../dist"
• En bs-config.json (cambiar): "baseDir": ["dist", "src"],
• En bs-config.e2e.json (cambiar): "baseDir": ["dist", "src"],

Sin cambios en systemjs.config.js.

Probé la sugerencia de @raheel y funcionó para mí. He modificado la estructura según mis necesidades.

Estoy usando la siguiente estructura

Para obtener esto, he modificado solo dos archivos 1. systemjs.config.js y 2.tsconfig.json

En systemjs.config.js cambié a

map: { // previously it was app: 'app', app: 'app/js', ...

y en tsconfig.json tengo que agregar "outDir": "app/js"

Estoy trabajando con Angular 2.4. Necesitaba un paso adicional para que funcionara. Esta fue la referencia de actualización systemJs al archivo main.js en index.html es, de:

System.import ('main.js'). Catch (function (err) {console.error (err);});

a:

System.import ('dist / main.js'). Catch (function (err) {console.error (err);});

Añadiendo encima de lo que dijo Raheel Shan. Tuve que hacer un cambio adicional en index.html para reflejar la importación del archivo javascript correcto ahora.

Aquí hay un resumen de mi parte.

tsconfig.json

antes de

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

Después:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist"
  },
  "exclude": [ 
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

systemjs.config.js

Antes de:

'app': 'app',

Después:

'app': 'dist/app', //'app

index.html

Antes de:

System.import('main.js').catch(function(err){ console.error(err); });

Después:

System.import('dist/main.js').catch(function(err){ console.error(err); });