Stay lazy with angular / cli
To run the Angular 5 application on the node.js server, you need:
* following the recommendations of the site version 1.2 will be installed. Sloths like me need version 1.6 *.
** optional, but faster with it
Generally speaking, the headline is too loud for action.
If installed
After that,
So,
Create a project
If there is no
Then we execute
Now our little application is almost done. You can run it in development mode
And enjoy the sample page at http: // localhost: 4200
But all this was started after all not for this. And I propose to proceed to the next step.
And here we need
The second word
This command miraculously creates the necessary files and changes the configuration of existing ones.
Now install the packages for the server
Npm lovers can perform
We just need to create a
And in the
The final phase. We collect and run our server
In this case, the already familiar welcome page of our application can be seen at: http: // localhost: 3000
Particularly suspicious can disable javascript in the browser and make sure that everything is drawn on the server side.
Very lazy can get the finished project here .
And the curious can read the article , which is the basis for this tutorial.
* following the recommendations of the site version 1.2 will be installed. Sloths like me need version 1.6 *.
Details under the spoiler
If ng (angular / cli) is already installed. Check version
')
If version <1.6 - update
Check the result
If version> 1.6 - the goal is reached.
')
ng -v If version <1.6 - update
npm uninstall -g @angular/cli npm cache npm cache verify npm i -g @angular/cli@latest Check the result
ng -v If version> 1.6 - the goal is reached.
** optional, but faster with it
Step 1. Deploy a new application.
Generally speaking, the headline is too loud for action.
If installed
yarn recommend ng set --global packageManager=yarn After that,
ng use yarn to install all the necessary project dependencies.So,
ng new my-project cd my-project Create a project
my-project in the folder my-project and go to this folder.If there is no
node_modules folder in the project folder, then my recommendations for installing yarn staff package manager for ng were ignored. Or something went wrong.Then we execute
npm install Now our little application is almost done. You can run it in development mode
npm run build And enjoy the sample page at http: // localhost: 4200
But all this was started after all not for this. And I propose to proceed to the next step.
Step 2. Configure the node.js server
And here we need
ng > 1.6 ng g universal universal The second word
universal is not a slip of the pen. In this case, this is the name for the module. If you like copy-paste mode, then I suggest leaving everything as it is. Then you can always fix it.This command miraculously creates the necessary files and changes the configuration of existing ones.
Now install the packages for the server
yarn add @angular/platform-server express @nguniversal/express-engine Npm lovers can perform
npm i @angular/platform-server express @nguniversal/express-engine We just need to create a
server.js file in the root of our little project.server.js
'use strict'; /* Zone.js */ require('zone.js/dist/zone-node'); const express = require('express'); const ngUniversal = require('@nguniversal/express-engine'); const appServer = require('./dist-server/main.bundle'); /* */ function angularRouter(req, res) { res.render('index', { req, res }); } const app = express(); /* */ app.get('/', angularRouter); /* CLI (index.html, CSS? JS, assets...) */ app.use(express.static(`${__dirname}/dist`)); /* Angular Express */ app.engine('html', ngUniversal.ngExpressEngine({ bootstrap: appServer.AppServerModuleNgFactory })); app.set('view engine', 'html'); app.set('views', 'dist'); /* Direct all routes to index.html, where Angular will take care of routing */ app.get('*', angularRouter); app.post('*', angularRouter); app.listen(3000, () => { console.log(`Listening on http://localhost:3000`); }); And in the
package.json file, add or replace the “build” script "sctipts": { // - . "build": "ng build --prod && ng build --prod --app universal --output-hashing=none" }, The final phase. We collect and run our server
npm run build node server.js In this case, the already familiar welcome page of our application can be seen at: http: // localhost: 3000
Particularly suspicious can disable javascript in the browser and make sure that everything is drawn on the server side.
Very lazy can get the finished project here .
And the curious can read the article , which is the basis for this tutorial.
Source: https://habr.com/ru/post/344832/
All Articles