[Angular 2] Component relative paths
2024-10-15 10:38:14
Oingial aritial --> Link
Take away:
import { Component, OnInit } from '@angular/core';
@Component({
selector : 'contacts-header',
templateUrl: './header.component.html',
styleUrls : ['./header.component.css']
})
export class HeaderComponent implements OnInit {
}
When you use `templateUrl` & `styleUrls`, the path are relative to the application root.
So if you compoennt is put inside /src/app/header. Then way `templateUrl: './header.component.html'` is refer to 'src/header.component.html', so will report 404 error.
To way to solve the problem is introduce ´moudleId: moudle.id`.
CommonJS way:
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id, // fully resolved filename; defined at module load time
selector: 'contacts-header',
templateUrl: 'header.component.html',
styleUrls: ['header.component.css']
})
export class HeaderComponent implements OnInit {
}
//tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5"
}
}
SystemJS:
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: __moduleName, // fully resolved filename; defined at module load time
selector: 'contacts-header',
templateUrl: 'header.component.html',
styleUrls: ['header.component.css']
})
export class HeaderComponent implements OnInit {
}
JSPM:
// If we decide to use JSPM, we use the typescriptOptions configuration format in the config.js file:
SystemJS.config({
typescriptOptions: {
module: "commonjs",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
transpiler: false,
baseURL: "/dist",
map: {
app: 'src',
typescript: 'node_modules/typescript/lib/typescript.js',
angular2: 'node_modules/angular2',
rxjs: 'node_modules/rxjs'
},
packages: {
app: {
defaultExtension: 'ts',
main: 'app.ts'
},
angular2: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
Webpack:
// require
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: require('./header.component.html'),
styles: [require('./header.component.css')]
})
export class HeaderComponent implements OnInit {
}
or
// import
import { Component } from '@angular/core';
import { Component } from '@angular/core';
import headerTemplate from './header.component.html';
import headerStyle from './header.component.css';
@Component({
selector : 'my-app',
template : headerTemplate,
styles : [headerStyle]
})
export class HeaderComponent implements OnInit {
}
最新文章
- BackTrack5-r3汉化
- DDD领域驱动设计之领域基础设施层
- git各种命令介绍以及碰到的各种坑
- 【bzoj1596】[Usaco2008 Jan]电话网络
- storm UI
- mysql时间格式DATE_FORMAT()
- 学习java第7天
- iOS启动图和开屏广告图，类似网易
- java阿拉伯数字表示的金额转换成中文大写金额
- 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端
- java 通过eclipse编辑器用mysql尝试 连接数据库
- vs2017 使用Bower 抛出异常ECMDERR Failed to execute "git ls-remote --tags --heads
- oracle查询数据字典的sql
- os 模块 和 os模块下的path模块
- java 打印图形
- require的压缩命令
- C#基础视频教程5.2 如何编写简单的超级热键
- 检查Linux服务器性能命令详解
- eclipse隐藏关闭的工程
- List分组迭代器 C#--深入理解类型