web-dev-qa-db-fra.com

AngularJs 2 avec ASP .NET 4.5.1

J'aimerais utiliser Angular 2 pour le front-end d'une application ASP.NET 4 existante, c'est-à-dire pas MVC 6/ASP.NET CORE, et je préférerais ne pas utiliser node car nous utilisons déjà nuget en tant que gestionnaire de paquets. Est-ce que quelqu'un connaît des ressources qui me guideront?

asp.netnode.jsangular
16
Dan O'Leary

Pour répondre à ma question initiale, voici comment nous avons réussi à faire fonctionner Angular 2 avec .net 4.5.1 (nous avons finalement dû utiliser npm).

Dans l'en-tête de _Layout.cshtml, importez les fichiers Angular 2 à partir du CDN et configurez SystemJs.

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<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/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="../../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../../node_modules/systemjs/dist/system.src.js"></script>
<script src="../../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../../node_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
  System.config({
    packages: {
        'my-app': {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
    System.import('my-app/main')
        .then(null, console.error.bind(console));
</script>

Ajout de package.json et tsconfig.json à l'itinéraire du projet

packages.json:

{
 "name": "angular2-quickstart",
 "version": "1.0.0",
 "scripts": {
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "typings": "typings",
  "postinstall": "typings install"
  },
 "license": "ISC",
 "dependencies": {
  "angular2": "2.0.0-beta.9",
  "systemjs": "0.19.24",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.35.0",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "0.5.15"
 },
 "devDependencies": {
  "TypeScript": "^1.8.7",
  "typings": "^0.7.5"
  }
}

tsconfig.json:

{
 "compileOnSave": true,
 "compilerOptions": {
 "target": "es5",
 "module": "system",
 "moduleResolution": "node",
 "sourceMap": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "removeComments": false,
 "noImplicitAny": false
},
"exclude": [
 "node_modules",
 "typings/main",
 "typings/main.d.ts"
 ]
}

Si node et npm sont installés sur votre ordinateur, les modules npm dont vous avez besoin doivent être automatiquement téléchargés et sauvegardés dans le dossier node_modules. Vous devriez maintenant être prêt à configurer une application Angular 2, nous avons utilisé le this pour commencer.

19
Dan O'Leary

J'ai créé un projet de démarrage pour Angular 2.0 qui vient de démarrer à l'adresse suivante: https://github.com/chanoto89/angular2-startup avec ASP.NET 4.5.2. 

J'ai utilisé le http://blogs.msmvps.com/deborahk/angular-2-getting-started-with-a-visual-studio-2015-asp-net-4-x-project/ outline, mais a tiré parti de l'utilisation de MVC et de gulp pour déplacer les dépendances nécessaires dans le projet plutôt que d'utiliser l'intégralité de node_modules installés par npm. 

2
chanoto89

Ils ont mis à jour le site Angular avec un scénario non-Core:

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

2
McGuireV10

J'ai suivi https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html et je me suis heurté à un problème, c'est pour vous aider si quelqu'un rencontre le même problème.

Pour une raison quelconque, je n'avais pas l'option de restauration de packages sur package.json pour un nouveau projet, le redémarrage de la profession de visual studio 2015 a de nouveau apporté cette option.

Et je devais copier systemjs.config.js dans le dossier des projets, sinon il était bloqué lors du chargement ..., la barre des développeurs indiquait 404 pour systemjs.config.js et sa copie apportait "Mon premier outil d'aide angulaire".

0
asolvent