Having trouble loading the resource at http://localhost:3000/@angular/platform-browser-dynamic with the name "@angular/platform-browser-dynamic" from the location http://localhost:3000/app/main.ts

I am having trouble understanding this error message:

*Error loading http://localhost:3000/@angular/platform-browser-dynamic as "@angular/platform-browser-dynamic" from http:// localhost:3000/app/main.ts
at o (system.src.js:4597)
at XMLHttpRequest.I.s.onreadystatechange (system.src.js:4597)*

Below is my app.component.cs

import {Component} from "@angular/core";<br/>
import {ListComponent} from "./List/list.component";<br/>
import {ContactComponent} from "./Contact/contact-form.component";

@Component({
selector: 'my-app',
template: `
{{title}} 
<a routerLink="/myList"></a><router-outlet></router-outlet>
`    
})

export class AppComponent {
title: 'My Angular App';
}

This is the content of app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { ListComponent } from './List/list.component'

@NgModule({
imports: [BrowserModule,
    RouterModule.forRoot([
        {
            path: 'myList',
            component: ListComponent
         }
    ])],

declarations: [AppComponent,ListComponent],
bootstrap: [AppComponent],


})
export class AppModule { }

Here's what I have in main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Content found in index.html

<!DOCTYPE html>
<html>
<head>
<title>Angular App</title>
...
</body>
</html>

Information from package.json

{
  "name": "angular2-demo",
...
  }
}

Details from systemjs.config.js

(function (global) {
 System.config({
...
})(this);

Last but not least, here's my tsconfig.json

{
  "compilerOptions": {
...
  }
}

I've tried multiple solutions without success. As a newcomer to Angular 2, I'm unsure about what's causing the issue. Any assistance would be greatly appreciated.

Answer №1

The index.html's System.config is specifically tailored for transpiling within the browser, which is most useful when creating plunker examples. However, for development purposes, it is recommended to utilize a different approach in the index.html file:

<script src="systemjs.config.js"></script>
<script>
      System.import('main.js').catch(function(err){ console.error(err); });
</script>

When transitioning to production, Ahead of Time transpiling should be employed.

To simplify the process, I would recommend starting fresh with the Quickstart example available at https://angular.io/guide/quickstart

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 data in the filtered table is failing to revert back to its original state upon removing the filtered item from the webpage

I am currently working with an ng-multiselect dropdown to fetch data from a database. These dropdowns are being used to filter a data table on a webpage. However, I am facing an issue where when a dropdown item is selected, it correctly filters the table, ...

Remove the strikethrough text on the legend in Chart.js

When using chartjs, I have noticed that clicking on one of the legend items strikes through the text and hides the details of that specific data. Instead of striking through the text, I would like to change it to a grey color or consider other suitable o ...

What exactly does <T> signify within the realm of dynamic forms?

Currently, I am experimenting with the Angular2 cookbook instructions for Dynamic Forms. The instructions mention: export class QuestionBase<T>{ value: T, ... I am confused about the purpose of the "<T>" in both instances. Do you have any ins ...

The Intersection of Material-UI, TypeScript, and Powerful Autocomplete Features

In my TypeScript project, I'm attempting to develop a Material-UI AutoComplete component that retrieves the input value based on an object's property name -> obj[key] However, when using the prop getOptionLabel, I encountered the following er ...

Top method for dynamically loading a specific component by using its selector as a variable

I'm currently in the process of developing a straightforward game using Angular. The game is structured to consist of multiple rounds, each with unique characteristics that are distinguished by the variable roundType. For instance, round types can in ...

Troubleshooting: Function unable to access member variable in Angular

Within my service, I have a function that returns an Observable. This function takes data from another service, applies transformations to it, and then returns it as an Observable. @Injectable({ providedIn: 'root' }) export class ReportColumnH ...

Extract Subscription Information from the .subscribe function in Angular

After calling the subscriber, I aim to fetch the events. This code successfully achieves this: getCalendarData(){ var body = JSON.stringify({"cid": "etNG3V61LWS6Pzkeb_omuZGMVAOLd1_70tRQblVizWQ~", "seldt":"2018-09-18"}); var headers = n ...

Utilize the datasource.filter method within an *ngFor loop

I have a table that filters based on certain search criteria, which I implemented using the example found at: https://material.angular.io/components/table/examples Now, I am wondering if it is possible to apply this filtering functionality to an *ngFor lo ...

How can I loop through an object in React using TypeScript?

This is specifically for React. Let's consider the following object structure: interface Profile { name: string; title: string; } const NewPerson: Profile = { name: "John Smith", title: "Software Engineer" } Now, I want to display ...

Troubleshooting the issue of React forms hook not functioning properly with Material UI Select input

How the Textfield below should load: https://i.sstatic.net/29Sz4.png How it actually loads: https://i.sstatic.net/TdPYM.png My Select component, created using Material UI and React form hook, is not loading the default value as expected. The component ...

Typescript threw an error: expected 0 arguments but received one (this)

While attempting to convert some javascript code into typescript, I came across this error: https://i.sstatic.net/QTIpe.png I'm a bit confused because it's expecting an argument interface Command { execute: (client: Client, message: Message) = ...

The attribute 'initGradient' is not defined within this context

Struggling to incorporate a gradient background into my React and Typescript website following a guide on "https://kevinhufnagl.com/how-to-stripe-website-gradient-effect/". The error message "Property 'initGradient' does not exist on type 'G ...

What is the best approach for identifying data types when transitioning from Javascript to Typescript?

Upon reviewing the tutorial at https://www.sitepoint.com/how-to-migrate-a-react-app-to-typescript/, I came across the following JavaScript code: import React from 'react' import { buttonStyles } from './Button.styles' const Button = ({ ...

Challenges with Ionic 4 - Module '@angular/core/package.json' not found

Having some trouble with an Ionic 4 project code that works perfectly on my Mac but encounters an error when I try to run it on my Windows 10 PC. The specific error message states "Cannot find module '@angular/core/package.json'". Interestingly, ...

Issue: Provider for Compiler is Missing! Dependency Injection Error in Angular 2 Testing

When running the unit test using the npm test command, an error occurs stating there was a DI Exception with the message "Error: No provider for compiler!" import {TestComponentBuilder} from "@angular/compiler/testing"; import { expect, it, d ...

What is the best method for extracting ngControl from unit tests?

How can I access the injected ngControl from unit tests and resolve any associated errors? Within the component: constructor( @Self() @Optional() public ngControl: NgControl ) { } ngOnInit(): void { this.ngControl.valueChanges Within the unit t ...

Variety of type 'class' in Typescript

My goal is to achieve the following: createClass(c:class):SomeInstance { return new class() as SomeInstance; } But I encounter an error that says 'type expected' when I specify the :class part. ...

Dependency injection selectively loads only the required parameters

I am currently in the process of developing a custom XHRBackend for my angular2 application. My goal is to intercept all http responses with a 401 status code (unauthorized) and redirect the user to the login page. However, I am facing an issue where the D ...

(TS 2556) I'm puzzled as to why a type error is being thrown for a spread argument that was clearly defined and passed as a rest parameter

function debouncePromise<TParams extends Array<unknown>, TRes>( fn: (a: TParams) => Promise<TRes>, time: number, ) { let timerId: ReturnType<typeof setTimeout> | undefined = undefined; return function debounced(...args: TP ...

Reselect.createSelector() function in Typescript compiler returns incorrect type definition

It seems that the .d.ts file for reselect (https://github.com/reactjs/reselect) is accurate. So why am I experiencing issues here... could it be a problem with the Typescript compiler or my tsconfig? To replicate the problem: Demo.ts import { createSele ...