Professional Documents
Culture Documents
Home Angular
ANGULAR
In this tutorial, I will teach you Angular 6 CRUD Example. I will use Angular, MongoDB,
Node.js, and Express.js for this project, so this project is also called MEAN Stack web
application. We make a simple Angular CRUD web tutorial, which can create, read,
update and delete ad units. We build frontend in Angular and create a backend rest api
using Node.js, Express, and MongoDB. If you are new to Angular 6 then check out this
tutorial: Angular 6 Tutorial With Example using Angular CLI.
ABRIR
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 1/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
If you want to learn advance about Angular and Node.js then check out below course.
This course has a brief introduction about Angular and Node.js and how they can
work together. It is a complete practical example of Angular and Node.js. I also found
it very useful.
The Complete Angular, React & Node Guide Airbnb Style App
1 Angular 6 Release
2 Tools For This Tutorial
3 Angular 6 CRUD Example | MEAN Stack Tutorial
4 Step1: Create Angular 6 Project.
5 Step 2: Install Bootstrap 4.
6 Step 3: Create components.
7 Step 4: Con gure the routing.
8 Step 5: Add Navigation.
9 Step 6: Add Angular Routing Progress Indicator.
10 Step 7: Create a form.
11 Step 8: Con gure HttpClientModule.
12 Step 9: Create ad unit service to send http requests.
13 Step 10: Create Node.js, Express, and MongoDB.
14 Step 11: Create Express routes for our application.
15 Step 12: Add ReactiveFormsModule at the Angular.
16 Step 13: Display the data on the frontend.
17 Step 14: Edit Form and Update the Data.
18 Steps To Follow Github Code
Angular 6 Release
There are some changes in the latest Angular version, and its core depends on the
following.
1. TypeScript 2.7
2. RxJS 6.0.0
We will install Angular 6 using Angular CLI and both the CLI and generated project have
dependencies that require Node 8.9 or higher, together with NPM 5.5.1 or higher.
The following tools, frameworks, libraries are required for this tutorial:
To update NPM, you can run the following command in the terminal.
# for mac
You can uninstall the previous version of Angular CLI using the following command.
# Mac users put sudo at the start of the command which has -g flag.
# Windows users, open the CMD in admin mode and type the following command
cd ng6crud
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 3/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
ng serve --open
@import "~bootstrap/dist/css/bootstrap.min.css"
ng g c components/create --spec=false
ng g c components/index --spec=false
ng g c components/edit --spec=false
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 4/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 5/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// app.module.ts
VISIT SITE
// app.module.ts
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
<div>
<router-outlet></router-outlet>
</div>
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 6/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
<div class="container">
<router-outlet></router-outlet>
</div>
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 7/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
Our goal of this tutorial is that, when we navigate to di erent routing components, we see
the loading indicator. So for that, we need to install an ng2-slim-loading-bar library. So
install using the following cmd.
// app.module.ts
imports: [
BrowserModule,
RouterModule.forRoot(routes),
SlimLoadingBarModule
],
Next step is, include the styling that comes with the library inside src >> styles.css le.
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "../node_modules/ng2-slim-loading-bar/style.css";
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 8/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(private _loadingBar: SlimLoadingBarService, private _router: Router) {
this._router.events.subscribe((event: Event) => {
this.navigationInterceptor(event);
});
}
private navigationInterceptor(event: Event): void {
if (event instanceof NavigationStart) {
this._loadingBar.start();
}
if (event instanceof NavigationEnd) {
this._loadingBar.complete();
}
if (event instanceof NavigationCancel) {
this._loadingBar.stop();
}
if (event instanceof NavigationError) {
this._loadingBar.stop();
}
}
}
Okay, now write the following code in the app.component.html le. We need to add
<ng2-slim-loading-bar> directive.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 9/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
<ng2-slim-loading-bar color="blue"></ng2-slim-loading-bar>
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="create" class="nav-link" routerLinkActive="active">
Create Ad Units
</a>
</li>
<li class="nav-item">
<a routerLink="index" class="nav-link" routerLinkActive="active">
All Ad Units
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
Save the le, and you can see the routing indicator above navigation bar.
<div class="card">
<div class="card-body">
<form>
<div class="form-group">
<label class="col-md-4">Unit Name</label>
<input type="text" class="form-control" name="unit_name"/>
</div>
<div class="form-group">
<label class="col-md-4">Unit Price</label>
<input type="text" class="form-control" name="unit_price"/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Create Unit</button>
</div>
</form>
</div>
</div>
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 10/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// app.module.ts
imports: [
BrowserModule,
RouterModule.forRoot(routes),
SlimLoadingBarModule,
HttpClientModule
],
// adunit.service.ts
@Injectable({
providedIn: 'root'
})
export class AdunitService {
constructor() { }
}
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 11/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// app.module.ts
providers: [ AdunitService ],
Now, we need to install the express.js web framework and other dependencies via node
package manager(NPM), so let us do that.
I do not restart node server each time; I change the le. So I am installing the nodemon
server. What it does is that, when I modify the server.js le, it restarts the node.js server
automatically.
Switch to newly created server.js le and enter the following code into it.
// server.js
If you have not installed the MongoDB database then install it and then start the
mongodb server.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 12/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
mongod
Create one con g folder inside project root. In that create one le called DB.js.
// DB.js
module.exports = {
DB: 'mongodb://localhost:27017/ng6crud'
};
Import this DB.js le inside our server.js le and use mongoose library to set up
the database connection with MongoDB. We can also use Mongoose to save the data in
the database using Mongoose ORM.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 13/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// server.js
mongoose.Promise = global.Promise;
mongoose.connect(config.DB).then(
() => {console.log('Database is connected') },
err => { console.log('Can not connect to the database'+ err)}
);
Save a le and go to a terminal and start the node.js server using the following command.
You can also write this command inside the package.json le.
nodemon server
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 14/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// AdUnit.js
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 15/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// adunit.route.js
adUnit.save().then(adUnit => {
res.json('Update complete');
})
.catch(err => {
res.status(400).send("unable to update the database");
});
}
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 16/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
});
});
module.exports = adUnitRoutes;
I have written all the logic that can create, read, update, and delete the data from
the mongodb database.
// server.js
app.use('/adunits', adUnitRoutes);
mongoose.Promise = global.Promise;
mongoose.connect(config.DB).then(
() => {console.log('Database is connected') },
err => { console.log('Can not connect to the database'+ err)}
);
const adUnitRoutes = require('./routes/adunit.route');
app.use(bodyParser.json());
app.use(cors());
const port = process.env.PORT || 4000;
app.use('/adunits', adUnitRoutes);
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 17/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// app.module.ts
imports: [
BrowserModule,
RouterModule.forRoot(routes),
SlimLoadingBarModule,
HttpClientModule,
ReactiveFormsModule
],
Then, we are validating the forms. So rst write the form HTML in
the create.component.html.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 18/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
<div class="card">
<div class="card-body">
<form [formGroup]="angForm" novalidate>
<div class="form-group">
<label class="col-md-4">Unit Name</label>
<input type="text" class="form-control" name="unit_name" formControlName="unit_na
me" #unit_name/>
</div>
<div *ngIf="angForm.controls['unit_name'].invalid && (angForm.controls['unit_nam
e'].dirty || angForm.controls['unit_name'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['unit_name'].errors.required">
Unit Name is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">Unit Price</label>
<input type="text" class="form-control" name="unit_price" formControlName="unit_p
rice" #unit_price/>
</div>
<div *ngIf="angForm.controls['unit_price'].invalid && (angForm.controls['unit_pric
e'].dirty || angForm.controls['unit_price'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['unit_price'].errors.required">
Unit Price is required.
</div>
</div>
<div class="form-group">
<button (click)="addAdUnit(unit_name.value, unit_price.value)" [disabled]="angFor
m.pristine || angForm.invalid" class="btn btn-primary">Create Unit</button>
</div>
</form>
</div>
</div>
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 19/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// create.component.ts
@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
angForm: FormGroup;
createForm() {
this.angForm = this.fb.group({
unit_name: ['', Validators.required ],
unit_price: ['', Validators.required ]
});
}
addAdUnit(unit_name, unit_price) {
this.adunitservice.addAdUnit(unit_name, unit_price);
}
ngOnInit() {
}
Here, till now, we have used the addAdUnit() function, but not created inside
an adunit.service.ts le.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 20/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// adunit.service.ts
@Injectable({
providedIn: 'root'
})
export class AdunitService {
uri = 'http://localhost:4000/adunits';
addAdUnit(unit_name, unit_price) {
const obj = {
unit_name: unit_name,
unit_price: unit_price
};
this.http.post(`${this.uri}/add`, obj)
.subscribe(res => console.log('Done'));
}
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 21/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
You can see in the console that, we have successfully saved the values in the MongoDB
database.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 22/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
<tbody>
<tr *ngFor="let adunit of adunits">
<td>{{ adunit.unit_name }}</td>
<td>{{ adunit.unit_price }}</td>
<td><a [routerLink]="['/edit', adunit._id]" class="btn btn-primary">Edit</a></t
d>
<td><a [routerLink]="" class="btn btn-danger">Delete</a></td>
</tr>
</tbody>
</table>
// AdUnit.ts
Now, inside adunit.service.ts le, we need to write the function that fetches the units
data from the MongoDB database and display at the Angular application.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 23/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// adunit.service.ts
@Injectable({
providedIn: 'root'
})
export class AdunitService {
uri = 'http://localhost:4000/adunits';
addAdUnit(unit_name, unit_price) {
const obj = {
unit_name: unit_name,
unit_price: unit_price
};
this.http.post(`${this.uri}/add`, obj)
.subscribe(res => console.log('Done'));
}
getAdUnits() {
return this
.http
.get(`${this.uri}`);
}
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 24/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// index.component.ts
@Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
adunits: AdUnit[];
ngOnInit() {
this.adunitservice
.getAdUnits()
.subscribe((data: AdUnit[]) => {
this.adunits = data;
});
}
}
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 25/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
<div class="card">
<div class="card-body">
<form [formGroup]="angForm" novalidate>
<div class="form-group">
<label class="col-md-4">Unit Name</label>
<input type="text" class="form-control" name="unit_name" formControlName="unit_na
me" #unit_name [(ngModel)] = "adunit.unit_name"/>
</div>
<div *ngIf="angForm.controls['unit_name'].invalid && (angForm.controls['unit_nam
e'].dirty || angForm.controls['unit_name'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['unit_name'].errors.required">
Unit Name is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">Unit Price</label>
<input type="text" class="form-control" name="unit_price" formControlName="unit_p
rice" #unit_price [(ngModel)] = "adunit.unit_price"/>
</div>
<div *ngIf="angForm.controls['unit_price'].invalid && (angForm.controls['unit_pric
e'].dirty || angForm.controls['unit_price'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['unit_price'].errors.required">
Unit Price is required.
</div>
</div>
<div class="form-group">
<button (click)="updateAdUnit(unit_name.value, unit_price.value)" [disabled]="ang
Form.invalid" class="btn btn-primary">Update Unit</button>
</div>
</form>
</div>
</div>
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 26/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// edit.component.ts
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
ngOnInit() {
this.route.params.subscribe(params => {
this.adunitservice.editAdUnit(params['id']).subscribe(res => {
this.adunit = res;
});
});
}
}
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 27/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// adunit.service.ts
@Injectable({
providedIn: 'root'
})
export class AdunitService {
uri = 'http://localhost:4000/adunits';
addAdUnit(unit_name, unit_price) {
const obj = {
unit_name: unit_name,
unit_price: unit_price
};
this.http.post(`${this.uri}/add`, obj)
.subscribe(res => console.log('Done'));
}
getAdUnits() {
return this
.http
.get(`${this.uri}`);
}
editAdUnit(id) {
return this
.http
.get(`${this.uri}/edit/${id}`);
}
}
Now, you can see the edit data from the MongoDB database.
Inside the adunit.service.ts le, we need to write the function that updates the data.
// adunit.service.ts
const obj = {
unit_name: unit_name,
unit_price: unit_price
};
this
.http
.post(`${this.uri}/update/${id}`, obj)
.subscribe(res => console.log('Done'));
}
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 28/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// edit.component.ts
updateAdUnit(unit_name, unit_price) {
this.route.params.subscribe(params => {
this.adunitservice.updateAdUnit(unit_name, unit_price, params['id']);
this.router.navigate(['index']);
});
}
So, if you nd no error on the console, then you can successfully update the data.
I have already written edit and update service to make an API call. So till now, Create,
Read, Update is complete of this Angular 6 CRUD Example Tutorial. Now, take a look
at Delete.
// index.component.ts
deleteAdUnit(id) {
this.adunitservice.deleteAdUnit(id).subscribe(res => {
console.log('Deleted');
});
}
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 29/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
// adunit.service.ts
deleteAdUnit(id) {
return this
.http
.get(`${this.uri}/delete/${id}`);
}
If you have any doubt in this Angular 6 CRUD Example, then ask in a comment below.
GITHUB CODE
Comments
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 30/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
54 COMMENTS
Great tutorial !
But how to refresh the page after removing or editing an adunit ?
Many thanks
Good job, but got a console error when tried to use “Edit” template:
It looks like you’re using ngModel on the same form eld as formControlName.
Support for using the ngModel input property and ngModelChange event with
reactive form directives has been deprecated in Angular v6 and will be removed
in Angular v7.
I got the above error while sending the data from form to db, could u help me out where exactly i
should see
I have checked my code again, it is working ne, please check the Github repo, if you
have any doubt.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 31/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
I have checked my code again, it is working ne, please check the Github repo, if you
have any doubt. If all the servers are working ne then it should be working great!!
Hi Krunal, thanks for the concise but full-featured tutorial. Unfortunately I have the same
problem as Venkat and Shruthi. I’ve checked the repo and I can’t see di erences between my
code and the repo code with di .
It it failing when trying to use the AdunitService addAdUnit() function. Here is the error:
Thanks.
I also get this error. Well documented but none of the xes below work for me. You
might want to try some of them.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 32/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
https://stackover ow.com/questions/47180634/i-get-http-failure-response-for-
unknown-url-0-unknown-error-instead-of-actu
Fix 1:
Install the plugin for chrome,
https://chrome.google.com/webstore/detail/allow-control-allow-
origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
Fix 2:
change
app.use(cors());
to
app.use(cors({
‘allowedHeaders’: [‘sessionId’, ‘Content-Type’],
‘exposedHeaders’: [‘sessionId’],
‘origin’: ‘*’,
‘methods’: ‘GET,HEAD,PUT,PATCH,POST,DELETE’,
‘pre ightContinue’: false
}));
Exactly what Rad Says… Excuse the pun. but it’s the adblocker that stops
data from sending to the db.
||| Http failure response for http (url) 404 not found
I also had this error, which was not a problem with the code. Instead, my browser was
stopping the HTTP request because of browser settings, speci cally you should check
for Ad Blocker settings in Chrome as well as any plugins (mine was Avira Browser
Safety plugin.)
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 33/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
After some testing with di erent browsers, it seems that the error Venkat, Shruthi and I are
getting only happens in Firefox. Opera and Chrome work perfectly. Does anyone have any idea
why it’s only not working in Firefox?
I have not check that yet Tom, but will check and update it.
https://stackover ow.com/questions/48557390/angular-4-http-failure-response-for-unknown-url-
0-unknown-error
Can you please share some resource to deploy this app with current structure etc.
Hey krunal how can i execute two commands at a time?nodemon server and ng server -open.
Cmd only alllows one at a time.What should i do?
You need to type both the commands on di erent command line tabs. Not the same
one. It will start two di erent servers, running on di erent ports.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 34/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
hi, i can not start the nodeman server with command “nodeman server”. the
shell output was “Command not nde”. I must install the nodeman server
globaly with following command that we can start it. sudo npm install -g
nodemon –save
Hey what am i missing in this package.json le. it starts either server.js or ng serve, based on the
order of command
“version”: “0.0.0”,
“scripts”: {
“ng”: “ng”,
“start”: “nodemon server.js && ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
hi sir,
i have this error ./src/app/app.module.ts
Module parse failed: Unexpected token (53:0)
You may need an appropriate loader to handle this le type.
| RouterModule.forRoot(routes)
| ],
|;
|
how this x it
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 35/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
Nice article.
Thank you for Your Tuto , but i don t nd the path of server.js ? could please help me
The local installation of nodemon can be run by calling: npx nodemon server
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 36/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
Super tuto! Grand merci à Vous! Est-ce que tu peux me guider pour l’utilisation de mysql au lieu
de MongoDB? merci d’avance! J’adore votre tuto!
hello,
Thanks!
thank you for this tutorial, perfect .. it works all well plz add search lter for unit in the unit list
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 37/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
“It looks like you are trying to access MongoDB over HTTP on the native driver port.”
I had the error many people seem to be getting when trying to connect to the database. My
problem was with the AdUnit.js le inside the models directory. I was able to nd it by checking
the terminal tab running nodemon. Look for “[nodemon] app crashed – waiting for le changes
before starting…”. Hope this helps someone.
I had the error many people seem to be getting when trying to connect to the database. My
problem was with the AdUnit.js le inside the models directory. I was able to nd it by checking
the terminal tab running nodemon. Look for “[nodemon] app crashed – waiting for le changes
before starting…”. Hope this helps someone.
can you please help on how to display data from database to angular using oracle?
Hi Krunal,
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 38/39
21/4/2019 Angular 6 CRUD Example | MEAN Stack Tutorial
Hai, I am Run the program successfully, But It connected successfully in the database, But No
Data send to the mongodb Collection… How i can solve this Problem…
ERROR
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: “Unknown Error”, url:
“http://localhost:4000/adunits/add”, ok: false, …}
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: “error”, …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: “Http failure response for http://localhost:4000/adunits/add: 0 Unknown Error”
name: “HttpErrorResponse”
ok: false
status: 0
statusText: “Unknown Error”
url: “http://localhost:4000/adunits/add”
__proto__: HttpResponseBase
Hi , i sent a post one hour ago. I solved that problem. server.js was not in the root directory and i
didn’t run the nodeman server command. Also this article is great
This site uses Akismet to reduce spam. Learn how your comment data is processed.
https://appdividend.com/2018/05/27/angular-6-crud-example-mean-stack-tutorial/ 39/39