Angular 2 Beta: Visual Studio ASP .NET MVC

Question

Ho creato un'applicazione per Angular 2 alpha 45 e ha funzionato magnificamente, ma ho dovuto "gironzolare" molto per farlo funzionare. Comprendo Angular 2, ma non capisco come farlo funzionare per iniziare a utilizzare Angular 2.

Sto provando una versione pulita di 'Angular 2: 5 min Quickstart'. Ci sono una serie di problemi e io sarò il più specifico possibile. Voglio sapere perché questi problemi si stanno verificando e, si spera, come risolverli. Visual Studio 2015 Update 1, Typescript 1.7.

Configurazione dattiloscritto: il quickstart include un file tsconfig.json.

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

io non sono sicuro se questo fa nulla se, come ho dovuto modificare il file Projectname.csproj e aggiungere la riga: <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> per sbarazzarsi della errore sperimentale decoratori. https://github.com/Microsoft/TypeScript/issues/3124 sembra suggerire che il file tsconfig deve essere in/Scripts per funzionare, ma non funziona neanche per me.

Mi piacerebbe sapere come ottenere questo file tsconfig per funzionare, o per modificare il file .csproj per ottenere le stesse opzioni del compilatore. Se si guarda in Proprietà progetto> Build Typescript. Sono questi ciò che importa? Il sistema del modulo dovrebbe essere: Sistema?

La struttura del mio file è la stessa di Avvio rapido.

Ho usato powershell per eseguire npm install per ottenere tutto nella directory node_modules.

