17

Just took a look at the last angular version that the angular team launch. Angular2 is out and they have been release a their new webpage https://angular.io.

In there they have a 5 min quickstart project that shows quickly the new syntax and what you have to use to perform a new angular application.

I just did all the steps to get it working but it took 4.93 seconds to load.

I'm just wondering, is angular 2 that slow? Or maybe I miss some steps.

Here is my code

// app.es6

import { Component, Template, bootstrap } from "angular2/angular2";

// Annotation section
@Component({
  selector: "my-app"
})
@Template({
  inline: "<h1>Hello {{ name }}</h1>"
})
// Component controller
class MyAppComponent {
  constructor() {
    this.name = "Alex!";
  }
}

bootstrap(MyAppComponent);

and index.html

<!-- index.html -->
<html>

<head>
    <title>Angular 2 Quickstart</title>
    <script src="dist/es6-shim.js"></script>
</head>

<body>

    <!-- The app component created in app.js -->
    <my-app></my-app>

    <script>
        // Rewrite the paths to load the files
          System.paths = {
            'angular2/*':'angular2/*.js', // Angular
            'rtts_assert/*': 'rtts_assert/*.js', //Runtime assertions
            'app': 'app.js' // The my-app component
          };

          // Kick off the application
          System.import('app');
    </script>
</body>

</html>
1
  • 3
    since angular2 is in alpha preview and they don't recommend using it for production purposes, your best resource will likely be their google group or their live chat. Any answer provided here is of limited use, and likely out of date very quickly. Commented Mar 8, 2015 at 13:15

3 Answers 3

31
  • You are running with RTTS (run-time type system checks) It is great for development, but slow for production
  • We have not concatenated all the files into single file for fast loading.
  • We still have the slow change detection, since the fast one is not yet working in Dart, and we want to be consistent.

See https://github.com/djsmith42/angular2_calendar on how to get it to run fast.

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

5 Comments

To add to Misko's comment, I would definitely watch this talk that just happened last week at ng-conf and "feel the speed" of Angular 2 at the end of the video: youtu.be/XQM0K6YG18s
Considering Angular2 is now in Beta. It (min version from code.angular) takes ~6 secs in a Regular 3G throttle mode to download and load. The file size is bigger than 1.x. More, there are other dependencies. What all is going to change later with this, once out of beta? Little of concern here on load times.
@Gary Is the code still using on-the-fly transpilation? You have to pre-transpile it down to ES5 to get regular loading speeds.
No, it is being transpiled before.
@Misko Thanks . How to stop RTTS in production, I am using webpack configuration, my code is of nk lines and takes too much time to load, how to disable that in production ? I am also using lazy load plugin but that seem to be helping a little only .Could you please tell me that.
4

Yes, a page written using angular2 is slow.

I'm not saying the angular2 code is slow (I wouldn't dare), just that the simplest page you can write using angular will load in 5 seconds or more. There are a LOT of files which need to be loaded. It's true that you can make this faster by combining files so you get fewer http requests, and being careful about not loading stuff you are not using, but it is never going to be fast like a simple html + js page.

It is important to remember though, that angular is designed for single page apps. All the dependencies load once, in a single index file, and from then on, the angular routing allows you to navigate to different "pages", which are really just template files.

In other words, once the big upfront hit is done, it can be really fast, and most importantly, very productive.

4 Comments

Its not true. You can design your app with lazy loading in order to load only what you need during page load. Our app have 20 components and needs 1 second to load.
@gtzinos, could you please show me an example of lazy loading? My App has around 25 component and it takes hell lot of time to load. Even after initial loading. If the user clicks on any link in navigation, the page takes around 10 seconds to redirect.
Saying "5 seconds" is like saying "a million years" in software. It's A LOT of time. 500ms is more like it, and even then I think it's probably faster than that. And then again, 99% there are other reasons behind slow performance. Mostly nonoptimal algorithms and slow db queries.
1

If you follow the QuickStart tutorial line by line if for the latest version alpha27, it's going to be dead slow as the System.js and angular2.min.js file takes ages to load. Better is if you can use our own server to host them. Moreover, from your code you seem to be using a pre-alpha20 codebase. Upgrade to alpha27, it's a hell lot faster.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.