I'm following the steps of this tutorial to implement Angular 2 with bootstrap 4 in the.
I had never before used bootstrap 4 with angle 2 and I used pure CSS3 from the css file.
when I try to execute with the ng serve command but when I run the terminal it gives me the following error:
Local workspace file ('angular.json') could not be found.
Error: Local workspace file ('angular.json') could not be found.
at WorkspaceLoader._getProjectWorkspaceFilePath (/usr/lib/node_modules/@angular/cli/models/workspace-loader.js:37:19)
at WorkspaceLoader.loadWorkspace (/usr/lib/node_modules/@angular/cli/models/workspace-loader.js:24:21)
at ServeCommand._loadWorkspaceAndArchitect (/usr/lib/node_modules/@angular/cli/models/architect-command.js:180:32)
at ServeCommand. (/usr/lib/node_modules/@angular/cli/models/architect-command.js:47:25)
at Generator.next ()
at /usr/lib/node_modules/@angular/cli/models/architect-command.js:7:71
at new Promise ()
at __awaiter (/usr/lib/node_modules/@angular/cli/models/architect-command.js:3:12)
at ServeCommand.initialize (/usr/lib/node_modules/@angular/cli/models/architect-command.js:46:16)
at Object. (/usr/lib/node_modules/@angular/cli/models/command-runner.js:87:23)
At first glance I see that you can not find the file angular.json my question is:
Where should I create that file in the root folder of the project?
The tutorial tells me that I should add this in that file:
{
// ...other config
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
}
NOTE: The only file with JSON extension is this: package.json
Here is all my project files:
Angular2/angular-bootstrap# ls e2e karma.conf.js package.json protractor.conf.js README.md src tsconfig.json tslint.json root@me:/home/memee/Desktop/test/Angular2/angular-bootstrap#
I tried to add bootstrap from the index.html in the folder src of the application but it did not work.
GNU nano 2.5.3 File: index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularBootstrap</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" i$
</head>
<body>
<app-root>Loading...</app-root>
<div class="container">
<div class="jumbotron">
<h1>{{title}}</h1>
</div>
<div>
We are using nothing more than Bootstrap CSS.
This works for styles. If we want to use JavaScript powered components, we'll have to do some manual$
<button class="btn btn-primary">Click me!</button>
</div>
</div>
Any ideas? in the steps to add bootstrap 4?