import {Component} from 'angular2/core'; visualizza un errore. ../node_modules/angular2/core'; non visualizza l'errore, ma quando si genera il progetto, si ottengono molti errori di compilazione nei file in node_moduels/angular2/src/*. Ora, potrei essere in grado di entrare e correggere manualmente questi problemi, ma mi sembra che la configurazione sia errata se questi errori vengono visualizzati. Il tsconfig sembra voler escludere node_modules. Perché non riesco a utilizzare 'angular2/core' e invece di utilizzare un percorso relativo? Se includo i node_modules nel progetto Visual Studio, ci sono una quantità folle di errori di compilazione nello node_modules. Separatamente: Sto facendo questo clean build perché non riesco a capire come aggiornare il progetto da alpha 45 a beta 0. Risolvere bug nel mio progetto da Angular 2 cambia sarà facile, ma facendo in modo che l'app carichi tutti i moduli al momento sono impossibili.

La parte successiva è supponendo ho passato gli errori di compilazione: In index.html c'è il:

System.config({ 
    packages: { 
    app: { 
     format: 'register', 
      defaultExtension: 'js' 
     } 
    } 
}); 
System.import('app/boot') 
    .then(null, console.error.bind(console)); 

non ho mai ottenuto il System.import('app/boot') di lavorare senza specificare l'estensione del file. Si tratta di un problema di Visual Studio o è un problema di .NET MVC? Se si specifica l'estensione del file in index.html, ottengo 404s con System.js cercando di trovare i file del componente senza un'estensione di file (anche se la configurazione ha defaultExtension: 'js'. È perché ho bisogno di includere i file js nel mio progetto? se ho passato che problema, ho a che fare con

system.src.js:1049 GET http://localhost:63819/angular2/http 404 (Not Found) 

non ho avuto un solo errore di generazione, ma ora System.js non viene caricato nulla.

Mi sembra che questi siano tutti problemi creati da sistemi diversi che interpretano il dattiloscritto in modo diverso. Mi sento come se non fossi stato chiaro, ma non so come essere chiaro su questo problema. Gradirei davvero ogni aiuto e guida che potresti darmi. Mi sento come se avessi cercato una risposta a questo per giorni.

Answer 1

Sono generalmente contento di nuove cose con asp.net 5 vnext e Angular 2. Ma il rigging di Angular 2 in Visual Studio è stato un problema. Ho seguito la guida rapida angular.io religiosamente e non ha avuto la fortuna di ottenere un il Ciao angolare 2 applicazione in esecuzione, fino a quando ho usato il seguente codice:

<script src="~/lib/anguar2/angular2-polyfills.js"></script> 
 
<script src="~/lib/es6-shim/es6-shim.js"></script> 
 
<script src="~/lib/systemjs/system.js"></script> 
 
<script> 
 

 
    System.config({ 
 
     defaultJSExtensions: true 
 
     
 
    }); 
 

 
</script> 
 
<script src="~/lib/rxjs/rx.js"></script> 
 
<script src="~/lib/anguar2/angular2.min.js"></script> 
 
<script> 
 
    System.import('js/boot'); 
 
</script>

Vorrei avere una migliore comprensione di perché questo funziona, e la piastra angolare non lo fa. Ma almeno ho funzionato. Spero che questo ti aiuti.

Answer 2

Ho esattamente gli stessi problemi (progetto alfa 48, stessi errori con beta 0 e così via). I miei file di lavoro (progetto MVC):

app/boot.ts

/// <reference path="../node_modules/angular2/manual_typings/globals-es6.d.ts" /> 
/// <reference path="../node_modules/angular2/typings/es6-shim/es6-shim.d.ts" /> 
import {bootstrap} from '../node_modules/angular2/platform/browser' 
import {AppComponent} from './app.component' 
bootstrap(AppComponent); 

App/app.component.ts

import {Component} from '../node_modules/angular2/core' 
@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1>' 
}) 
export class AppComponent {} 

Vista/shared/_Layout.cshtml

<head> 
... 
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="~/node_modules/systemjs/dist/system.src.js"></script> 
<script> 
System.config({ 
    defaultJSExtensions: true, 
    packages: { 
    'app': { format: 'register', defaultExtension: 'js'} 
    }, 
    paths: { 
    'angular2/*': 'node_modules/angular2/*', 
    'rxjs': 'node_modules/rxjs/bundles/Rx.js' 
    } 
}); 
</script> 
<script src="~/node_modules/rxjs/bundles/Rx.js"></script> 
<script src="~/node_modules/angular2/bundles/angular2.dev.js"></script> 
<base href="/"> 
@Scripts.Render("~/bundles/modernizr") 
... 
</head> 

Vista/Home/Index.cshtml

<my-app>Loading...</my-app> 
<script> 
    System.import('App/boot') 
    .then(null, console.error.bind(console)); 
</script> 

Ha funzionato per me dopo ho aggiunto 'percorsi' in System.config.

Answer 3

Ho avuto alcuni problemi all'inizio, ma sono per lo più facili da risolvere.

TSconfig equivalente

In primo luogo, la messa a punto del progetto:

<TypeScriptToolsVersion>1.7.6</TypeScriptToolsVersion> 
<TypeScriptModuleKind>system</TypeScriptModuleKind> 
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators> 
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata> 
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --experimentalDecorators </TypeScriptAdditionalFlags> 
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --emitDecoratorMetadata </TypeScriptAdditionalFlags> 

modulo del sistema è giusto, ma verificare che sia correttamente incluso nel file html. Puoi anche selezionarlo nella finestra delle opzioni del progetto.

A seconda della versione VS, è necessario specificare i flag in flag aggiuntivi (versioni precedenti) o nei tag dedicati. È comunque necessario controllare la documentazione sorgente e la versione di destinazione nelle opzioni del progetto (es5 è EcmaScript 5 nella versione EcmaScript, ovviamente).

Non dimenticare di installare l'ultima versione di TypeScript, altrimenti RxJ non funzionerà.

file Angular2

Durante il download angular2 via NPM ha un senso, non vorrei includere node_modules direttamente nella cartella dattiloscritta. Includere l'intera cartella significa prendere ogni altro modulo del nodo, come ad esempio gulp.Invece, puoi semplicemente copiare l'intera cartella angular2 nella tua directory dattiloscritto, nella cartella Contenuto (puoi farlo automaticamente con gulp o un semplice file bat se vuoi).

Informazioni sugli errori di dattilografia, il problema è che Visual Studio proverà ad analizzare tutti i file nelle cartelle angular2 e alcuni di questi file sono duplicati. È necessario rimuovere i sorgenti e conservare solo i file js compilati e le definizioni dei tipi. Ciò significa:

• remove/ES6 (sono i file utilizzati per sviluppare in ES6 invece di dattiloscritto)
• rimuovere/ts (i file di origine)
• rimuova fasci/tipizzazioni (file additionnal Defintion per ES6-shim e gelsomino)

È necessario la cartella rxjs allo stesso livello di cartella come angular2, in caso contrario la include non funziona, vale a dire:

Content 
    typings 
     angular2 
     rxjs 
     mymodule 
      whatever.ts 
     boot.ts 

Nei file html, è possibile collegare i file js nelle cartelle bundle di entrambi angular2 e rxjs.

<script src="https://code.angularjs.org/tools/system.js"></script> 
<script src="/content/typings/angular2/bundles/angular2-polyfills.js"></script> 
<script src="/content/typings/rxjs/bundles/Rx.min.js"></script> 
<script src="/content/typings/angular2/bundles/angular2.dev.js"></script> 
<script src="/content/typings/angular2/bundles/router.dev.js"></script> 

Poi vostre importazioni sarà simile a questo:

import { Component } from 'angular2/core'; 

configurazione del sistema

Per rendere le importazioni di lavoro, è necessario configurare System. La configurazione è abbastanza semplice:

 System.paths = { 
      'boot': '/content/typings/boot.js', 
      'mymodule/*': '/content/typings/myModule/*.js' 
     }; 
     System.config({ 
      meta: { 
       'traceur': { 
        format: 'global' 
       }, 
       'rx': { 
        format: 'cjs' 
       } 
      } 
     }); 
     System.import('boot'); 

Includere questo codice dopo i tag di script per angolare e tutte le altre Librairies.

Poiché Angular2 è incluso a livello globale (tramite i tag di script), non è necessario aggiungerlo alla configurazione di sistema. Poi nei file, è possibile importare i moduli in questo modo:.

import { MyThing } from "mymodule/whatever"; 

Answer 4

Assicurarsi di essere in Visual Studio 2015 Update 1, Carattere tipografico 1,7 * E inoltre è possibile eseguire 'angolare 2: 5 min Quickstart'.

Il problema che hai come VS2015 "strumenti web esterni" ha troppo vecchia versione

Dopo VS 2015 ha creato asp.net5 Web Application, fare clic su Mostra tutti i file e quindi eliminare package.json node_modules cartella e aggiungere package.json ancora.

Se in precedenza non funziona vedere questo: http://jameschambers.com/2015/09/upgrading-npm-in-visual-studio-2015/

Answer 5

Se siete installato e funzionante con NPM installare durante il recupero delle dipendenze in node_modules, ecco come usarli lì sul posto, senza doverli spostare in un/lib o la directory/scripts, o cambiare il modo di scrivere i file dattiloscritto dal modo mostrato in Avvio rapido:

Progetto Proprietà -> dattiloscritto costruire

Per "System Module", selezionare "sistema":

Set dattiloscritto opzioni del compilatore

Se si utilizza ASP.NET core, impostare le opzioni in tsconfig.json:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true 
}, 
"exclude": [ 
    "node_modules" 
] 
} 

Se si utilizza ASP.NET (non-core), imposta le opzioni del compilatore nel file csproj. (Documenti per le opzioni di impostazione del compilatore: https://github.com/Microsoft/TypeScript/wiki/Setting-Compiler-Options-in-MSBuild-projects) In un editor di testo trovare il PropertyGroup con le altre opzioni dattiloscritto e aggiungere in:

Caricare file sorgente

<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> 
<TypeScriptModuleResolution>node</TypeScriptModuleResolution> 

nell'ordine corretto

Nella tua index.html , imposta gli script in questo ordine specifico per assicurarti che i moduli siano caricati dalla cartella node_modules (devi caricare i pacchetti rxjs e angular2 dopo facendo System.config altrimenti il ​​caricatore di sistema scaricherà nuovamente i file di origine angolare/rxjs poiché non li ha registrati con il percorso giusto)

<!-- load system libraries --> 
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="~/node_modules/systemjs/dist/system-polyfills.js"></script> 
<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="~/node_modules/systemjs/dist/system.js"></script> 

<!-- configure system loader first --> 
<script> 
    System.config({ 
     defaultJSExtensions: true, 
     paths: { 
      'angular2/*': 'node_modules/angular2/*', 
      'rxjs/*': 'node_modules/rxjs/*' 
     } 
    }); 
</script> 

<!-- load app bundles *after* configuring system so they are registered properly --> 
<script src="~/node_modules/rxjs/bundles/Rx.js"></script> 
<script src="~/node_modules/angular2/bundles/angular2.js"></script> 

<!-- boot up the main app --> 
<script> 
    System.import("app/main").then(null, console.error.bind(console)); 
</script> 

App dattiloscritto possibile utilizzare la sintassi standard di importazione, ecco app/main.ts:

import {bootstrap} from 'angular2/platform/browser' 
import {AppComponent} from './app.component' 
bootstrap(AppComponent); 

Nota L'angular2 "importazione" non ha bisogno di avere' ../node_modules/ 'anteposto perché la risoluzione del modulo del compilatore TypeScript utilizza la modalità "nodo". (docs sulla logica di risoluzione del modulo del nodo: https://github.com/Microsoft/TypeScript/issues/2338) Spero che funzioni per te!