Clearly I felt like a rookie after I picked up the Angular and node.js recently. I installed latest node.js on my Linux desktop. And created the sample Angular app. This is the point where it becomes really hard. The intention with Angular is that once developer generated the sample app, much of the sample source code can be ridden and replaced with developer's own code. The real problem is that if the developer has no prior experience with node.js and Angular, it will be pretty hard to know what the next step is.
My problem is that I need bootstrap and JQuery to be added to my project. It was pretty easy when it was Angular 8 or even Angular 10. But the latest one I am working with is Angular 13. It was totally different now. I thought this is easy because it would be very common for people to add these two libraries. Turned out there is no a lot of resources. I don't know why. Turned out this is quite easy.
The first step is to add the two libraries as dependencies to the project. In the file package.json (not the package-lock.json file), just add the two dependencies:
These two are added to the section called "dependencies", like this:
...
"private": true,
"dependencies": {
"@angular/animations": "~13.2.0",
"@angular/common": "~13.2.0",
"@angular/compiler": "~13.2.0",
"@angular/core": "~13.2.0",
"@angular/forms": "~13.2.0",
"@angular/platform-browser": "~13.2.0",
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
...
They are added as part of a JSON object, in the format of key/value pair. The left side (the key) is the name of the dependency; the right side is the version. Once added, we can run the npm build command to download and add the necessary dependencies.
The next step is to add the CSS style sheet, the bootstrap JS, and JQuery JS into the application itself. That is, once added, I can use the bootstrap mark up and JQuery functionality in my source code (both on the page files and script files). This is the hard part that took some research. This is also the part where I was unable to find much info from online. It might be that I was not using the correct keywords for search.
After the long search, I finally figured out that those added library can be added to the file called "angular.json". It is located in the base folder of the application project. What?! Yeah I know. It was pretty hard to figure this out. Somehow, there is no document for this. Basically, in the section "architect" -> "build" at the very end, there is a "styles" section. It is where I can add my additional CSS files to it. And after it, I can add a new section called "scripts", and add the two new JS files there. Here is what it looks like:
...
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/testapp2",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
]
},
"configurations": {
"production": {
...
Another hard part of this is how to test the changes once they are added. The easy part is to test bootstrap. All I have to do is create a page with some grids and see if the grids are displaying correctly. All I had to do is remove the default "app.component.html", then replace it with my own. Here is my sample code:
<h1>{{title}}</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
test 1
</div>
<div class="col-md-4">
test 2
</div>
<div class="col-md-4">
test 3
<button class="btn btn-default" id="testBtn">Click Me</button>
</div>
</div>
</div>
<router-outlet></router-outlet>
And it would work.
Next, I have to make sure that JQuery is also successfully added to the project. The way to test is simple, just get a reference to a button, then use JQuery to attach a click handler function to it. When I start the application up, the handler should show a alert message box. That is all it is needed.
All these are done in the file "app.component.ts". For this file. I had to do a couple changes. I need to implement the interface OnInit. Then add a new method called ngOnInit(). This is the method will be called when the Angular component is first being created. It does the initialization. All I needed to do is call JQuery to attache an event handler method. Then I can test. One more thing I have to do is declare JQuery to be available. This is the app.component.ts after modification:
import { Component, OnInit } from '@angular/core';
declare var $: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
title = 'testapp2';
ngOnInit() {
$("#testBtn").click(() => {
alert("It happened.");
});
}
}
Summary The hardest part of this tutorial is how to add the additional scripts to the project. I must put a disclaimer here. The action I have taken here is bad practice. In an Angular application, one should never use JQuery to attach event handler to a specific element. There are correct way of doing this. I do this is simply trying to verify that the necessary files are added properly to the application project. I think I have explained it well. And it will help quite a few people on their way of studying Angular application development. I hope you will like it.
There is no comments to this post/article.
