Unable to load app.component.html on Plnkr

Plunker link: Click here to view the Plunker

https://i.sstatic.net/QXZDv.png

Resource Directory:

https://i.sstatic.net/yS423.png

app.ts File Content:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { routes } from './app.routing';

import { AppComponent } from './app.component';
// import { LoginComponent } from './login/login.component';
// import { AuthService } from './shared/services/auth.service';


@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(routes)
    ],
    declarations: [
        AppComponent,
        // LoginComponent
    ],
    providers: [
        // AuthService,
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

app.component File Content:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    ngOnInit() {
        console.log('oninit')
    }
}

Answer №1

Angular is having trouble resolving the relative path for app.component.html. To fix this issue, simply replace ./app.component.html with src/app.component.html.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

    @Component({
        selector: 'my-app',
        templateUrl: 'src/app.component.html'
    })
    export class AppComponent implements OnInit {
        ngOnInit() {
            console.log('oninit')
        }
    }

There are other ways to handle this situation, but using angular-cli or webpack to manage relative paths is generally preferred.

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

The date conversion within AngularJS's interpolation is resulting in an incorrect timestamp

Given a timestamp of 1519347000, I am trying to convert it into a date format using interpolation like so: {{$ctrl.myTimestamp | date:'MMM d y, hh:mm'}} The resulting value is Jan 18 1970, 04:02, which is incorrect. The correct date should be F ...

Automatically align to the main grid when dragging begins

Hi there! I'm still getting my feet wet in the world of JavaScript and JQuery, so please bear with me if I'm missing a few tricks. I have managed to make JQuery UI draggable elements align to a grid after the page loads, but I'm struggling ...

child component in Angular 2 not receiving input data

My situation involves transmitting an event with data from one child component to another in the same parent. Essentially, this communication is happening between sibling components. This is how the code appears: Child Component A @Output() makeIsrCall ...

"Exploring the Latest Features of NextJS 13: Enhancing Server

Currently, I am in the process of familiarizing myself with NextJS 13 and its new APP folder structure. I am facing a challenge in updating data on server components without needing to reload the page or the app. My HomePage server component fetches a list ...

Transferring an array of any size from Java to PHP and effectively managing it in PHP

In my system, I have a HashMap that stores event-outcome pairs as two strings. The first string can be any positive integer (representing the id), and the second string is the possible outcome ('1', 'X', or '2'). For example, ...

What is the process of adding an m4v video to a create-next-app using typescript?

I encountered an issue with the following error: ./components/Hero.tsx:2:0 Module not found: Can't resolve '../media/HeroVideo1-Red-Compressed.m4v' 1 | import React, { useState } from 'react'; > 2 | import Video from '../ ...

The error message "TypeError: Unable to access property of undefined when using web sockets"

Exploring Isomorphic framework for React and integrating Pusher for websockets communication. I'm encountering difficulty accessing the state within the componentDidMount() function. class TopbarNotification extends Component { state = { vis ...

JavaScript Object Featuring a Default Function Along with Additional Functions

I'm currently working on developing a custom plugin, but I've hit a roadblock at the initial stage. My goal is to create an object that can accept a parameter as its default and also include other functions within it. Below is an example of what ...

Obtaining the HREF of the selected anchor text in TinyMCE

I can retrieve the selected text in TinyMCE using var selection = parent.tinyMCE.activeEditor.selection.getContent(); but how can I access the href of text that has already been linked? For example, if the text was hyperlinked to http://www.youtube.com, ...

Using AJAX to send an Authorization header on a BlackBerry device

For my ajax call, I have been attempting to set the Authorization header. While it works perfectly fine in all browsers, it seems to be causing trouble on Blackberry 4.6. Has anyone else encountered this issue and found a solution? It's quite frustra ...

Encountered an issue while attempting to verify email through ajax with the database

After reviewing responses from multiple users here, I am aiming to verify if an email is already in the database. Below is the code snippet I am using: **HTML CODE** <div class="form-group"> <div class="col-sm-12"> ...

Does React JS set initial value after re-rendering its state?

Every time the state is updated, the function is triggered once more (please correct me if I am mistaken). And since the initial line of the App function sets the state, the values of data and setData will not revert to their defaults. For instance, i ...

How to properly pass a parameter value to an Angular service when using inject.get in the constructor

After experimenting with injecting services in Angular, I encountered an issue when trying to call LogService within GlobalErrorHandler. Despite my best efforts, the code below just wouldn't work. I discovered that the problem stemmed from not passin ...

What is the best method for adding a JSON array with objects to an already existing table?

After incorporating Bootstrap into my HTML file, I designed a basic table. To populate this table with data from an external JSON file upon clicking a button, I utilized XMLHttpRequest and JSON.parse successfully. However, I encountered difficulties when t ...

Retrieve intricate information from an API, generate an array of objects, and loop through them

I am attempting to create an array of intricate objects from the following data: My goal is to utilize this object array to generate components using map() To structure the response type, I utilized : // ... other types like Tag export type DatasetInfo ...

Removing Level of Detail models in a Three.js Group

My THREE.Group() contains numerous LODs and I need to remove all the objects within it. The group includes Lights, LensFlare, other Groups, Points, Lines, and Meshes totaling around 350 items. systemGroup.traverse (function (obj){ systemGroup.remove(o ...

What is the best way to substitute unpredictable dynamic variables on-the-fly?

I am working with a .js file that contains a config structure similar to this: genGetLocations:{ data_url:'restaurants/{var1}/tables/{var2}, } This is just one example. Some configurations may have data_url with more than two dynamic variables. I ...

What is the best way to observe a method with multiple signature overloads in karma/jasmine?

I am using angular along with karma and jasmine for unit testing. One of the methods in my HttpService has multiple signatures like so: public sendRequest<T>(path: string, observable?: false): Promise<T>; public sendRequest<T>(path: ...

Tips for utilizing node.io for HTML parsing with node.js?

Struggling to utilize node.io with node.js for parsing an HTML page stored as a string in a variable. Encountering difficulties passing the HTML string as an argument to my node.io job. Snippet from my node file nodeiotest.js: var nodeIOJob = requi ...

"Receiving a 404 error when sending a POST request, but getting

When attempting to send a POST request, I encountered a 404 error response from the server. Strangely, when sending a GET request, I received a 200 response. I have experimented with different methods: $.ajax({ type:"POST", url: "script.php", ...