Angular: Cannot Get /

I am trying to open, build and run someone else's Angular 4 project but I am not able to view the project when I run it my way. I don't see what is going wrong or what I should do now. I already had everything in place to use NPM and NodeJS

The steps I took were:

- Open up the project
- npm install
- ng serve

The project compiles the right way. (I have an own Angular app and I know how this looks like) The console is showing:
>'** NG Live Development Server is listening on localhost:4200, open your browser on

[To see links please register here]

**'.

Then, when I opened up a web browser, I navigated to localhost:4200 and a web page with the following text were shown:
> 'Cannot GET /'

And on the console was the following text:
> 'GET

[To see links please register here]

404 (Not Found)'

The project should work fine but I am not able to navigate to a working URL on the web page. Routing is set-up another way as I am used to doing this. In app.module.ts the following is implemented:

app.module.ts

const appRoutes: Routes = [
{ path: '', redirectTo: 'tree', pathMatch: 'full' },
{ path: 'admin', component: AdminPanelComponent, canActivate: [AuthGuard],
children: [{path:'', component: PanelComponent},{path: 'add', component:
AddTreeComponent}, {path:'manage-trees', component:ManageTreesComponent},
{path:'manage-users', component: ManageUsersComponent}, {path:'view-trees',
component: ViewTreeComponent}]},
{path:'tree', component: TreeComponent},
{path:'error', component: ErrorComponent},
{path:'unauthorized', component: UnauthorizedComponent},
{path:'login', component: LoginComponent},
{path:'entire-tree', component: EntireTreeComponent},
{ path: '**', component: PageNotFoundComponent },
];

Also opening up a web page like; localhost:4200/tree does not work. When I let angular stop serving the web page, the web page displays: "this site can't be reached'. So I think there is running something at localhost:4200... Also, another project of this person behaves the same way.

[![enter image description here][1]][1]

Does anybody know what is going on?

**EDIT**

app.module.ts

RouterModule.forRoot(appRoutes, { useHash: true })

Package.json

{
"name": "xxx",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angular-oauth2-oidc": "^1.0.20",
"angular-polyfills": "^1.0.1",
"angular2-jwt": "^0.2.3",
"angular2-spinner": "^1.0.10",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ngx-bootstrap": "^1.8.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.2.4",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}


I also see an icon next to the tab name with the label: "Error".

**OBSERVATION:**

New observation:

After I ran `npm install -g angular-cli` I wasn't able to run `ng serve`. (You have to be inside an angular-cli project in order to use the build command after reinstall of angular-cli)

Then I ran `npm install -g @angular/cli@latest` and I was able to use `ng serve` again.

**OBSERVATION 2:**

After building the app with: 'ng build ...' there is no index.html in the 'dist' folder... When I set the website online, there is just a folder structure instead of a nice website. I think that's because there is no index.html.


[1]:

Check if in `index.html` base is set

<head>
<base href="/">
...
</head>

The problem was that I ran the commands within the folder `/project/src/app`. Navigating back to the project folder so to `/project` and running `ng serve` from there solved my problem.

For me it also was problem with path, but I had percentage sign in the root folder.

After I **replaced %20 with space**, it started to work :)

I was using `export class TestCalendar implements OnInit{}` but i did not write the function

ngOnInit() {
/* Display initial */
}
. After running the command `ng serve` , i found out that i was not using `ngOnInit(){}` . Once i implemented, it started working fine. Hope it helps someone.

I was referring to one of my provider with two different casing. One of them was wrong but only the webpack compiler was complaining. I had to step into the ClientApp folder and use ng build or ng serve to see the errors. (ASP.NET Core SPA with Angular 5)

I had the same error caused by build errors. I ran ng build in the directory of my application which helped me correct my errors

I had the same problem with an Angular 6+ app and ASP.NET Core 2.0

I had just previously tried to change the Angular app from CSS to SCSS.

My solution was to go to the `src/angularApp` folder and running `ng serve`. This helped me realize that I had missed changing the `src/styles.css` file to `src/styles.scss`

For me the issue was that my local CLI was not the same version as my global CLI - updating it by running the following command solved the problem:

npm install --save-dev @angular/cli@latest

Generally it is a versioning issue. Node.js v8 cannot compile with angular-cli 6.0 or later. angularcli v6 and above will work for lastest node versions. Please make sure if your node version is v8, then you need to install angular-cli upto 1.7.4.
enter ng -v command in cmd and check the cli and node versions.