asp.net-core
Angular2 et .Net Core

Tutoriel rapide pour un Angular 2 Hello World! App avec .Net Core dans Visual Studio 2015

Pas:

1. Créer une application Web .Net Core vide:

2. Allez sur wwwroot et créez une page HTML normale appelée Index.html:

3. Configurez Startup.cs pour accepter les fichiers statiques (ceci nécessitera d'ajouter la bibliothèque "Microsoft.AspNetCore.StaticFiles": "1.0.0" dans le fichier "project.json"):

4. Ajouter un fichier NPN:

   • Cliquez avec le bouton droit sur le projet WebUi et ajoutez le fichier de configuration NPN (package.json):

   • Vérifiez les dernières versions des packages:

     Remarque: Si Visual Studio ne détecte pas les versions des packages (vérifiez tous les packages, car certains d’entre eux affichent la version, et d’autres non), cela peut être dû au fait que la version Node fournie par Visual Studio ne fonctionne pas correctement , il faudra donc probablement installer le noeud js en externe et lier cette installation à Visual Studio.

     je. Téléchargez et installez le noeud js: https://nodejs.org/es/download/

     ii. Liez l'installation à Visual Studio: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : iii. (Facultatif) Après avoir enregistré le package.json, il installera les dépendances dans le projet, sinon, exécutez "npm install" en utilisant une invite de commande du même emplacement que le fichier package.json.

     Remarque: Recommandé pour installer "Open Command Line", une extension qui peut être ajoutée à Visual Studio:

5. Ajouter un texte dactylographié:

   • Créez un dossier TsScript dans le projet WebUi, juste pour l’organisation (les scripts TypeScripts ne seront pas envoyés au navigateur, ils seront transposés dans un fichier JS normal, et ce fichier JS sera celui qui va au générateur wwwroot en utilisant gulp, ceci sera expliqué plus tard):

   • Dans ce dossier, ajoutez "Fichier de configuration JSON TypeScript" (tsconfig.json): Et ajoutez le code suivant:

     

   • Dans la racine du projet WebUi, ajoutez un nouveau fichier appelé typings.json: Et ajoutez le code suivant:

   • Dans la racine du projet Web, ouvrez une ligne de commande et exécutez «typings install», cela créera un dossier de saisie (Cela nécessite «Ouvrir une ligne de commande» expliquée comme une étape facultative dans la note de l'étape 4, chiffre iii).

6. Ajoutez gulp pour déplacer les fichiers:

   • Ajoutez "Fichier de configuration Gulp" (gulpfile.js) à la racine du projet Web:
   • Ajouter un code:

7. Ajoutez les fichiers d'amorçage Angular 2 dans le dossier «tsScripts»:

   app.component.ts

   app.module.ts

   main.ts

8. Dans wwwroot, créez la structure de fichier suivante:

9. Dans le dossier scripts (mais en dehors de l'application), ajoutez le fichier systemjs.config.js: Et ajoutez le code suivant:

10. Exécutez la tâche Gulp pour générer les scripts dans wwwroot.

    • Faites un clic droit sur gulpfile.js
    • Task Runner Explorer je. Si les tâches ne sont pas chargées ("Echec du chargement. Voir Fenêtre de sortie") Allez dans la fenêtre de sortie et examinez les erreurs, la plupart du temps des erreurs de syntaxe dans le fichier gulp.
    • Clic droit sur la tâche "par défaut" et "Exécuter" (cela prendra du temps, et les messages de confirmation ne sont pas très précis, cela montre que c'est fini mais le processus est toujours en cours, gardez cela à l'esprit):

11. Modifier Index.html comme:

12. Maintenant courez et appréciez.

    Remarques:

    • S'il existe des erreurs de compilation avec typecript, par exemple "TypeScript Virtual Project", cela indique que la version de TypeScript pour Visual Studio n'est pas mise à jour en fonction de la version sélectionnée dans le fichier "package.json". : https://www.microsoft.com/en-us/download/details.aspx?id=48593

Les références:

• Le cours "Angular 2: Getting Started" de Deborah Kurata à Pluralsight:

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

• Angular 2 Documentation officielle:

  https://angular.io/

• Articles de 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/

Erreurs attendues lors de la génération de composants Angular 2 dans le projet .NET Core (version 0.8.3)

Lors de la génération de nouveaux composants Angular 2 dans un projet .NET Core, vous pouvez rencontrer les erreurs suivantes (à partir de la version 0.8.3):

Error locating module for declaration
        SilentError: No module files found

OU

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

[SOLUTION]

1. Renommez app.module.client.ts à app.client.module.ts

2. Ouvrez app.client.module.ts: placez la déclaration avec 3 points "..." et placez la déclaration entre parenthèses.

   Par exemple: [...sharedConfig.declarations, <MyComponent>]

3. Ouvrez boot-client.ts: mettez à jour votre importation pour utiliser la nouvelle référence app.client.module.

   Par exemple: import { AppModule } from './app/app.client.module';

4. Maintenant, essayez de générer le nouveau composant: ng g component my-component

[EXPLICATION]

CLI angulaire recherche un fichier nommé app.module.ts dans votre projet et tente de trouver une référence à la propriété declarations pour importer le composant. Cela devrait être un tableau (comme le partage SharedConfig.declarations), mais les modifications ne sont pas appliquées

[SOURCES]

• https://github.com/angular/angular-cli/issues/2962
• https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 (Bryan Garzon, collaborateur de la section 3.33)