I am currently utilizing angular 2 within ASP.NET MVC.
This particular component is referred to as the "other" component:
import { Component } from '@angular/core';
@Component({
selector: 'other-app',
templateUrl: './app/other/other.component'
})
export class OtherComponent {
name = "kianoush";
}
Furthermore, here is my app.module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { OtherComponent } from './other/other.component';
@NgModule({
imports: [BrowserModule],
declarations: [
AppComponent,
OtherComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
As for the app.component:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>My Name is {{name}}</h1>
<other-app></other-app>`
})
export class AppComponent {
name = "Kianoush";
}
The project directory looks like this:
https://i.sstatic.net/4mN4D.png
However, when attempting to run the project, an error message appears in the console:
404 not found
Here is a snippet of the HTML structure:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<base href="/">
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>