How can I display components using Angular CLI 5 without any visual output?

The index.html page is not displaying anything, not even the "App works" message that should appear in a basic initial project

ng --version

Angular CLI: 1.6.0 Node: 8.9.1 OS: darwin x64 Angular: 5.1.0 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

@angular/cli: 1.6.0 : 0.0.35 : 0.0.22 : 0.0.41 : 1.1.0 : 1.9.0 : 0.1.10 : 0.0.10 typescript: 2.4.2 webpack: 3.10.0

Mac OS Sierra

Repro steps

app-routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
{path:'home', component: HomeComponent},
{path:'about', component: AboutComponent},
{path:'', redirectTo: '/home', pathMatch: 'full'}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

index.html

Angular Project After following all these steps, the "ng serve --open" command does not display anything on the index page.

This is the link to the project:

https://github.com/afabricioa/startAngular

Is there anyone who can help?

Tried cloning the repository again and running "ng completion --bash", "npm install" and "ng serve --open", but still getting a blank index page. It seems like Angular is unable to render components properly. Even after running "ng completion --bash", the issue remains unresolved.

Answer №1

Upon accessing the application you provided for download, I noticed that the root component HTML is being displayed without any issues. It's unclear why you are encountering this problem since I am unable to replicate it on my end.

Answer №2

It seems like my previous post was removed, but I can still provide some insights into the possible reasons for your issue. The problem is unlikely to be related to hardware, as I have encountered similar issues on various operating systems including Windows 10, 7, and Linux 16.04, on both desktop and laptop devices. I have tested the same scenario on both Chrome and Firefox browsers, with consistent problems persisting. I recommend checking out this https://github.com/Ismaestro/angular5-example-app, which is a fully functioning Angular 5 example app. You can also explore the demo here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Javascript to eliminate divs on a page that have the attribute display:none

Looking for a way to remove generated divs with display: none using JavaScript? Let's find a solution. <div id="workarea"> <div id="message" class="messages" style="display: none;">Your message was saved</div> <div id="message" c ...

Enabling CORs headers in Express continues to lead to errors

I have implemented the CORS code provided on http://enable-cors.org/ for express into my index.js file. /*these first five line direct from http://enable-cors.org/.com*/ app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); ...

Using Backbone to Handle Different Data Formats

I have a unique text file containing date-time data in the format below: 2014-03-14T16:32 2014-03-15T13:04 2014-03-16T06:44 ... I want to use this static file as a read-only data source for my backbone collection. However, the current format is not suita ...

Ways to showcase numerous records in Ember.js template using hasMany relationship?

The model I have defined looks something like this: App.Question = DS.Model.extend({ title: DS.attr( 'string' ), answers: DS.hasMany('App.Answer') }); App.Answer = DS.Model.extend({ title: DS.attr( 'string&ap ...

get a duplicate of an object

Is this the proper method for creating a duplicate of an object? class ObjectWrapper { private _obj; /*** * Copy object passed as argument to this._obj */ constructor (_obj: Object) { this._obj = _obj; } /** Return copy of this._ ...

What is the most effective way to transfer an array from one PHP file to a different JavaScript file?

Utilizing AJAX to send a request to another php page and retrieve the result of a query, I originally used xmlhttprequest to pass the php logic along with the query information. However, I wanted to separate the presentation logic from the actual code logi ...

Filtering objects by their properties or attributes in AngularJS can be achieved by using forEach, but encountering an error stating "forEach is

In my AngularJS application, I have a page that displays multiple widgets. One widget shows a table with details about a monitored system. Currently, the table has two columns: 'Type' and 'Data', displaying information and values respec ...

Asserting within a specific condition's scope in TypeScript

I am facing a similar situation, type Field1Type = { a: string; } type Field2Type = { b: string; c: number; } type ObjType = { field: Field1Type | Field2Type } const field = { b: "" c: 0 } const obj = { field } as ObjType i ...

I am looking to modify the visibility of certain select options contingent upon the value within another input field by utilizing ngIf in AngularJS

I am currently utilizing Angularjs 1.x to develop a form with two select fields. Depending on the option selected in the first select, I aim to dynamically show or hide certain options in the second select field. Below is the code snippet for the form: &l ...

What is the best way to retrieve the value of a boolean property from a JSON object produced by Rails within an AngularJS expression?

Here's the story: So, I had this element with an ng-repeat directive and decided to use the ng-class directive on it. The purpose of adding the ng-class was to apply a specific class to the element based on certain conditions. But here's where t ...

Utilizing jQuery to dynamically add results and prevent duplicate entries in will_paginate

I am currently using will_paginate to easily manage the comments pagination in my Rails 3 application, and so far it's been working flawlessly. At the moment, I have set up the display to show 10 comments per page. However, whenever I add a new comme ...

In Vue using Typescript, how would I go about defining a local data property that utilizes a prop as its initial value?

When passing a prop to a child component in Vue, the documentation states: The parent component updates will refresh all props in the child component with the latest value. Avoid mutating a prop inside a child component as Vue will warn you in the consol ...

Inserting POST request data into subdocument arrays of a database

I am struggling to add data to a nested mongoose sub-document when creating a new schema from the client side. Only the data that is not nested inside another schema/array is being sent over to the database. My database setup includes MongoDB with Mongoos ...

Is it possible to increase Google+ shares without needing an API key for every single page?

Looking to retrieve the number of Google+ shares for each URL on a search results page using Ajax. Facebook and Twitter share counts have been successfully implemented: $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + url + & ...

Angular's ng-repeat allows you to iterate over a collection and

I have 4 different product categories that I want to display in 3 separate sections using AngularJS. Is there a way to repeat ng-repeat based on the product category? Take a look at my plnkr: http://plnkr.co/edit/XdB2tv03RvYLrUsXFRbw?p=preview var produc ...

Error occurred when trying to run 'npm run dev' on vite: Unable to access the file "node_modules/react/jsx-dev-runtime.js"

After successfully creating a Vite app, I encountered three errors when trying to run the app with npm run dev: [ERROR] Cannot read file "node_modules/react/jsx-dev-runtime.js": Access is denied. [ERROR] Cannot read file "node_modules/react/index.js": Acc ...

Tips for effectively injecting retrieved API response data into a Table

Creating a google-map with customized markers that are logos of companies is the goal. Obtaining a json file from the APIs containing the vessels of interest has been successful. The challenge faced is injecting these vessels into a table on the user inte ...

Invoke a Node.js script from a Spring Boot application to pass a Java object to the script. The script will modify the object and then return it back to the originating class

class Services { Address address = new Address(....); /* Invoke NodeJs script and pass address object In the js script modify address object var address = getAddress() Modify address object Return address obj ...

Using Backbone for the front end and Node.js for the backend, this website combines powerful technologies

Currently, I am in the process of developing a new website that will function as a single-page application featuring dialog/modal windows. My intention is to utilize Backbone for the frontend and establish communication with the backend through ajax/webs ...

Obtain element by selecting a specific class using Javascript

<select class="tmcp-field tillagg-width tm-epo-field tmcp-select" name="tmcp_select_30" data-price="" data-rules="" data-original-rules="" id="tmcp_select_ ...