Angular project preparation can vary from project to project and from version to version, and this article is dedicated to that topic.
Creating the server part (.NET Core Web API part) is just half of the job we want to accomplish. From this point onwards, we are going to dive into the client side of the application to consume the Web API part and show the results to the user by using angular components and many other features.
If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction of the .NET Core series.
For the complete navigation and all the basic instructions of the Angular series, check out: Introduction of the Angular series.
The source code is available at GitHub .NET Core, Angular, and MySQL. Part 7 – Source Code
This post is divided into several sections:
- Installation of the Angular CLI and starting a new project
- Third-Party Libraries as Part Of Angular Project Preparation
- Angular Components
- Creating a New Component
- About App.Module
- Additional Content in the Home Component
- Conclusion
Installation of the Angular CLI and Starting a New Project
First, we are going to install the Angular CLI
(Angular Command Line Interface) which will help us a lot with the Angular project preparation and Angular project development overall. To install Angular CLI
, type the following command at the command prompt:
npm install -g @angular/cli
If you already have the
Angular CLI
installed, verify that you have the latest version. If not, please update it before starting the project. You can find all the instructions here: https://github.com/angular/angular-cli.After the installation completes, we are going to create a new project.
Open the Visual Studio Code and in a terminal window (CTRL+~
) navigate to the path you want your project in and execute the command:
ng new AccountOwnerClient
Two questions will appear. The first one is whether we want our project to have routing created, and the second one is about what kind of styling we want in our project. We are going to answer NO (N) for the first question, and (CSS – just hit enter) for the second one.
It will take some time to create the project. After the creation process is over, we are going to open the project folder inside our editor:
Third-Party Libraries as Part Of Angular Project Preparation
We are going to use the bootstrap library for the styling, so let’s install it with the command:
npm install --save bootstrap
It will install the library but we also need to import its path into theÂ
angular.json
 file. Place it right above the styles.css
