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 http://localhost:4200 **’.

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 http://localhost:4200/ 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

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.

39 thoughts on “Angular: Cannot Get /”

  1. 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.

    Reply
  2. 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 🙂

    Reply
  3. 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.

    Reply
  4. The way I resolved this error was by finding and fixing the error that the console reported.

    Run ng build in your command line/terminal, and it should display a useful error, such as the example in red here: Property ‘name’ does not exist on type ‘object’.

    Console example

    Reply
  5. 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.

    Reply
  6. 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
    
    Reply
  7. See this answer here. You need to redirect all routes that Node is not using to Angular:

    app.get('*', function(req, res) {
      res.sendfile('./server/views/index.html')
    })
    
    Reply
  8. Just figured out the reason when we type “ng serve” INSIDE OUR PROJECT..
    for example C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve

    could not resolve module C:\Users\EdgeTech1\Desktop\C
    results: failed compiled

    root cause:
    My folder name was C# Project..

    Note: I tried to remove the # in my Project Name, I rename C# Project to CSharp instead and I tried to open cmd prompt again, typed the same thing..

    for example:

    C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve
    

    and my project compiled successfully.. so as much as possible avoid ASCII characters in naming projects files.

    Reply
  9. Check baseHref is set to “/” ( angular.cli )

        "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                    "baseHref": "/"
    

    if it didn’t work, check if your base href in your index.html is set to “/”

    Reply
  10. This error can apparently happen for a number of reasons. Here is my experience for those who land here after searching for “Cannot GET /”

    I experienced this error when I installed ng-bootstrap v6 into an Angular 8 project. I downgraded ng-bootstrap to v5 and it seems to be okay now, since ng-bootstrap v6 is only compatible with Angular 9.

    This happened while working in Visual Studio 2019 with the Angular .NET Core template. At the same time, the output panel of Visual Studio displayed this esoteric sounding error: “TS1086: An accessor cannot be declared in ambient context,” which led me here, which, after a little reading, made me think it was a versioning issue. It appears that it was.

    I fixed it by changing “@ng-bootstrap/ng-bootstrap”: “^6.0.0″,” to “@ng-bootstrap/ng-bootstrap”: “^5.0.0” in the package.json file and rebuilding.

    Reply
  11. For me the issue was with @Component Selector path was pointing to wrong path. After changing it solved the issue.

    @Component({
    selector: 'app-fetch-data',
    templateUrl: './fetch-data.component.html',
    providers: [ToolbarService, GroupService, FilterService, PageService, ExcelExportService, PdfExportService]
    })
    
    Reply
  12. 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

    Reply
  13. You can see the errors after stopping debbuging by choosing the option to display ASP.NET Core Web Server output in the output window.
    In my case I was pointing to a different templateUrl.

    Reply
  14. The weird thing that I was experiencing was that I could make changes to the components in Visual Studio 2019 while the app was running and see my changes but, when I restarted the app, I got the Cannot Get / error. Instead of running IIS Express, I chose to run the app using Angular JS and the build window showed me that there was an error in app.component.ts. It turned out to be an extra } at the end of the file. Not sure how it got there but, when I removed it, the app works fine.

    Reply
  15. 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)

    Reply
  16. First, delete existing files package.lock.json and node_modules from your project.
    Then, the first step is to write npm cache clean –force. Second, also write this command npm i on the terminal. This process resolve my error. 😀

    Reply
  17. One of the top reasons for this error is because if some errors in your actual code. Check your console, probably angular would log some errors.

    Reply
  18. Many answers dont really make sense but still have upvotes, makes me currious why that would still work in some cases.

    In angular.json

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "deployUrl": "/",
        "baseHref": "/",
    

    worked for me.

    Reply

Leave a Comment