Angular SystemJS 需要向 .html 文件添加扩展名

Question

我正在使用 Typescript 构建一个简单的 Angular 应用程序。我正在使用 gulp 来构建它。我正在尝试将每个组件的 html 和 css 文件保存在单独的文件中。

示例：

components
    - app.component.ts
    - app.component.html
    - app.component.scss

我包括这样的文件

app.component.ts

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

问题是，它正在尝试加载文件 ./app.component.html.js，如 chrome 中的网络工具所示。 Chrome Network-Tools Request

如果我在浏览器中打开请求的 url 并删除末尾的 .js，文件将正确显示。

systemjs.config.js

(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app':                        '', // 'dist',
        '@angular':                   'libs/@angular',
        'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api',
        'rxjs':                       'libs/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);

如果我将 html 和 css 直接存储在组件中，一切都会按预期工作。

Project Structure

Answer 1

根据 cheatsheet 组件配置 章节你可以传递外部 html 和 css 如下：

templateUrl: 'components/app.component.html', styleUrls: ['components/app.component.css']

并且您可以通过将 moduleId: module.id 添加到 @Component 指令来使路径相对于组件而不是相对于应用程序根目录。

@Component({ moduleId: module.id, selector: 'my-app', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] })

您可以找到完整的描述 here。

但您还必须管理如何将 sass 文件转换为 css 之前。

Angular SystemJS 需要向 .html 文件添加扩展名

Angular SystemJS require adds extension to .html file

typescript

systemjs

angular