SystemJS не перемещает файлы ресурсов в папку dist

Question

Привет, я пытаюсь изучать угловой, не используя cli, чтобы понять, как работают внутренние устройства.Я использую systemjs в качестве загрузчика модулей.Мой вопрос здесь: systemjs предполагает перемещение файлов .html и .css в папку dist вместе со скомпилированными файлами .ts?Потому что, если я хочу использовать относительные пути в моих компонентах, мне нужно установить moduleId: module.id в @Component decorator.Затем, когда я загружаю свой браузер, он пытается получить эти активы из /dist/app/app.component.html, который там не находится.

app.component.ts

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    title = "My First Angular App!";
}

ts.config.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "noEmitOnError": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowJs": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "dist"
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

systemjs.config.json

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {

  // map tells the System loader where to look for things
  var map = {
    // our app is within the app folder
    'app': 'dist', // 'dist',

    // angular bundles
    '@angular': 'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',

    // other dependencies
    'rxjs': 'node_modules/rxjs',
    'rxjs-compat': 'node_modules/rxjs-compat',
    'core-js': 'node_modules/core-js',
    'zone.js': 'node_modules/zone.js'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': {
      main: 'main.js',
      defaultExtension: 'js'
    },
    'rxjs': {
      main: 'index.js',
      defaultExtension: 'js'
    },
    'rxjs/operators': {
      main: 'index.js',
      defaultExtension: 'js'
    },
    'angular2-in-memory-web-api': {
      main: 'index.js',
      defaultExtension: 'js'
    },
    'core-js': {},
    'zone.js': {}
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/' + pkgName] = {
      main: 'index.js', 
      defaultExtension: 'js'
    };
  }

  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/' + pkgName] = {
      main: 'bundles/' + pkgName + '.umd.js',
      defaultExtension: 'js' };
  }

  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);

  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

Я использую угловую версию 6, если это помогает.

Спасибо!

Answer 1

Ответ «Нет», некоторые разработчики используют gulp для этого.Мне нравится этот способ, внутри systemjs.config.json

map: {
  // our app is within the app folder
  app: 'app',

И в app.component.ts:

@Component({
 selector: 'my-app',
 templateUrl: 'app/app.component.html'

См. Это для более подробной информации: https://github.com/Longfld/AngularQuickStartForBeginning/blob/master/app/app.component.ts