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">
- <!-- 1. Load libraries -->
- <!-- IE required polyfill -->
- <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>
- <!-- 2. Load our 'modules' -->
- <script src='app/app.component.js'></script>
- <script src='app/main.js'></script>
- </head>
- <!-- 3. Display the application -->
- <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.
---------------
i5 13600K|32Go GSkill DDR4 3600Mhz|RTX 3080Ti FE|Meta Quest 3