web-dev-qa-db-fra.com

Comment utiliser Angular Matériau avec modèles de spa VS2017

Je construis une application Angular2 à l'aide des modèles SPA et des services JavaScript fournis par Microsoft ( https://blogs.msdn.Microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp -net-core-with-javascriptservices/ ).

J'aimerais utiliser Angular Material, par opposition à Bootstrap, pour le style/thème, mais je ne parviens pas à le faire fonctionner.

Suivre le guide d’installation ( https://material.angular.io/guide/getting-started ) est assez simple, cependant, s’agissant d’inclure les actifs de thème (@ angular/material/prebuilt-themes/.. .) du paquet npm dans la sortie wwwroot dist pour les mettre à la disposition de l'application, je suis complètement perdue.

Je suppose que c'est simplement un cas de modification de la configuration de WebPack. Cependant, après une heure ou deux de bricolage et de recherches sur Google, je ne suis pas plus près de comprendre quoi faire.

Quelqu'un peut-il me diriger dans la bonne direction?

NB Veuillez ne pas suggérer de copier les fichiers dont j'ai besoin sur le wwwroot ou de créer un lien vers un CDN, etc.

angularwebpackasp.net-coresingle-page-application
9
James Law

Je pense avoir éventuellement trouvé un moyen plus complet/complet d'y parvenir ...

  1. Fermez votre solution Visual Studio
  2. Ouvrez le dossier du projet et supprimez le répertoire node_modules
  3. Ouvrez une invite de commande pour le répertoire du projet
  4. Exécuter npm install --save @angular/material @angular/cdk dans l'invite de commande
  5. Exécuter npm install --save @angular/animations dans l'invite de commande
  6. Mettez à niveau les packages @angular et rxjs vers les versions les plus récentes/compatibles dans package.json. C'est un mal de tête. Je ne sais pas quelles sont les bonnes versions et quelles sont les mauvaises!
  7. Exécuter npm install dans l'invite de commande

  8. Mettez à jour webpack.config.vendor.js en ajoutant les deux valeurs suivantes

    const nonTreeShakableModules = [
    ...
    '@angular/material',
    '@angular/material/prebuilt-themes/deeppurple-amber.css'
];

  9. Exécuter webpack --config webpack.config.vendor.js dans l'invite de commande

  10. Ouvrez la solution dans Visual Studio.
  11. Construisez la solution, après quoi vous devriez pouvoir l’utiliser, après avoir suivi le guide "Getting Started" de https://material.angular.io/guide/getting-started

J'ai vérifié une version vaguement active de GitHub - vous pouvez la trouver à https://github.com/alterius/AngularMaterial2DotNetCoreSPA

4
James Law

Dans webpack.config.vendor.js, ajoutez les deux entrées suivantes:

const nonTreeShakableModules = [
    ...
    "@angular/material",
    "@angular/material/prebuilt-themes/deeppurple-amber.css"
];

Relancez webpack via:

webpack --config webpack.config.vendor.js

Source: Ajout de Angular Matériel dans ASP.NET Core Angular Modèle SPA par Fiyaz Hasan

6
spottedmahn

Un nouveau modèle est disponible et il est bien meilleur que l'ancien. J'ai également rencontré de nombreux problèmes dans l'ancienne version du modèle fournie par Visual Studio. Le nouveau modèle est disponible dans ASP.Net Core 2.1 par défaut. Sinon, vous devez suivre les instructions du lien ci-dessous.

https://docs.Microsoft.com/en-us/aspnet/core/spa/angular?view=aspnetcore-2.1&tabs=visual-studio

Si vous recherchez un exemple d'utilisation avec EF Core 2, Angular Material et ASP.Net Core Web API, veuillez vous reporter au lien ci-dessous.

http://Hive.rinoy.in/building-a-web-app-using-asp-net-core-2-and-angular5-frameworks/

0
rinoy