CODEWITHSUNDEEP
javascriptangularwebpack
bbl64
bbl64

Reputation: 55

Integrating an Angular app with Vanilla JS webapp

I'm in need of your assistance.

Background We have a legacy Vanilla JS webapp which we intent to replace with Angular. Due to time constraints we wish to do this gradually where we replace one isolated component at a time but also add new functionality as isolaed Angular apps.

The goals is of course to be able to completely move to Angular in a timeframe between 6-12 months.

Issue I've been investigating how to seamlessly integrate an angular app with our vanilla js with webpack (which we are already using to build our app). There has been no examples on how do this for Angular whereas I've seen examples for React. The intention is to have a separate directory for the angular which is then bootstrapped when needed in the vanilla JS. We want to build the angular stuff alongside the rest in one aot js.

Consequences The consequences I see is of course time to bootstrap the angular app but when using aot there should be not be much of an issue.

Solution?? This is where you guys come into play. How do we easily build the angular app together with the vanilla js app?

Ideally I want to somehow ng build --prod the angular app and then include the result in the vanilla js webpack dist.

Thanks in advance.

Upvotes: 4

Views: 2013

Answers (1)

user4676340
user4676340

Reputation:

If I were you I would do the opposite : integrate the vanillaJS application into Angular.

As Lazar said, Angular is a platform. You code an application using Typescript.

The good news is, every valid JS code will be valid TS code. The opposite, on the other hand, isn't true.

So what I would do, is take my old application chunk by chunk, and put it in a new Angular application.

And I know you are using webpack and it might work great for you, but I highly recommend you to start from scratch with the CLI. Not only because it also uses Webpack, but because it represents 90% (arbitrary number, but not so far from it) of the Angular projects, meaning if you have any issue, there's a whole community that will be able to help you.

Without, of course, mentioning all the features such as i18n, server-side rendering, AOT ...

Upvotes: 3

Related Questions