Introduction
Angular 2 is the most popular framework for building web applications. It is a complete rewrite of the first version of AngularJS. Angular 2 is an entirely new framework, but it still maintains compatibility with the previous version. It is written in TypeScript, a typed superset of JavaScript that compiles to plain JavaScript.
SystemJS is a module loader that can load modules written in any format. In this article, we will learn how to create an Angular 2 application using SystemJS. We will start by setting up the environment, and then we will create an Angular 2 application with SystemJS.
Setting Up the Environment
Before we start creating an Angular 2 application with SystemJS, we need to set up the environment. We can use the Node Package Manager (npm) to install all the necessary dependencies.
1. Install Node.js from the official website.
2. Install TypeScript globally. We can do this by running the following command on the terminal:
“`
npm install -g typescript
“`
3. Create a new directory for our project.
4. Move into the created directory.
5. Initialize a new Node.js project. We can do this by running the following command on the terminal:
“`
npm init
“`
6. Install all the required dependencies by running the following command on the terminal:
“`
npm install @angular/platform-browser-dynamic @angular/common @angular/compiler @angular/core @angular/forms @angular/http @angular/platform-browser @angular/router systemjs core-js zone.js reflect-metadata –save
“`
7. Create a new file named “system.config.js” in the root directory of our project. This file will configure SystemJS.
Creating an Angular 2 Application with SystemJS
Now that we have set up the environment, we can create an Angular 2 application with SystemJS.
1. Create a new file named “app.component.ts” in the root directory of our project. This file will contain the code for our Angular 2 component.
“`
import { Component } from ‘@angular/core’;
@Component({
selector: ‘my-app’,
template: ‘
Hello, World!
‘,
})
export class AppComponent {}
“`
2. Create a new file named “main.ts” in the root directory of our project. This file will contain the bootstrap code for our Angular 2 application.
“`
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app.module’;
platformBrowserDynamic().bootstrapModule(AppModule);
“`
3. Create a new file named “app.module.ts” in the root directory of our project. This file will contain the code for our Angular 2 module.
“`
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
“`
4. Update the “index.html” file in the root directory of our project. We will add the SystemJS configuration to this file.
Change this code:
“`
“`
To this code:
“`
“`
5. Update the “system.config.js” file in the root directory of our project. We will add the configuration for our Angular 2 application.
“`
(function(global) {
System.config({
paths: {
// paths serve as alias
‘npm:’: ‘node_modules/’
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: ‘app’,
// angular bundles
‘@angular/core’: ‘npm:@angular/core/bundles/core.umd.js’,
‘@angular/common’: ‘npm:@angular/common/bundles/common.umd.js’,
‘@angular/compiler’: ‘npm:@angular/compiler/bundles/compiler.umd.js’,
‘@angular/platform-browser’: ‘npm:@angular/platform-browser/bundles/platform-browser.umd.js’,
‘@angular/platform-browser-dynamic’: ‘npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js’,
‘@angular/http’: ‘npm:@angular/http/bundles/http.umd.js’,
‘@angular/router’: ‘npm:@angular/router/bundles/router.umd.js’,
‘@angular/forms’: ‘npm:@angular/forms/bundles/forms.umd.js’,
// other libraries
‘rxjs’: ‘npm:rxjs’,
‘typescript’: ‘npm:typescript/lib/typescript.js’
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: ‘./main.js’,
defaultExtension: ‘js’
},
rxjs: {
defaultExtension: ‘js’
}
}
});
})(this);
“`
FAQs
Q: What is Angular 2?
A: Angular 2 is a popular framework for building web applications.
Q: What is SystemJS?
A: SystemJS is a module loader that can load modules written in any format.
Q: What are the dependencies required for creating an Angular 2 application with SystemJS?
A: The dependencies required for creating an Angular 2 application with SystemJS are @angular/platform-browser-dynamic, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/http, @angular/platform-browser, @angular/router, systemjs, core-js, zone.js and reflect-metadata.
Q: How do I set up the environment for creating an Angular 2 application with SystemJS?
A: You can set up the environment by installing Node.js and TypeScript and then installing the required dependencies using npm.
Q: What is the code required to create an Angular 2 component?
A: The code required to create an Angular 2 component is:
“`
import { Component } from ‘@angular/core’;
@Component({
selector: ‘my-app’,
template: ‘
Hello, World!
‘,
})
export class AppComponent {}
“`
Q: What is the code required to bootstrap an Angular 2 application?
A: The code required to bootstrap an Angular 2 application is:
“`
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app.module’;
platformBrowserDynamic().bootstrapModule(AppModule);
“`
Q: What is the code required to create an Angular 2 module?
A: The code required to create an Angular 2 module is:
“`
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
“`
Q: What is the code required to configure SystemJS?
A: The code required to configure SystemJS is:
“`
(function(global) {
System.config({
paths: {
// paths serve as alias
‘npm:’: ‘node_modules/’
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: ‘app’,
// angular bundles
‘@angular/core’: ‘npm:@angular/core/bundles/core.umd.js’,
‘@angular/common’: ‘npm:@angular/common/bundles/common.umd.js’,
‘@angular/compiler’: ‘npm:@angular/compiler/bundles/compiler.umd.js’,
‘@angular/platform-browser’: ‘npm:@angular/platform-browser/bundles/platform-browser.umd.js’,
‘@angular/platform-browser-dynamic’: ‘npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js’,
‘@angular/http’: ‘npm:@angular/http/bundles/http.umd.js’,
‘@angular/router’: ‘npm:@angular/router/bundles/router.umd.js’,
‘@angular/forms’: ‘npm:@angular/forms/bundles/forms.umd.js’,
// other libraries
‘rxjs’: ‘npm:rxjs’,
‘typescript’: ‘npm:typescript/lib/typescript.js’
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: ‘./main.js’,
defaultExtension: ‘js’
},
rxjs: {
defaultExtension: ‘js’
}
}
});
})(this);
“`
Conclusion
In this article, we learned how to create an Angular 2 application with SystemJS. We set up the environment, created an Angular 2 component, an Angular 2 module, and bootstrapped the Angular 2 application. We also configured SystemJS to load the required modules. With this knowledge, you can create complex Angular 2 applications with ease.