I've encountered an issue with my TypeScript transpiler setup. My @angular component isn't loading, and I'm getting this error message: ZoneAwareError:
"Error: core_1.Component is not a function
Evaluating http://127.0.0.1:64223/app/app.component.ts
Evaluating http://127.0.0.1:64223/app/app.module.ts
Evaluating http://127.0.0.1:64223/app/main.ts
Loading app
at LoaderError__Check_error_message_for_loader_stack (http://127.0.0.1:64223/node_modules/systemjs/dist/system.src.js:78:11) [<root>]
... more stack trace ...
While I understand that using a transpiler in production isn't recommended, I'm utilizing it in my development environment. Here's my current configuration:
tsconfig.json
{
"disableCompileOnSave": true,
"compileOnSave": false,
"compilerOptions" : {
"target" : "ES5",
"module" : "commonjs",
"experimentalDecorators" : true,
"noImplicitAny" : true
}
}
Lastly, here are the relevant components and modules:
app/app.component.ts
import { Component } from '@angular/core';
console.log('@angular/core');
@Component({
selector: 'app',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}
app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
and app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
I suspect there's an issue with the system.js configuration. I've been struggling with this problem for hours now and would appreciate any assistance.