How to solve the problem with compiling Angular.js to Sails.js?

Question

Angular

Tell me, please, what is the problem here.
I am just starting to learn these technologies, but there were no such problems when mastering the Angular CLI.
Here's the gist:
I tried injecting Angular.js into Sails.js. In my search for a solution, I came across a very convenient option ( https://sharpten.com/blog/2016/02/02/integrating-a... but everything would be fine if even the slightest change in the file did not entail an error:
zone .js:2263 GET localhost:1337/app.component.html 404 (Not Found)
scheduleTask @ zone.js:2263
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:235
Zone.scheduleMacroTask @ zone. js:258
(anonymous) @ zone.js:2287
proto.(anonymous function) @ zone.js:1426
....
and many more.
here are my sources:
app.component.ts

import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    //template: '<h1>My First Angular/Sails App!</h1>'
    templateUrl: './app.component.html'
})
export class AppComponent { }

app.component.html app.module.ts
<h1>Angular/Sails App is working properly!!!</h1>

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

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

{
  "name": "sails-angular2",
  "private": true,
  "version": "0.3.0",
  "description": "a Sails + Angular 4 sample application",
  "keywords": [],
  "dependencies": {
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "@angular/upgrade": "4.0.2",
    "angular-in-memory-web-api": "~0.3.0",
    "core-js": "^2.4.1",
    "ejs": "2.3.4",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "express": "^4.14.0",
    "grunt": "1.0.1",
    "grunt-contrib-clean": "1.0.0",
    "grunt-contrib-coffee": "1.0.0",
    "grunt-contrib-concat": "1.0.1",
    "grunt-contrib-copy": "1.0.0",
    "grunt-contrib-cssmin": "1.0.1",
    "grunt-contrib-jst": "1.0.0",
    "grunt-contrib-less": "1.3.0",
    "grunt-contrib-uglify": "1.0.1",
    "grunt-contrib-watch": "1.0.0",
    "grunt-sails-linker": "~0.10.1",
    "grunt-sync": "0.5.2",
    "include-all": "~0.1.6",
    "rc": "1.0.1",
    "reflect-metadata": "^0.1.2",
    "rxjs": "5.0.1",
    "sails": "~0.12.13",
    "sails-disk": "~0.10.9",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
  },
  "scripts": {
    "debug": "node debug app.js",
    "start": "node app.js"
  },
  "main": "app.js",
  "repository": {
    "type": "git",
    "url": "git://github.com/xmaestro/sails-angular2.git"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.41",
    "typescript": "2.4.0"
  },
  "author": "xmaestro",
  "license": ""
}

Errors pop up when I change the template in the component to templateUrl.
I will be very grateful for your help!

Answer 1

the problem is in the paths. it is unlikely that app.component.html is located at the root of the application (localhost:1337/app.component.html)