In this post, you will learn about how to create Angular 5 application without installing or using Angular CLI. If you are at beginner level than I highly recommend you to start without CLI because CLI help you to create an angular app easily but it makes you illiterate about how things are running in the app.
So, let's begin,
- Do you know, what are the third-party libraries or frameworks required to build an Angular App?
There are many third-party javascript libraries or framework used by the Angular like 'core-js', rxjs (Reactive extension library for javascript), zone.js, systemJs, and typeScript. There are the reasons or benefits for using each library or framework by Angular and by using those features you are creating your angular App.
- What are the basic Angular modules required to build an Angular app?
There are basic modules like 'angular core', 'angular compiler', 'angular common', 'angular platform browser' and 'angular platform browser dynamic' each of these doing its job as requiring like *ngIf directive is a part of @angular/common module.
Below are the 10 basic packages required to build an angular app, 5 packages of them are the third party and remaining 5 are angular packages.
Below are the 10 basic packages required to build an angular app, 5 packages of them are the third party and remaining 5 are angular packages.
- core js
- zone js
- system js
- rxjs
- typeScript
- angular core
- angular common
- angular compiler
- angular platform browser
- angular platform browser dynamic
To install all these you need NodeJs command interface, if you don't have NodeJs then you can download it from https://nodejs.org/en/download/ and install it.
After installing check again that you have node and npm installed
node -v
npm -v
Now let's begin to create your first Angular application.
First Step: Create a new folder.
Open node command prompt and move to that folder
For development in the node environment, you need node configuration file known as package.json. To create it just type node init -y , it will create a package.json file.
Second Step: Let's install all the above packages by using below command
npm i --save core-js zone.js rxjs systemjs @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic
yes, I omitted typeScript in above why I will tell you after some time or I want to explain some additional things with those. After running above command if you see, a new folder node_modules will be added and also those packages entry auto added in package.json that's the reason we added package.json before installing those packages otherwise we have to add those entries manually.
Third Step: Next is systemJs which is also mapped with config file know as systemjs.config.js, so let create it and add the below content to it.
Fourth Step: For code we are using typeScript, just run the below command to install typeScript
npm i --save-dev typescript
it will add typescript library in the node_modules folder and also update the package.json file, we don't need to update systemjs.config.js file because systemJs is for download clientside js and there is no role of typeScript because it's just for development and transform to js.
So, now we have typeScript also for which to work properly we add a config file 'tsconfig.json' with the following configuration
to understand what all these options in config file you can refer this typeScript config options.
We need to inform node/npm that for build please use typeScript compiler, so for that, we just have to update scripts sections of the package.json
"scripts": {
"build": "tsc"
},
I think now we are done with all required installation and config part and can move to coding part.
Fifth Step: Create typeScript file src/app/app.component.ts (remember the folder structure)
Sixth Step: In angular, each component class should be a part of module class, so we need a module class and register the above component in that module 'src/app/app.module.ts'
Seventh Step: Now create index.html in root directory, which is the entry point for our application
Eigth Step: If you see we are calling dist/main.js file which we yet not created and this js file says which module class to load, so let's create it 'src/main.ts'
that's it now build the app by following command
npm run build
Ninth Step: where we see the output or web page?
for that, we need a web server
run the below command
npm i --save-dev live-server
and update the scripts section of package.json
"scripts": {
"build": "tsc",
"start": "live-server"
},
Tenth or Final Step: now run the below command see the output in browser
npm run build npm start
First Step: Create a new folder.
Open node command prompt and move to that folder
For development in the node environment, you need node configuration file known as package.json. To create it just type node init -y , it will create a package.json file.
Second Step: Let's install all the above packages by using below command
npm i --save core-js zone.js rxjs systemjs @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic
yes, I omitted typeScript in above why I will tell you after some time or I want to explain some additional things with those. After running above command if you see, a new folder node_modules will be added and also those packages entry auto added in package.json that's the reason we added package.json before installing those packages otherwise we have to add those entries manually.
Third Step: Next is systemJs which is also mapped with config file know as systemjs.config.js, so let create it and add the below content to it.
System.config({
map: {
app: 'dist/app', 'zone.js': '/node_modules/zone.js',
'rxjs': '/node_modules/rxjs',
'@angular/core': '/node_modules/@angular/core/bundles/core.umd.js',
'@angular/common': '/node_modules/@angular/common/bundles/common.umd.js',
'@angular/compiler': '/node_modules/@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': '/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': '/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
},
packages: {
'dist/app': {},
'rxjs': {},
'zone.js': {}
}
});Fourth Step: For code we are using typeScript, just run the below command to install typeScript
npm i --save-dev typescript
it will add typescript library in the node_modules folder and also update the package.json file, we don't need to update systemjs.config.js file because systemJs is for download clientside js and there is no role of typeScript because it's just for development and transform to js.
So, now we have typeScript also for which to work properly we add a config file 'tsconfig.json' with the following configuration
{
"compilerOptions": {
"outDir": "dist",
"module": "commonjs",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"lib": [
"dom",
"es2015"
]
}
}to understand what all these options in config file you can refer this typeScript config options.
We need to inform node/npm that for build please use typeScript compiler, so for that, we just have to update scripts sections of the package.json
"scripts": {
"build": "tsc"
},
I think now we are done with all required installation and config part and can move to coding part.
Fifth Step: Create typeScript file src/app/app.component.ts (remember the folder structure)
import { Component } from '@angular/core';
@Component({
selector: 'app-ui',
template: '<h1>Hello, {{name}} World</h1>'
})
export class AppComponent {
name = 'Angular';
}Sixth Step: In angular, each component class should be a part of module class, so we need a module class and register the above component in that module 'src/app/app.module.ts'
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 {
}Seventh Step: Now create index.html in root directory, which is the entry point for our application
<html>
<head>
<title>Hello Angular World</title>
</head>
<body>
<app-ui>Loading...</app-ui>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('dist/main.js').catch(function (err) {
console.error(err);
});
</script>
</body>
</html>Eigth Step: If you see we are calling dist/main.js file which we yet not created and this js file says which module class to load, so let's create it 'src/main.ts'
import 'zone.js/dist/zone';
import { platformBrowserDynamic }
from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);that's it now build the app by following command
npm run build
Ninth Step: where we see the output or web page?
for that, we need a web server
run the below command
npm i --save-dev live-server
and update the scripts section of package.json
"scripts": {
"build": "tsc",
"start": "live-server"
},
Tenth or Final Step: now run the below command see the output in browser
npm run build npm start
Hello, Angular World
Well done, you created your first Angular app from scratch without using angular cli.