Serve two Angular5 applications in Expressjs

Question

Serve two Angular5 applications in Expressjs

Navigation

#1 by (0 votes)

0

I'm setting up a server with express that I want to serve a rest API and two Angular5 applications.

I have a nginx proxy in front of me that redirects the traffic to the express application, transforming http requests to https.

The directory structure is:

servidor.js (Apliacion express)
    ├── api
    ├── app1
    │   ├──index.html
    │   ├──assets
    │   └──*.js y *.css
    └── app2
        ├──index.html
        ├──assets
        └──*.js y *.css

On the express server I have:

require('./api/index')(app);

const options = { extensions: ['html', 'js', 'css'],
                 maxAge: '1d',
                 setHeaders: res => res.set('x-timestamp', Date.now() )}
app.use('/app1', express.static(path.join(__dirname, '/app1'), options));
app.use('/app2', express.static(path.join(__dirname, '/app2'), options));        

app.get('/app1', (req, res) => {
    res.type('html'); 
    res.sendFile(__dirname + '/app1/index.html');
});

app.get('/app2', (req, res) => {
    res.type('html'); 
    res.sendFile(__dirname + '/app2/index.html');
});

The API answers me correctly.

/ answers me with app1.

/ app1 responds with app1.

I have the problem with app2 since / app2 responds with the correct html of app2 but with the following errors in loading the js and the css:

Refused to apply style from 'https://midominio.com/styles.9c0ad73….bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
midominio.com/:1 GET https://midominio.com/inline.8f40296….bundle.js net::ERR_ABORTED
midominio.com/:1 GET https://midominio.com/polyfills.f20484b….bundle.js net::ERR_ABORTED
midominio.com/:1 GET https://midominio.com/main.56d2be6….bundle.js net::ERR_ABORTED

And even better, I would need to collect parameters from the url to directly access internal routes of the application.

For example: link

Can someone help me with this?

Greetings.

express angular4

asked by Apicito Diaz 31.01.2018 в 18:10

source

1 answer

How can I handle an event for the Scrollbar and No for the Mouse Drag and Drop events in FullCalendar and update database

score 0 · Answer 1

I autorespondo for the future consults of the thread.

I copy the files from the folders / dist of the two applications to / app1.

!!! Eye !!! Change the name of the indes of the app2 to app2.html

At the root of the app1 routes I have / admin and / gestion, so I define those two routes in the express.

At the root of the app2 routes I have several routes and define them in express, but telling them to load the renamed index.

Finally I define a static folder where I have the 2 html and all the js and css of the applications.

Like this:

servidor.js (Apliacion express)
    ├── api
    └─── app1
       ├──index.html
       ├──app2.html    
       ├──assets
       └──*.js y *.css

And the content of servidor.js:

require('./api/index')(app);    

app.get('/gestion', (req, res) => {
    res.sendFile(__dirname + '/app1/index.html');
});    

app.get('/admin', (req, res) => {
    res.sendFile(__dirname + '/app1/index.html');
});    

app.get('/zona/:id', (req, res) => {
    res.sendFile(__dirname + '/app2.html');
});

app.get('/tipo/:id', (req, res) => {
    res.sendFile(__dirname + '/app2.html');
});

.......

const options = { extensions: ['html', 'js', 'css', 'ico'],
                 maxAge: '1d',
                 setHeaders: res => res.set('x-timestamp', Date.now() )}

app.use(express.static(path.join(__dirname, '/app1'), options));