How to add angular 4 to existing node.js application

Question

I have a node.js application set up to use typescript. The application is supposed to be deployed on heroku. The node.js application is set up as an restful api for things like auth, registration and requests.

I would like to know what dependencies I need to add in order to begin building an angular 4 application in the same project.

I saw an issue on github where the recommendation was to use ng init however that is no longer an option. ng new creates an entirely new project directory rather than adding the dependencies and files.

There is another question on here where the OP marked his own answer as correct which basically says "use meteor".

EDIT: I understand how to serve an angular 2+ application along side from within a node.js app when working locally, just build and serve the index.ts file. But how can I have the angular development files coexist with node.js files in git so I can compile them and deploy them together?

You mean, Your restful api is now on server, You want to build an angular app for it? is that so? and can't you make a new project for angular4. I mean cant you separate ng app and node server. — Viran Malaka
– Viran Malaka, Commented Jul 11, 2017 at 5:00
your question doesn't seem to make a lot of sense. Angular js a client side application, while Node.js is a server side application. While you can mix the projects together for ease of development, they have nothing to do with each other in terms of functionality or dependencies; i.e. Any app can use the Restful API that your node app provides, no matter how it's developed or published. — Claies
– Claies, Commented Jul 11, 2017 at 5:04
The api is now on a server yes, it is to be consumed by multiple applications, mobile and web. — xerotolerant
– xerotolerant, Commented Jul 11, 2017 at 5:05
as a side note, you mention a question here where the OP asks a question about a framework and then "correctly" answers his question saying "use a different framework". This seems to be an abuse of the QA system here, and that should probably be reported. — Claies
– Claies, Commented Jul 11, 2017 at 5:05
@Claies, I don't have enough room here to explain the difference between angularjs and angular 2+. In angular 2+ they "black boxed" most of the setting up of the application behind the angular-cli. This is great for creating applications from scratch but not really for having them coexist. — xerotolerant
– xerotolerant, Commented Jul 11, 2017 at 5:08

user4676340 · Accepted Answer · 2017-07-11 07:30:14Z

I had the same case, I had a parse server on heroku and wanted to group it with Angular.

In my server.js file :

app.use(express.static(__dirname + '/dist'));

(You just need express)

I also use internationalization, so I made something quick (early stage, please don't judge) :

app.get('/', function(req, res) {
  let userLanguage = req.headers["accept-language"];
  let langs = ['fr', 'en'];
  let preferred = userLanguage.substr(0, 2).toLowerCase();
  console.log('User\'s preferred language is ' + preferred.toUpperCase());
  if (langs.indexOf(preferred) >= 0) { res.redirect(preferred); } else { res.redirect('/en'); }
});

My NG commands :

"postinstall": "npm run build-i18n",
"i18n": "ng xi18n --output-path src/i18n --out-file messages.xlf",
"build-i18n:fr": "ng build --output-path=dist/fr --aot --prod --bh /fr/ --i18n-file=src/i18n/messages.fr.xlf --i18n-format=xlf --locale=fr",
"build-i18n:en": "ng build --output-path=dist/en --aot --prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en",
"build-i18n": "npm run build-i18n:en && npm run build-i18n:fr"

My apps is built in 2 folders for the actual 2 languages, and the user is redirected to either of them when he comes to the app.

Collectives™ on Stack Overflow

How to add angular 4 to existing node.js application

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related