Menu
I had a working ng cli project which had been created with the beta.21 version of the cli. I wanted to update it to use the latest structure of the cli projects, so created a new project with the cli (v.1.0.0). I then essentially dropped the contents of my existing projects app file into the new project and went from there.
Strangely though, my new project builds without issue and produces the sizes and chunks I was expecting. If I run my express based backend which serves up the contents of the ./dist directory, then my app works as expected. However, if I run ng serve I get the error Cannot GET / in the browser.
I really am not sure what could have caused this (my biggest suspicion is that my project has the file structure with client/src/app rather than the standard src/app however, I have changed all the references to the file path I could find and as the build is working, I assume that is fine)?
Any ideas / suggestions on how to debug further?
client/src/index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DemoProj</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>Loading...</app-root>
</body>
</html>
.angular-cli.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "coty-monitoring-system"
},
"apps": [
{
"root": "client/src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [
"../../node_modules/chart.js/dist/Chart.bundle.js",
"../../node_modules/hammerjs/hammer.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "client/src/tsconfig.app.json"
},
{
"project": "client/src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
browser network tab of failed request:
Here is the page source of what the cli returns:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /</pre>
</body>
</html>
776
To solve the error "ng: command not found", install the angular cli package globally by running npm install -g @angular/cli@latest and restart your terminal. If the command fails, run it with sudo and make sure the correct PATH is set in your system's environment variable.
This error often occurs when a project you are running is not an Angular project. It may also be the case when you download an Angular project but do not have latest dependencies installed on your machine. Installing latest dependencies should fix the problem.
Seems fine.
Probably you didn't run
ng serve in the project's folder.
When using CLI you have to run ng serve where app.module.ts lies
**usually :
$ projectFolder\src\app
180
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
