2015-11-02 14 views
18

Sto cercando di ottenere Angular 2 per funzionare in Visual Studio 2015 con Typescript. Sto cercando di ottenere l'esempio più semplice di lavorare in un progetto web MVC 5 tipo (web.config invece di config.json):Come posso far funzionare angular2 in Visual Studio 2015 con TypeScript?

import {Component, bootstrap} from 'angular2/angular2'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1>' 
}) 
class AppComponent { } 
bootstrap(AppComponent); 

Sto cercando le cose più minime necessarie per fare questo lavoro. Così ho scaricato il più recente Angular 2 (alpha .45) e copiato su tutto il TypeScript nella cartella modules scaricata. Comprese tutte le sottocartelle (meno le docs e examples quelli.)

Sono sicuro che questo lavoro al di fuori del Visual Studio come ho fatto prima, ma sto cercando di farlo funzionare in Visual Studio e mi sta dando più di 3.000 errori e sembra che sia perché mi mancano altri moduli o qualcosa del genere.

Qui ci sono un paio di cose che mi manca:

Mappa (default_keyvalue_differ.ts, e molti altri):

export class DefaultKeyValueDiffer implements KeyValueDiffer { 
    private _records: Map<any, any> = new Map(); 

assert (lexer.ts):

scanCharacter(start: number, code: number): Token { 
    assert(this.peek == code); 

Set (command_compiler.ts):

function removeKeyValueArrayDuplicates(keyValueArray: string[]): string[] { 
    var knownPairs = new Set(); 

StartsWith (shadow_css.ts)

rule.selector.startsWith('@page') 

richiedono (parse5_adapter.ts)

var parse5 = require('parse5/index'); 

@ reactivex/rxjs/dist/cjs/Rx (async.ts)

export {Subject} from '@reactivex/rxjs/dist/cjs/Rx'; 

C'è molto più di questo. Quindi la mia prima domanda è, ho davvero bisogno di tutte queste cose, o alcune non sono richieste. 2 ° e più importante, come posso ottenere Visual Studio per costruire la mia soluzione?

Nota: Credo che questo "lunghissimo esempio/tutorial" è quello che cercavo soltanto che e 'orientata per MVC 6 (.NET Core) invece di MVC 5: http://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/

+0

Credo che devi installare angolare NPM o JSPM. La ragione è che, ho provato a scaricare Angular 2 (alpha .44) e anche Angular 2 (alpha .45) usando la sincronizzazione automatica di Visual Studio tramite le configurazioni di package.json (npm) ma non è stato in grado di scaricarlo correttamente. –

+1

Ho usato questo comando 'jspm install angular2 es6-shim reflect-metadata zone.js' da questo link: http://html5hive.org/getting-started-with-angular-2/ Ed è stato in grado di scaricare angolare alfa 45 con tutte le dipendenze. Provatelo –

+0

Quindi questo mi ha dato la tipizzazione, ma ora ho un nuovo problema, sto ricevendo un sacco di errori di 'Duplicate identifier', oltre 2000 di loro. Ho cancellato tutte le cartelle e ho eseguito npm install angular2 es6-shim reflect-metadata zone.js '' yhrn copiato sui file nella mia cartella della soluzione, infine, in 'Visual Studio', incluse le nuove cartelle nel mio progetto, e ora sono ottenere tutti questi errori :(Questo non dovrebbe essere così difficile! –

risposta

3

So che non è appassionato SO su come incollare link a cose, ma questo è un tutorial abbastanza grande da seguire, per copiare semplicemente pasta qui ... e tutti i bit di esso sono rilevanti per rispondere alla domanda. In ogni modo, ecco il tutorial fornito dal angolare 2 squadra per ottenere NG2 lavorare in Visual Studio MVC 5:

https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

0

ho capito di lavoro.

installazione npm. dalla cartella node_modules, rimuovere tutte le cartelle tranne angular2 e systemjs. nella cartella angular2 rimuovi tutto tranne i pacchetti. nella cartella fasci/caratteri rimuovi tutti tranne angular2.
struttura di cartelle
simile a questa:

node_modules 
    -- angular2 
    -- bundles 
     -- typings 
      --angular2 
    -- systemjs 
+1

Non vedo affatto una cartella systemjs, né c'era una cartella angular2 nella mia cartella bundles/typings. C'è anche una cartella src nella cartella angular2 che sono certo che causerebbe problemi se fosse stata rimossa. In che modo la tua installazione è così diversa dalla mia? Ho anche usato npm. Vedi [la mia domanda] (http://stackoverflow.com/questions/33568723/visual-studio-typescript-project-with-a-node-package-raises-duplicate-identifier) ​​per esattamente il problema che sto avendo. –

14

mi si supponga di avere il problema con il vecchio npm versione che utilizza Visual Studio 2015.Ti consiglio di aprire la finestra Output di Visual Studio e di scegliere Mostra output da "Bower/npm". Vedrete qualcosa di simile sulla foto qui sotto:

enter image description here

La linea più importati della produzione è lungo e viene tagliato. Includo i separetel:

npm ERR! comando "C: \ Programmi (x86) \ Microsoft Visual Studio 14.0 \ Common7 \ IDE \ Extensions \ Microsoft \ Strumenti Web \ External \\ node \ node" "C: \ Programmi (x86) \ Microsoft Visual Studio 14.0 \ Common7 \ IDE \ Extensions \ Microsoft \ Web Tools \ External \ npm \ node_modules \ npm \ bin \ NPM-cli.js" "install"

In altre parole, è importante capire che Visual Studio 2015 utilizza alcuni strumenti inclusi npm dalla directory C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External. Angular2 dispone del pacchetto di dipendenze reactivex/rxjs, che richiede "npm":"~2.0.0", ma Visual Studio utilizza invece la versione precedente 1.4.9 (è possibile verificare lo version di "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm\node_modules\npm\package.json"). Anche se si installasse l'ultima versione di Nodejs e di npm, non sarà d'aiuto poiché Visual Studio 2015 utilizzerà la stessa vecchia versione di npm.

per risolvere il problema vi consiglio di fare quanto segue:

  • installare l'ultima versione di NodeJs. È possibile scaricarlo da https://nodejs.org/en/. Se preferisci usare la versione x64 allora ti consiglio di verificare che hai già installato x86 in C:\Program Files (x86)\nodejs. Se esiste una versione x86, disinstallarla prima di avviare l'installazione di x64-version. Successivamente è possibile installare Nodejs. Oggi sarebbe NodeJs 5.0.0 da node-v5.0.0-x64.msi.
  • quindi è possibile avviare il prompt dei comandi in modalità amministratore (non è mandatoria) e utilizzare npm update -g per aggiornare npm o per utilizzare npm install -g [email protected] per installare la versione più recente. Ti consiglio di utilizzare npm -v prima e dopo l'installazione per verificare che tu abbia installato la versione più recente. Oggi è la versione 3.3.12. Dipende dal modo in cui è stato installato/aggiornato npm è possibile averlo installato sia in o in %AppData%\npm (il file di directory C:\Users\Oleg\AppData\Roaming\npm per esempio) o in entrambe le destinazioni.
  • si dovrebbe avviare l'editor di testo in diritti di amministratore (menu di avvio, ricerca, digitare notepad.exe per esempio e premere Ctrl + Maiusc + Invio). Dopo di che si dovrebbe modificare il file C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd e impostare come qualcosa di contenuti come @"C:\Program Files\nodejs\node.exe" "%AppData%\npm\node_modules\npm\bin\npm-cli.js" %* o @"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" %*

Dopo di che si può solo salvare package.json avere la voce come "angular2": "^2.0.0-alpha.45" in "devDependencies" o "dependencies" sezione e l'installetion avrà successo. Probabilmente vedrete solo l'avviso come

enter image description here

perché si utilizzano ormai "troppo buono" versione del npm: la versione 3.3.12, invece di qualche versione 2.x.x (basata sullo stato "npm":"~2.0.0" del pacchetto dipendenze reactivex/rxjs).

P.S.Probabilmente hai qualche altro messaggio di errore se usi MVC5 invece della versione preliminare di MVC6 (ASP.NET 5), ma il problema principale è lo stesso. Devi installare una nuova versione di node e npm e modificare C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm.cmd per utilizzare la nuova versione di npm.

+0

Hai lavorato con vs13 con gli angolari o hai riscontrato qualche problema? sto provando lo stesso ma con vs15. Ho affrontato il problema del "modulo correlato". –

+0

@NeerajSharma: Ho lavorato con Visual Studio 2015. La directory 'C: \ Programmi (x86) \ Microsoft Visual Studio 14.0' corrisponde a Visual Studio 2015. – Oleg

+0

Grazie! Ho cercato una soluzione 3 ore. – David

1

La mia risposta è per MVC6 (non è necessaria visto che MVC5)

vi consiglio di utilizzare un modello antipasto. Posso consigliare un modello che utilizza anche HMR e angolare (rendering lato server per il SEO e caricamento della pagina più veloce) Universale:

https://github.com/aspnet/JavaScriptServices

Operazioni preliminari: http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

+0

La tua risposta è per 'MVC 6'. Questa domanda riguarda 'MVC 5'. –

+0

mi dispiace, devo cancellare? – daniel

+0

Tocca a voi. –

Problemi correlati