web-dev-qa-db-fra.com

ASP.Net MVC Angular 2 finale

Quelqu'un a-t-il essayé Angular 2 RC Final avec ASP.Net MVC?

Je ne parviens pas à configurer Angular 2 RC 6 avec ASP.Net MVC, jusqu'à la version 17, tout fonctionnait correctement.

Le package.json avec la configuration ci-dessous ne semble pas fonctionner:

"dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.1",

    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

  },

La restauration des packages affiche la sortie ci-dessous dans les fenêtres de sortie:

====Executing command 'npm install'====


npm WARN package.json @ No description
npm WARN package.json @ No repository field.
npm WARN package.json @ No README data
npm http GET http://registry.npmjs.org/systemjs
npm http GET http://registry.npmjs.org/angular/compiler
npm http GET http://registry.npmjs.org/angular/core
npm http GET http://registry.npmjs.org/angular/http
npm http GET http://registry.npmjs.org/angular/platform-browser
npm http GET http://registry.npmjs.org/angular/platform-browser-dynamic
npm http GET http://registry.npmjs.org/angular/router
npm http GET http://registry.npmjs.org/angular/router-deprecated
npm http GET http://registry.npmjs.org/angular/common
npm http GET http://registry.npmjs.org/reflect-metadata
npm http GET http://registry.npmjs.org/angular/upgrade
npm http 304 http://registry.npmjs.org/systemjs
npm http 404 http://registry.npmjs.org/angular/platform-browser
npm http 404 http://registry.npmjs.org/angular/core
npm ERR! 404 Not Found
npm ERR! 404 
npm ERR! 404 'angular/platform-browser' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.
npm ERR! System Windows_NT 6.2.9200
npm ERR! command "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\\\node\\node" "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! cwd D:\User\MyProject-MVC6\src\MyProject
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.9
npm ERR! code E404
npm http 404 http://registry.npmjs.org/angular/http
npm http 404 http://registry.npmjs.org/angular/compiler
npm http 404 http://registry.npmjs.org/angular/router-deprecated
npm http 404 http://registry.npmjs.org/angular/router
npm http 404 http://registry.npmjs.org/angular/platform-browser-dynamic
npm http 304 http://registry.npmjs.org/reflect-metadata
npm http 404 http://registry.npmjs.org/angular/common
npm http 404 http://registry.npmjs.org/angular/upgrade
npm

====npm command completed with exit code 1====

Des instructions étape par étape pour utiliser Angular2 RC 6 avec ASP.Net MVC seraient grandement appréciées.

asp.net-mvcangularasp.net-mvc-5asp.net-core-mvcasp.net5
11
Naveed Ahmed

Je l'ai réparé! partage des détails si quelqu'un a encore du mal à obtenir Angular 2 Travail final avec ASP.Net MVC

Permettez-moi de remercier Barry et Brando pour leurs conseils à différents moments.

J'ai pu corriger les erreurs ci-dessus en suivant les étapes ci-dessous:

Visual Studio 2015 est fourni avec une très ancienne version de npm. Par conséquent, la première chose à faire est de télécharger et d'installer la dernière version de Node à partir de https://nodejs.org/en/ (j'ai installé la version 6.1.0, la dernière en date).

Après l'installation, vous devez indiquer à Visual Studio d'utiliser la dernière version du noeud au lieu de l'ancienne version intégrée. Pour cela, suivez les étapes ci-dessous:

  1. Dans le menu supérieur de Visual Studio, sélectionnez Outils> Options.
  2. Développez le noeud Projet et solution affiché dans la boîte de dialogue.
  3. Sélectionner des outils Web externes
  4. Ajouter une nouvelle entrée pointant vers C:\Program Files\nodejs (ou vers l'emplacement où vous avez installé nodejs)
  5. Déplacez-le en haut de la liste.

 enter image description here

  1. Redémarrez Visual Studio et restaurez les packages npm.

Cela devrait corriger les erreurs ci-dessus, mais maintenant, si vous essayez de compiler le projet, vous risquez de rencontrer beaucoup d'erreurs principalement dues aux définitions de type manquantes, telles que:

Code de gravité Description État de suppression de ligne de fichier de projet
Erreur TS6053 Build: Fichier /node_modules/angular2/ts/typings/jasmine/jasmine.d.ts 'introuvable

Nom de module non valide en augmentation, module '../../Observable' introuvable.
Projets virtuels TypeScript node_modules\rxjs\add\operator\Zip.d.ts

La propriété 'map' n'existe pas sur le type 'Observable'.

Pour corriger les erreurs ci-dessus, il vous suffit d'ajouter le lien ci-dessous au-dessus de votre fichier main.ts ou bootstrap.ts:

///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>

Cela devrait corriger les erreurs de frappe ci-dessus.

Avec RC, l’équipe Angular propose tous les composants dans des fichiers séparés. Ainsi, jadis, si vous pouviez inclure le paquet Angular en tant que fichier empaqueté angular2.dev.js (ou fichier min) dans le fichier Index, cela ne fonctionnera pas maintenant. Les composants requis doivent être inclus dans l'index requis par votre application. Vous pouvez utiliser systemjs.config.js pour inclure des dépendances. Je recommande fortement de consulter le guide de démarrage rapide officiel spécialement dans cette section:

Lien: https://angular.io/guide/quickstart

Même après une configuration correcte en suivant les étapes ci-dessus, lorsque vous exécutez votre application, il est possible que 404 apparaisse pour les fichiers angulaires manquants.

La raison en est que, par défaut, ASP.Net 5 recherche les dépendances Angular dans le dossier/wwwroot/node_modules /. Et puisque node_modules est dans le dossier racine du projet, pas dans le dossier wwwroot, le navigateur renvoie 404 (aucune erreur trouvée). Le déplacement du dossier @angular du dossier node_modules vers wwwroot devrait donc résoudre le problème.

Erreurs de carte

Dans certains cas, la mise à niveau de la version TypeScript corrige également les erreurs de carte:

Essayez de passer à TypeScript 2 en procédant comme suit: - Dans Visual Studio, cliquez sur Outils> Extensions et mises à jour. - Sélectionnez En ligne dans la liste affichée à gauche de la boîte de dialogue. - Rechercher TypeScript - Dans les résultats de la recherche, installez TypeScript 2.0 Beta pour Microsoft Visual Studio 2015. - Redémarrez l'ordinateur et espérons qu'il corrigera toutes les erreurs de carte

J'espère que cela t'aides.

14
Naveed Ahmed

vous devez ajouter

/// <reference path="../node_modules/angular2-in-memory-web-api/typings/browser.d.ts" />

sur le dessus de vos main.ts ou bootstrap.ts qui vont supprimer les erreurs de frappe

référence est inclus dans

angular2-in-memory-web-api

1
Barry

La solution à ce problème peut être de mettre à niveau la version de Node et NPM comme décrit ici (le problème existe avec les versions de NPM/Node - tout ce qui se trouve au-dessus des nœuds v5.10.1 et npm v3.8.6 + semble être correct).

téléchargez le dernier noeud à partir du lien ci-dessous en fonction de votre architecture Windows 32/64 bits

https://nodejs.org/en/blog/release/v5.10.1/://

0
Barry