我正在使用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
如果我在浏览器中打开请求的网址并在结尾处删除 .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直接存储在组件中,一切都按预期工作。
答案 0 :(得分: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之前。