Angular 2 组件 .html 路径答案

【问题标题】：Angular 2 component .html pathAngular 2 组件 .html 路径
【发布时间】：2017-01-12 04:05:45
【问题描述】：

我尝试在组件中使用 html 的相对路径，我也在 dist 文件夹中映射我的 js 文件。我的组件代码是

app/app.component.ts

import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent { }

html 文件位于同一目录中，即应用程序/app.component.html

<h1> Wolaa </h1>

我收到以下错误

很明显，Angular 正在“dist/app/app.component.html”中找到 app.component.html 文件，但该文件不存在，我该如何解决？？

我的 systemjs.config.js 文件是

/**
 * 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 = {
    'app':                        'dist', //'app',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: '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);

我的 tsconfig.json 是

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  }
}

【问题讨论】：

标签： angular angular2-template angular2-components

【解决方案1】：

以下是文档中有关模板相对路径的一些详细信息，可能会有所帮助：

https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

【讨论】：

【解决方案2】：

尝试在您的相对路径之前放置一个“./”，例如：

import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent { }

【讨论】：

这不是解决方案。问题仍然存在，因为dist 目录不包含 hrml 和 css 文件。它们也需要复制到dist。

【解决方案3】：

这是迄今为止我能找到的最佳解决方案： moduleId: module.id.replace("/dist/", "/src/"); 其中src 在我的情况下是app。取自here。

【讨论】：

肯定是 :( 迁移到 webpack 可能会避免这种情况。我会在不久的将来尝试。但是，它有效，它仍然是一个班轮 :)