Recently, I attempted to create a client for a web application using Angular.
I initiated the process with ng new client, and when I ran it at that point, it displayed the default webpage.
Afterwards, I made modifications to the app.component.{html, css, ts} files and introduced a service by executing ng generate service quote along with a TypeScript class (Quote.ts).
Interestingly, these files function perfectly fine when integrated into another Angular project. However, in isolation, they encounter some issues:
Upon running ng serve, the following messages appear:
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2019-01-02T20:34:57.478Z
Hash: 23d31db4a8a333ef9adb
Time: 7407ms
chunk {main} main.js, main.js.map (main) 14.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.2 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.31 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.
However, upon opening any web browsers (tried multiple options) and visiting localhost:4200, only a blank page shows up.
The HTML source of this display page is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
</title>>Client</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
The console in the browser displays the following errors:
AppComponent_Host.ngfactory.js?
[sm]:1 ERROR Error: StaticInjectorError(AppModule)[AppComponent -> Location]:
StaticInjectorError(Platform: core)[AppComponent -> Location]:
NullInjectorError: No provider for Location!
...
And it goes on detailing further errors.
Here's a glimpse of my code setup:
app.component.css
.center {
border: 3px solid black;
position: absolute;
top: 50%;
left: 50%;
padding: 15px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
...
app.component.html
<div class=center>
<div class="quote">
<pre>{{ quotes[index].body }}</pre>
</div>
...
</div>
app.component.ts
... ...quote.service.ts
...Quotes.ts
...All other files remain untouched.
This is the file tree structure within the src subfolder:
src
├── app
│ ├── app.component.css
│ ├── app.component.html
│ ...
├── assets
...
You can view the entire code on StackBlitz.
I would greatly appreciate any assistance or guidance you can provide!