AngularJS 2 et NodeJS

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 :

{
"name": "TestAngularNode",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "npm run lite",
"lite": "lite-server"
},

contenu du index.html :

Code :

<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
<script src='app/app.component.js'></script>
<script src='app/main.js'></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

Maintenant si je veux utiliser mon implémentation d'un serveur Node avec

Server.js :

Code :

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});

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 :

(function (app) {
document.addEventListener('DOMContentLoaded', function () {
ng.platform.browser.bootstrap(app.AppComponent);
});
})(window.app || (window.app = {}));

app.component.js :

Code :

(function (app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function () {}
});
})(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 ) 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

---------------
"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

AngularJS 2 et NodeJS

Sujets relatifs:

Leave a Replay