SystemJS 不会将资产文件移动到 dist 文件夹

Question

您好，我正在尝试学习 angular 而不使用 cli 来了解内部工作原理。我正在使用 systemjs 作为模块加载器。我的问题是，systemjs 是否应该将 .html 和 .css 文件与已编译的 .ts 文件一起移动到 dist 文件夹？因为如果我想在我的组件中使用相对路径，我需要在 @Component 装饰器中设置 moduleId: module.id 。然后，当我加载我的浏览器时，它会尝试从 /dist/app/app.component.html 获取这些资产，而 /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);

如果有帮助，我正在使用 angular 版本 6。

谢谢！

Answer 1

答案是 "No"，一些开发人员使用 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

SystemJS 不会将资产文件移动到 dist 文件夹

SystemJS doesn't move assets files to dist folder

systemjs

angular