Javascript Girl
  1. Javascript Girl
  3. Angular2 Material Design alpha.9-3 a '404 not found' pour @ angular / material
Intereting Posts
Comment pouvons-nous renvoyer la chaîne de la fonction de rappel à la fonction racine dans node.js? Comment saisir des erreurs JavaScript dans tous les Iframes (avec window.error)? Comment lier un événement à sessionStorage? Chercher '\' en utilisant javascript Google Maps InfoBubble pixelOffset (Déplacement de la position par défaut au-dessus du marqueur) Comment le jquery chaining fonctionne-t-il? Formatage d'une chaîne de date pour convenir au calendrier Google comme argument Réagir (Facebook): état géré des cases à cocher contrôlées Comment dessiner une ligne continue en douceur avec la souris à l'aide de la toile html et javascript Utilisation d'une liste de cases dans knockoutjs Comment utiliser une variable String comme clé dans un objet JSON PhantomJS comment rendre javascript en chaîne html Ajouter une autre classe à une div avec javascript Ecrire l'analyseur JSON pour formater les données pour le graphique circulaire (HighCharts) Comment déboguer Grunt Mocha Task?

Angular2 Material Design alpha.9-3 a '404 not found' pour @ angular / material

J'ai suivi les instructions sur le matériau angulaire2 Mise en route pour installer @ angular / material. Via Atom, j'ai mis à jour package.json, app.module, et au-delà des instructions Getting Started, j'ai mis à jour systemjs.config, comme suit: '@ angular / material': 'node_modules / @ angular / material',

Je reçois ces erreurs: zone.js: 1274 GET http: // localhost: 3000 / node_modules / @ angular / material / 404 (Not Found)

(SystemJS) erreur XHR (404 introuvable) loading http: // localhost: 3000 / node_modules / @ angular / material (…)

Je crois que j'ai suivi le problème au fait que de nombreux dossiers numériques ont un sous-dossier de paquet contenant le fichier umd, mais le dossier @ angular / material n'a pas de sous-dossier de paquetage. Par conséquent, la fonction "déballage" ne peut pas trouver @ angular / material / material.umd.js

Systemjs est en dehors de ma zone de confort, donc je ne suis pas sûr de ce qui précède, mais je ne suis pas en mesure de résoudre le problème 404 avec la nouvelle structure de fichier de l'alpha.9-3 Voici le code pertinent (les autres composants ne sont pas affichés).

Package.json 

"@angular/material": "2.0.0-alpha.9-3",

App.module 

  import { MaterialModule } from '@angular/material'; @NgModule({ imports: MaterialModule.forRoot(),

Systemjs.config 

  (function(global) { var map = { 'app': 'app', // angular bundles '@angular': 'node_modules/@angular', // other libraries 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs', '@angular/material': 'node_modules/@angular/material', }; var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs':{ defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, }; var ngPackageNames = [ 'common', 'compiler', 'core', 'forms', 'http', 'platform-browser', 'platform-browser-dynamic', 'platform-server', 'router', 'upgrade', ]; //adding 'material' to the array causes a different 404 error function packIndex(pkgName) { packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; } function packUmd(pkgName) { packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; } var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; ngPackageNames.forEach(setPackageConfig); var config = { map: map, packages: packages }; System.config(config); })(this); //end of function(global)

J'ai vérifié ma structure de dossier / fichier et @ angular / material / material.umd.js est certainement là. Comment puis-je me débarrasser du 404 introuvable?

Supprimez les éléments suivants de la map

'@ Angular / material': 'node_modules / @ angular / material',

Ajouter du material à la matrice ngPackageNames : 

 var ngPackageNames = [ ... 'material' ];

Ensuite, remplacez votre fonction packUmd avec 

 function packUmd(pkgName) { packages['@angular/'+pkgName] = { main: (pkgName !== 'material' ? 'bundles/' : '') + pkgName + '.umd.js', defaultExtension: 'js' }; }

Ensuite, cela devrait fonctionner

Ou utilisez cette config comme dans le démarrage rapide angular2: 

 (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', '@angular/material': 'npm:@angular/material/bundles/material.umd.js' // other libraries 'rxjs': 'npm:rxjs' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } }); })(this);