:After the bootstrap library installation, we are going to install the type definitions for it. For the installation, type this command:
npm install --save @types/bootstrap
Right after that, let’s import that type definition inside the
tsconfig.app.json
file:To install the JQuery library, type this command:
npm install --save jquery
For the JQuery types, we have to execute:
npm install --save @types/jquery
This is how the scripts array should look like in the angular.json file:
"scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js" ]
And modify the imports for the types:
"types": [ "jquery", "bootstrap" ]
For the JQueryUI installation, execute:
npm install --save jqueryui
and for the types execute:
npm install --save @types/jqueryui
This is how the styles and the scripts array should look like:
"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules/jqueryui/jquery-ui.min.css", "src/styles.css" ], "scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js", "./node_modules/jqueryui/jquery-ui.min.js" ],
Imports for the types should look like this:
"types": [ "jquery", "bootstrap", "jqueryui" ]
That wraps up the installation of dependencies.
Now we have all the libraries installed and imported into the right files.
The next step is adding our components to the project.
Angular Components
Let’s take some time to talk a bit about Angular. Angular is a framework for building SPA (Single Page Application) applications. Therefore, we are going to generate all of our pages inside one page. That is why we only have the index.html
page. In the index.html
page all content is going to be generated inside <app-root></app-root> selector which comes from the app.component.ts file.
Take a look inside the app.component.ts file:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'AccountOwnerClient'; }
Every component must import
Component
from the @angular/core
package. We will import more things when we need them. Also, you might have noticed the @Component
decorator inside the code. This is the place where we create our selector (it is the same as the app-root tag in the index.html file). Also, we are binding the HTML template for this component with the templateUrl
and the CSS files with this component by using styleUrls
. StyleUrls is an array of strings, comma-separated. In the end, we are creating our class for the component.Now if we look in the app.module.ts
file, which is quite important for the Angular project preparation and for development at all, we are going to notice this code:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
In this file, we are going to import the necessary modules, components, and services. We are going to use the declarations array to import our components, and the
imports
array to import our modules. Also, we are going to use providers array for registering our services.Creating a New Component
To create a new component with the name Home, let’s execute the following command:
ng g component home --skipTests
With this command, we are creating the Home component with three files (.ts, .html, .css). And by adding the –skipTests flag, we prevent creating the test file.
We can inspect the Home component
now:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { constructor() { } ngOnInit() { } }
In here we import
OnInit
interface which defines the function ngOnInit
. This function will execute any logic inside it as soon as the component initializes. Notice the constructor as well. The constructor is intended only for the injection of the service into the component. For any action that needs to be executed upon component initialization, use the ngOnInit method.About App.Module
If we check the app.module.ts
file, we will see that our new component is imported with our previous command:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; @NgModule({ declarations: [ AppComponent, HomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }<code></code>
So, as we can see,
Angular CLI
creates all of this for us.Even though one module is enough for the entire application, we still want to create more modules.
Why?
Because it is easier to maintain the modules and also more modules give us the advantage of the lazy content loading. That means that our application will load only content related to that specific module we are pointing to, and not the entire application.
That said, let’s continue.
Additional Content in the Home Component
Let’s modify the home component file:
export class HomeComponent implements OnInit { public homeText: string; constructor() { } ngOnInit() { this.homeText = "WELCOME TO ACCOUNT-OWNER APPLICATION"; }
Then, let’s add a new class to the
home.component.css
file:.homeText{ font-size: 35px; color: red; text-align: center; position: relative; top:30px; text-shadow: 2px 2px 2px gray; }
To continue, we are going to change the
home.component.html
file:<p class="homeText">{{homeText}}</p>
Finally, let’s modify the
app.component.html
file, just to test if this works:<div class="container"> <div class="row"> <div class="col"> <app-home></app-home> </div> </div> </div>
Now in the terminal type
ng serve
and wait for the application to compile. Right after that start your browser and navigate to: localhost:4200
. You should see the welcome message on the screen from the Home component.Conclusion
Right now we have a working component and an Angular application that you can run in your browser. But it is just a beginning. We have a long way ahead of us because there are still a lot of important Angular features to introduce to the project.
By reading this post you’ve learned:
- The way to set up third-party libraries
- The overview of the angular components
- How to create components
- And some facts about modules in angular
Thank you for reading and I hope you found something useful in it.
In the next part of the series, we are going to show you how to create navigation in the project and also how to use routing.
Grate post and great blog.
In the angular app, modify the app.component.html file to include the home componente
I’m waiting for all this post in the future
Awesome series, thank you Marinko.
One thing I noticed from the steps above, you need to remove the space before “bootstrap”
npm install –save @types/ bootstrap
Hi Matt. Thank you very much for reading the series and for your comment as well. I hope this series is helpful to you. If you like it you may always subscribe to receive notifications when a new article is published.
Thank you very much for the suggestion, it was my bad (typo). Now it is fixed.
All the best.
Hi Marinko, awesome work with the server and client series.
I was having trouble with referencing the jquery library. Apparently the Angular team made some changes on how you reference scripts and styles (Angular 6).
After some Googling I made the following change:
From:
“../node_modules/jquery/dist/jquery.js”,
“../node_modules/bootstrap/dist/js/bootstrap.js”
to
“./node_modules/jquery/dist/jquery.js”,
“./node_modules/bootstrap/dist/js/bootstrap.js”
Now it is working for me.
Cheers!
Hi Caio Castro. First of all, thank you very much for reading our posts and I am really glad that you find it awesome. We are investing a lot of work in all our posts and it is always a pleasure to read a nice words from our readers.
Now about the issue: OMG 😀 😀
You are totally right. If I try to create Angular 6 project and try to reference with ../node_modules, the project doesn’t build as soon as I change to ./node_modules, it builds like a charm. But pay attention to this, if I use this old project and try to reference with ./node_modules, the build brakes in the same way 😀 😀 so in earlier projects we need to use ../node_modules. It is so weird and I must admit a little bit of frustrating.
Thank you very very much for your comment, I haven’t noticed that this could be the problem, and you helped us a lot. You helped the readers as well, if some of them stumble upon the same problem.
I am going to update the article.
One more time, thank you very much. All the best.
I’m following this tutorial, learning quite a lot too. I’ve noticed that you made this part with Angular 4, and later updated some parts for Angular 6 (as its used in creating new projects with latest angular-cli).
I found a little typo you might have not noticed. (It’s my first time using Angular, or any front-end framework rly)
“It will install the library but we also need to import its path into the angular-cli.json file.”
In Angular 6 I think its now just “angular.json”
Really interesting series!
Hello irrelevant. First of all, thank you very much for reading and for your suggestion. It is quite a joy when we have readers like yourself. You are totally right, I haven’t noticed that in Angular 6 there is no more the angular-cli.json file but now it is just angular.json. I am going to update that in this article.
Angular made a lot of “small” changes in its new version and I have to update article to make easier reading for our readers, so it is great to have someone who gives you suggestion when we miss something.
If you like these articles, feel free to subscribe to receive notification about new articles, which are published every week.
One more time, thank you very much.
Hi Marinko,
Thanks very much to your amazing constribution React tutorial. I complete this tutorial and it works like a dream.
Now I move to Angular tutorial. I have a few issue.
My set up is as follows:
Node: 10.16.0
OS: win32 x64
Angular: 8.0.3
… animations, common, compiler, compiler-cli, core, forms
… language-service, platform-browser, platform-browser-dynamic
… router
Package Version
———————————————————–
@angular-devkit/architect 0.800.6
@angular-devkit/build-angular 0.800.6
@angular-devkit/build-optimizer 0.800.6
@angular-devkit/build-webpack 0.800.6
@angular-devkit/core 8.0.6
@angular-devkit/schematics 8.0.6
@angular/cli 8.0.6
@ngtools/webpack 8.0.6
@schematics/angular 8.0.6
@schematics/update 0.800.6
rxjs 6.4.0
typescript 3.4.5
webpack 4.30.0
When I generate the new project, I have angular.json instead of angular-cli.json. Any help please?
When I compile the project, it complains ERROR in error TS2688: Cannot find type definition file for ‘boostrap’.
I go back to tsconfig.app.json file and comment out boostrap from types array. It works.
It works fine upto part13 (Form Validation) then I get the following error:
$(‘#successModal’).modal(); caused error:
src/app/owner/owner-create/owner-create.component.ts(67,28): error TS2339: Property ‘modal’ does not exist on type ‘JQuery’
I don’t think the issue due to the code but this may be related to my setup???
If you have a spare time, please guide me to fix this issue.
Regards,
Tam
Hello Tam, thank you very much for reading our series and commenting as well. Be sure that code is working, I just rerun it a two weeks ago and there were no problems at all. But let me try to answer your question:
If you look closer at this article, you will see that I wrote that from the Angular ver 6 you don’t have anymore angular.cli.json but angular.json file, so this is quite normal for your project setup.
When I read your other errors it looks to me that your project can’t see the type definitions for the bootstrap and jquery libraries for sure. Are you sure that you used tsconfig.app.json file which is in the src folder, and not the tsconfig.json file which is in the root of the project? This is quite common mistake. And of course, have you installed all the type definitions?
Best regards, and I hope you will solve those issues.
Hi Marinko,
Thanks very much for response.
The file tsconfig.app.json in my project were generated outside the src folder.
Yes I have installed all the type definitions and have checked node_modules/@types/index.d.ts too.
I just create a dummy project using VS code with command line ng new dummy, the project were created with tsconfig.app.json file outside the src folder. Do you see this issue before?
Regards,
Tam
Hi Marinko. Just wanted to say what a great tutorial you have put together. I see you were at Angular 4, 6 at the time you created this. Today we are at Angular 9. I remember seeing a recent technique to build a schema based on anticipated models then generating components to initially build out the Angular app structure. Much better I think then adjusting up from 4,6, 7, 8, 9 as is the recommendation for upgrades. I’m going to set out to derive a schema based on our account, owner .NET Core service. Create an Angular 9 app then generate components based on the derived schema. I know the Angular versions change like the weather. Just comes with the territory. Its a good exercise in understanding schema abstraction and using it to leap frog Angular generations.
Thank you Brian. Yes, Angular versions keep comming out very fast and I am going to update these articles to v9. I already did that with Angular Material series. Regarding schematics, it is a great stuff, just it would be too much to start the series with 🙂 And I must admit, I am not that familiar with the creation process, even though I know what you are talking about.
I actually thought twice of suggesting a trip down the rabbit hole on the tutorial blog here. The only reason i did add it was as a way to avoid the versioning issue. Glad you are planning on updating the tutorial in the near future You put a lot of work into this. I applaud your effort.
My bad. I realized I was talking about ‘[email protected]’ which can be used to generate a component based on a model of the data along with the API reference. Hope I didn’t confuse anyone. Disregard Schematics.