Este artículo te ayudará a eliminar el error de compliación en Visual Studio 2013 cuando trabajas con una setup inicial en angularJS 2 beta. No tocaremos mucho código, solamente hablaremos sobre cómo solucionar el error de compilación. ¿Estás preparado? Pues allá vamos...
El código
Aquí no voy a entrar en particularidades del código o de funcionalidades. Sólo os voy a proporcionar los pasos a seguir para evitar los errores de compilación, los cuales aparecen cuando trabajas con la configuración inicial de la beta de angularJS 2 en Visual Studio 2013.
He utilizado angularJS 2 beta junto con typescript y la versión es 1.7. Si quieres trabajar con angular 2 junto con typescript es necesario descargar e instalar typescript primero.
Paso 1: Crea un nuevo proyecto en Visual Studio 2013.
Paso 2: Agrega la aplicación angular. Consulta siguiente url.
https://angular.io/docs/ts/latest/quickstart.html
Paso 3: Añade un archivo json a tu proyecto e insertale el siguiente código:
{
"name": "angular2-quickstart-check",
"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"
}
}
Cuando compiles el proyecto anterior, obtendrás un error de compilación tal que así
Por ejemplo: Cannot find module 'angular2/core' in VS2013 and typescript x
Paso 4: Ahora haz clic derecho en el proyecto y selecciona unload project.
Paso 5: Una vez más, haz clic derecho y selecciona la opción de editar el nombre del proyecto.
Paso 6: Ahora copia los siguientes tags en el archivo del grupo de propiedades antes de la etiqueta de cierre del grupo de propiedades.
<TypeScriptRemoveComments>false</TypeScriptRemoveComments>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>
</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>commonjs</TypeScriptModuleKind>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>True</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --emitDecoratorMetadata --experimentalDecor ators </TypeScriptAdditionalFlags>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
Paso 7: Ahora recarga el proyecto.
Paso 8: Abre la carpeta que contiene el proyecto y haz clic derecho sobre el package y, a continuación, selecciona la ventana de comandos que se abrirá instantáneamente.
Paso 9: Escribe en la ventana de comandos npm install y presiona ENTER. Ahora se instalarán todos los archivos necesarios para que tu proyecto angularJS 2 funcione correctamente. Ahora tu proyecto está listo para que pueda usar angularJS 2 sin problema alguno.
Por último, sin el archivo json no podrás instalar el paquete npm. Así que primero agrega el archivo json a tu proyecto.
Puntos de interés
He intentado instalar npm primero y agregar los tags de typescript pero no me funcionó. Lo intenté muchas veces pero me di cuenta que los pasos que estaba siguiendo no eran los correctos. Si has conseguido instalar npm primero y luego los tags de typescript y te ha funciona, por favor, indícamelo en los comentarios.
Y este ha sido el artículo en el que trataba explicaros como hacer un lector de código con Node.js para Linux, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!