asp.net-core
Angular2 e .Net Core

Tutorial rapido per Angular 2 Hello World! App con. Net Core in Visual Studio 2015

passi:

1. Creare un'app Web .Net core vuota:

2. Vai a wwwroot e crea una normale pagina html chiamata Index.html:

3. Configura Startup.cs per accettare file statici (questo richiederà di aggiungere "Microsoft.AspNetCore.StaticFiles": libreria "1.0.0" nel file "project.json"):

4. Aggiungi file NPN:

   • Fare clic con il pulsante destro del mouse sul progetto WebUi e aggiungere il file di configurazione NPN (package.json):

   • Verifica le ultime versioni dei pacchetti:

     Nota: se Visual Studio non rileva le versioni dei pacchetti (Controlla tutti i pacchetti, perché alcuni di essi mostrano la versione, e alcuni altri no), potrebbe essere perché la versione del Nodo in arrivo in Visual Studio non funziona correttamente , quindi sarà probabilmente necessario installare node js esternamente e quindi collegare l'installazione con Visual Studio.

     io. Scarica e installa il nodo js: https://nodejs.org/es/download/

     ii. Collega l'installazione con lo studio visivo: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : iii. (Facoltativo) dopo il salvataggio di package.json installerà le dipendenze nel progetto, in caso contrario, esegui "npm install" utilizzando un prompt dei comandi dalla stessa posizione del file package.json.

     Nota: consigliato per installare "Apri riga di comando", un'estensione che può essere aggiunta a Visual Studio:

5. Aggiungi dattiloscritto:

   • Crea una cartella TsScript all'interno del progetto WebUi, solo per l'organizzazione (i TypeScripts non andranno al browser, saranno transpiled in un normale file JS, e questo file JS sarà quello che va al foder wwwroot usando gulp, questo sarà spiegato in seguito):

   • All'interno di questa cartella aggiungere "TypeScript JSON Configuration File" (tsconfig.json): E aggiungi il prossimo codice:

     

   • Nella radice del progetto WebUi, aggiungi un nuovo file chiamato typings.json: E aggiungi il prossimo codice:

   • Nel progetto Web root apri una riga di comando ed esegui "typings install", questo creerà una cartella typings (Questo richiede "Open Command Line" spiegato come passaggio facoltativo nella nota all'interno del Passaggio 4, numero iii).

6. Aggiungi gulp per spostare i file:

   • Aggiungi "Gulp Configuration File" (gulpfile.js) nella radice del progetto web:
   • Aggiungi codice:

7. Aggiungi 2 file bootstrap angolari nella cartella "tsScripts":

   app.component.ts

   app.module.ts

   main.ts

8. All'interno di wwwroot, crea la seguente struttura di file:

9. All'interno della cartella degli script (ma all'esterno dell'app), aggiungi systemjs.config.js: E aggiungi il prossimo codice:

10. Esegui Gulp Task per generare gli script in wwwroot.

    • Fai clic con il tasto destro su gulpfile.js
    • Esegui Runner Explorer io. Se le attività non sono state caricate ("Impossibile caricare. Vedere la finestra Output") Vai alla finestra di output e dare un'occhiata agli errori, la maggior parte delle volte sono errori di sintassi nel file gulp.
    • Fare clic con il tasto destro del mouse su "predefinito" e "Esegui" (ci vorrà un po ', e i messaggi di conferma non sono molto precisi, lo mostra finito ma il processo è ancora in esecuzione, tieni questo in mente):

11. Modifica Index.html come:

12. Adesso corri e divertiti.

    Gli appunti:

    • Nel caso in cui ci siano errori di compilazione con dattiloscritto, ad esempio "Progetto virtuale TypeScript", è un indicatore che la versione di TypeScript per Visual Studio non viene aggiornata in base alla versione selezionata in "package.json", se ciò accade installare : https://www.microsoft.com/en-us/download/details.aspx?id=48593

Riferimenti:

• Il corso "Angular 2: Getting Started" di Deborah Kurata in Pluralsight:

  https://www.pluralsight.com/courses/angular-2-getting-started-update

• Angular 2 Documentazione ufficiale:

  https://angular.io/

• Articoli di Mithun Pattankar:

  http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

  http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/

Errori previsti durante la generazione di componenti Angular 2 nel progetto .NET Core (versione 0.8.3)

Quando si generano nuovi componenti Angular 2 in un progetto .NET Core, è possibile che si verifichino i seguenti errori (dalla versione 0.8.3):

Error locating module for declaration
        SilentError: No module files found

O

No app module found. Please add your new Class to your component. 
        Identical ClientApp/app/app.module.ts

[SOLUZIONE]

1. Rinominare app.module.client.ts in app.client.module.ts

2. Apri app.client.module.ts: aggiungi la dichiarazione con 3 punti "..." e avvolgi la dichiarazione tra parentesi.

   Ad esempio: [...sharedConfig.declarations, <MyComponent>]

3. Apri boot-client.ts: aggiorna l'importazione per utilizzare il nuovo riferimento a app.client.module.

   Ad esempio: import { AppModule } from './app/app.client.module';

4. Ora prova a generare il nuovo componente: ng g component my-component

[SPIEGAZIONE]

La CLI angolare cerca un file denominato app.module.ts nel progetto e tenta di trovare riferimenti per la proprietà dichiarazioni per importare il componente. Questo dovrebbe essere un array (come sharedConfig.declarations), ma le modifiche non vengono applicate

[Fonti]

• https://github.com/angular/angular-cli/issues/2962
• https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 (sezione 3.33 collaboratore Bryan Garzon)