AngularJS 2 et NodeJS

AngularJS 2 et NodeJS - Javascript/Node.js - Programmation

Marsh Posté le 09-02-2016 à 08:38:23    

Bonjour,
 
j'ai essayé le petit tuto de départ d'AngularJS 2 avec un serveur NodeJS.
 
Si j'utilise le lite-server, aucun soucis, quand je démarre mon serveur avec le script Start cela fonctionne et la page de test s'ouvre dans mon navigateur.
 
extrait du package.json :

Code :
  1. {
  2.   "name": "TestAngularNode",
  3.   "version": "0.0.1",
  4.   "private": true,
  5.   "scripts": {
  6.     "start": "npm run lite",
  7.     "lite": "lite-server"
  8.   },


 
contenu du index.html :

Code :
  1. <html>
  2. <head>
  3.     <title>Angular 2 QuickStart</title>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1">
  5.     <!-- 1. Load libraries -->
  6.     <!-- IE required polyfill -->
  7.     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  8.     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  9.     <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
  10.     <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
  11.     <!-- 2. Load our 'modules' -->
  12.     <script src='app/app.component.js'></script>
  13.     <script src='app/main.js'></script>
  14. </head>
  15. <!-- 3. Display the application -->
  16. <body>
  17. <my-app>Loading...</my-app>
  18. </body>
  19. </html>


 
Maintenant si je veux utiliser mon implémentation d'un serveur Node avec
 
Server.js :

Code :
  1. var express = require('express');
  2. var path = require('path');
  3. var logger = require('morgan');
  4. var cookieParser = require('cookie-parser');
  5. var bodyParser = require('body-parser');
  6. var app = express();
  7. app.set('port', process.env.PORT || 3000);
  8. app.use(logger('dev'));
  9. app.use(bodyParser.json());
  10. app.use(bodyParser.urlencoded({ extended: false }));
  11. app.use(cookieParser());
  12. app.use(express.static(path.join(__dirname, 'public')));
  13. app.listen(app.get('port'), function () {
  14.   console.log('Express server listening on port ' + app.get('port'));
  15. });


 
cela ne fonctionne pas, le code angular ne semble pas s'exécuter car la page index.html est affichée mais la section <my-app></my-app> n'est pas remplacée par ce qui est décrit dans le code Angular
 
Code Angular :
 
main.js :

Code :
  1. (function (app) {
  2.     document.addEventListener('DOMContentLoaded', function () {
  3.         ng.platform.browser.bootstrap(app.AppComponent);
  4.     });
  5. })(window.app || (window.app = {}));


 
app.component.js :

Code :
  1. (function (app) {
  2.     app.AppComponent =
  3.         ng.core.Component({
  4.                 selector: 'my-app',
  5.                 template: '<h1>My First Angular 2 App</h1>'
  6.             })
  7.             .Class({
  8.                 constructor: function () {}
  9.             });
  10. })(window.app || (window.app = {}));


 
Auriez vous une idée du pourquoi ?
 
Merci.  :jap:


---------------
i5 13600K|32Go GSkill DDR4 3600Mhz|RTX 3080Ti FE|Meta Quest 3
Reply

Marsh Posté le 09-02-2016 à 08:38:23   

Reply

Marsh Posté le 11-02-2016 à 20:35:15    

Salut,
 
Je connais pas lite-server (ni angular :p) mais de ce que je comprends, c'est un mini serveur qui va te servir ton fichier. Concretement avec lite-server le dossier node_modules est accessible, alors que avec ton serveur express, ce dossier est inacessible (et c'est mieux comme ca !)
 
Bref, tes liens node_modules/... n'ont pas lieux d'être dans ta page HTML.
 
Ps : mon explication est valable seulement si ton dossier node_modules n'est pas dans le dossier public/
 
Après je peux me tromper :p  
   


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed