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

82

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,

javascript  json  angular 
— Xinrui Ma
fuente
tienes que compilar el mecanografiado en js, así es como lo lee el navegador, echa un vistazo al formato: 'register', defaultExtension: 'js' en tu index.html
— Sari Yono
angular2-webpack-starter está muy actualizado, actualmente está en beta 1. Sugiero que te familiarices con git (particularmente con git pull).
— Tim McNamara
@TimMcNamara Agarro el angular2-webpack-starter y empiezo a desarrollar como hace un mes, pero ya está configurado en una URL de github privada remota diferente, así que en este caso, ¿cómo debería actualizarme con angular2-webpack-starter, que parte debo actualizar? Gracias.
— Xinrui Ma
Simplemente podría reemplazar su package.json con el actual desde aquí, borrar el enlacenode_modules y npm installactualizar todo
— Tim McNamara
Haz lo que dijo Raheel Shan . EXCEPTO en system.config.js debería ser 'app': 'dist / app' // en lugar de solo 'dist'
— Martin Cremer

Respuestas:

97

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.

— Muhammad Raheel
fuente
17
Intenté esto, funciona. 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? gracias
— Adavo
Intenté esto y después de un tiempo se crea un directorio de aplicaciones en mi carpeta dist.
— cccvandermeer
3
¿Cómo lidias con los node_modules requeridos como @angular? ¿Tiene que copiar todos estos en el directorio dist con cada compilación?
— Jeremy Moritz
4
Para futuros lectores: la pregunta html/css files is not present in the dist foldertiene respuestas a continuación ...
— Ben Winding
La carpeta "dist" no necesita ser confirmada, ¿verdad? Lo tengo excluido de mi proyecto de Visual Studio y quiero estar seguro de que es correcto.
— Bryan
20

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.

— NagyI
fuente
Esta es la solución más simple y limpia
— JeffG
¡esto es lo mejor!
— Windchill
¡Funciona! Pero, ¿alguien tiene problemas como yo al depurar la aplicación con Chrome DevTools? Recibo los archivos .ts en blanco.
— Aquiles
fantásticas soluciones. ¡Realmente fácil y muy limpio!
— Cribber
17

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 .

— Lirianer
fuente
8

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

— Abdeali Chandanwala
fuente
¿Hay alguna solución que alguien pueda sugerir para hacer esto sin tener que proporcionar la ruta completa? ... preferiblemente una solución simple que no requiera una revisión completa de un sistema de construcción que de otro modo funcionaría.
— WillyC
No parece ser posible, puede probar angular-cli para una mejor organización del código, pero esta ruta completa a html también se requiere en eso
— Abdeali Chandanwala
¡Descubrí una manera! Vea la respuesta que proporcioné a continuación. Supongo que no es perfecto, pero resuelve el problema usando solo scripts npm, sin gruñido / gulp / angular-cli. No es que tenga nada en contra de esas soluciones, ¡pero simplemente no estaba dispuesto a resolverlas en este momento!
— WillyC
Verifique mi respuesta, es un cambio bastante limpio con la manipulación de model.id un poco stackoverflow.com/a/40694657/986160
— Michail Michailidis
7

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',
...
});
— Michail Michailidis
fuente
2
aunque esta es una buena solución ... aún así, el principal problema de obtener todos los archivos de nuestro proyecto de nuestro proyecto depende de dos carpetas diferentes ... ¿hay alguna forma de implementar nuestro código desde una sola carpeta en el navegador? Gracias de antemano
— radio_head
incluso en el caso de node_modules, estaba ejecutando un script de compilación. Cada uno de los node_modules generalmente tiene los archivos fuente js y min.js. Entonces no veo por qué es un problema implementar su código fuente y luego ejecutar su script de compilación para descargar las dependencias de node_module y compilar el mecanografiado que creará la carpeta dist. Obviamente, puede configurar el paquete web o procesos similares para hacer la agrupación de una manera diferente.
— Michail Michailidis
7

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 .

— WillyC
fuente
... aunque estoy usando una buildcarpeta y no una distcarpeta, pero entiendes la idea.
— WillyC
1
Perdón por el voto negativo, pero realmente necesitas agregar de dónde onchangeviene. Además, debe publicar una nota de que esta entrega solo funciona para shells tipo Unix. Tal vez eso no sea un gran problema para la mayoría de la gente, pero últimamente me encontré con muchos desarrolladores (obligados a estar) usando Windows.
— jhohlfeld
De acuerdo - He agregado una explicación de dónde onchangeviene e información sobre cómo obtenerla rsyncpara Windows. Avísame si esto soluciona tus problemas.
— WillyC
5

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

— AlphaZygma
fuente
3

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"
    }
}
Expandir fragmento

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);
Expandir fragmento

ingrese la descripción de la imagen aquí

— xgqfrms
fuente
— xgqfrms
1
Esto no funcionó para mí hasta que cambié esta línea a:main: './dist/app/main.js',
— RichC
Esta publicación y comentario + stackoverflow.com/a/40694657/5393271 hacen el trabajo. Si tiene diferentes carpetas en la aplicación con servicios o componentes como app / components / mycomp.components.ts; app / services / myservice.service.ts creará automáticamente esas carpetas en dist después de ejecutar npm start (building)
— sTx
También puede hacer esto: en system.js.configat - map{app:"dist",..}luego en packages{app{main:"app/main.js"}}} y en tsconfig.json- "outDir": "dist"+ fuente html / css
— sTx
3

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\"",

Paso 2 modificación

Paso 3 modificación

Paso 4 modificación

— Escalofríos
fuente
2

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.

— Eggy
fuente
2

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.

— Anand Rockzz
fuente
2

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.

— Shawn
fuente
2

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.

— M. Neuweiler
fuente
1

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

Estoy usando la siguiente estructura

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', ...

systemjs.config.js

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

tsconfig.json

— Sanjoy Kanrar
fuente
Estoy haciendo lo mismo sin importar lo que hagas, pero después de que npm inicie el archivo .js no se crea en la carpeta app / js
— priyanka ahire
1

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);});

— Eugenio
fuente
0

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); });
— Tanmay
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.