2

So to start with I'd like to say I've been developing with Angular 1 for 2/3 years and have an app that is currently using typescript with namespaces/internal modules and 1.5 components.

Like most people now I am looking at trying to integrate Angular 2 and while the docs on the Angular.io website are very informative I'm still really struggling to work some stuff out. I've never used module loaders/bundlers before and this seems to be a bit of a learning curve. The upgrade tutorial uses SystemJs yet I've heard that Webpack is actually the preferred bundler but the Webpack tutorial only seak in relation to a pure Angular 2 app not a hybrid.

To get to the point what I guess I'm asking is, what is the best module loader/bundler for a hybrid app? Also with using typescript namespaces instead of external modules is it even possible to create a hybrid app? I know webpack works through dependences using import statements so I'm thinking this would rule it out, but should I be looking to move from namespaces first and then think about integrating Angular 2?

Also the part of the upgrade guide on Angular.io which seems to cover hooking up the upgrade adapter is very unclear. There are code snippets but no mention of what file they should be in and also some snippets don't seem to even work. For example where the upgrade adapter is moved to a seperate file it seems to be magically getting the AppModule but doesn't import it.

If anyone could shed some light on just one of my queries it would be much appreciated, as at the moment I just feel like forgetting Angular 2 and sticking with Angular 1.

Improve this question
6
  • I have got angular1 and angular2 hybrid app working with systemjs. Haven't looked at webpack though. But my trick was to load angular1 related file normally as we do but override angular2 bootstrapping and manually bootstrap angular one in angular2 bootstrapping process. This way I am using angula2 component in angular one and angular 2 classes in angular1 Commented Feb 25, 2017 at 2:38
  • @AtulChaudhary, I did the same with Webpack, by keeping angular js running normal on a webpack built Angular2. I am also looking for a solution to built the entire thing as a bundle. Commented Mar 1, 2017 at 8:53
  • @Chris N I got it working with webpack both angular 1 and angular2 in single bundle. Commented Mar 1, 2017 at 10:16
  • @AtulChaudhary Don't suppose you have an example anywhere do you? Commented Mar 1, 2017 at 11:57
  • I will put it on github soon n will update you. It will be just a starter project to get hybrid framework up n running. Commented Mar 1, 2017 at 13:13

1 Answer 1

Reset to default
1

There you go mate. This the link for github repo which will get you started with angular1 and angular2 hybrid app. I am using .net core as my project setup but you can use whatever u like. Make sure you delete @progress/kendo-ui this from package json and anything that got kendo in it. Run npm install or npm run dist command to create dist folder.

Link for repo is Angular webpack hybrid Github repo

Make sure you accept this is an answer when done. It will help others too

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I forgot to mention the the repo that I have copied and should be given credit. github.com/preboot/angular2-webpack

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.