Búsqueda de sitios web

asp.net - Recarga en caliente para compilación de Typescript en biblioteca de clases Razor en Visual Studio 2022

Estoy seguro de que estoy pasando por alto algo obvio, pero tengo una Biblioteca de Clases Razor donde estoy compilando mis vistas MVC, y también escribiendo mi código del lado del cliente en Typescript compilado en un solo archivo Javascript. Tengo un proyecto web que consume la RCL. Cuando cambio una vista .cshtml en la RCL, el proyecto web reconoce debidamente el cambio y actualiza el navegador. Sin embargo, cuando cambio un archivo .ts, lo que activa el compilador de Typescript y genera un archivo .js, no se actualiza el navegador en el proyecto web dependiente.

Ahora, podría estar complicándolo demasiado. Mi proyecto RCL se ve así:

/Client
--/src
----tsconfig.json
----tsfiles.ts
--/dist/outputfile.js
/wwwroot
--/dist/outputfile.js

Tengo un gulpfile que copia desde /Client/dist a /wwwroot/dist. Mi tsconfig.json se ve así:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "outFile": "../dist/Client.js",
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

Estoy atascado porque no entiendo la magia subyacente. Cambiar cualquier archivo .cshtml en el RCL desencadenará una recarga en caliente en el navegador que ve el proyecto web que hace referencia al RCL. No ocurre nada en absoluto cuando actualizo un archivo .ts, y obviamente el archivo gulp tampoco se ejecuta. Tengo que reconstruir el proyecto web para obtener la última basura.

El resultado que me gustaría es que guardar un archivo .ts en el RCL activara la misma recarga en caliente en el navegador que un cambio en un archivo .cshtml. Mi RCL tiene lo siguiente en el .csproj.

<TypescriptOutDir>wwwroot</TypescriptOutDir>
<StaticWebAssetBasePath Condition="$(StaticWebAssetBasePath) == ''">/</StaticWebAssetBasePath>
<ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
    CompileTypeScript;
    $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

Para ser claro, cuando reconstruyo manualmente el proyecto web, los archivos en el wwwroot del RCL son visibles como se esperaba en la aplicación web que hace referencia al proyecto RCL. Están en el lugar correcto para ser usados, solo que la recarga en caliente no está sucediendo. Esto hace que la referencia al proyecto separado sea realmente difícil de trabajar.

EDITAR: Cosa interesante, añadí una línea de código desechable en un archivo .cshtml, y si guardo, se activa la actualización. Si un archivo gulp altera el archivo y lo guardo, no se activa la actualización. Así que parece que la conexión está en VS 2022 mismo. Cambiar archivos CSS tampoco lo activará, aunque en ambos casos sí ocurre si está en el proyecto en ejecución en lugar del RCL dependiente.

Respuesta #1

Visual Studio activaría por defecto el hotreload si tus archivos JS están en la carpeta wwwroot (no se necesita ninguna acción especial).

Así que puedes hacer una de las siguientes cosas:

Cambia el outFile de tsconfig.json de "outFile": "../dist/Client.js" a "outFile": "../../wwwroot/dist/Client.js". No se necesita ninguna tarea de gulp.

O puedes tener una tarea de watch en gulp que observe Client/dist/Client.js y lo copie a wwwroot/dist/Client.js Consulta este artículo sobre cómo hacer que gulp observe los cambios en los archivos: https://gulpjs.com/docs/en/getting-started/watching-files/

Respuesta #2

Resulta que ya estaba cerca de una solución. La clave es asegurarse de que el tsconfig se compile al guardar y se genere en la carpeta wwwroot. No puedo confirmarlo, pero vi un post en tránsito que decía que necesitas un <AssignTargetPathsDependsOn>CompileTypeScript;$ (AssignTargetPathsDependsOn)</AssignTargetPathsDependsOn> en tu archivo de proyecto.

De todos modos, estaba editando archivos de Typescript en un RCL y conseguí que la recarga del proyecto web que lo consumía funcionara.

Artículos relacionados