文章目录
  1. 1. Component中加载html/css
    1. 1.1. 使用file-loader
    2. 1.2. 其他方式
  2. 2. 使用angular2-template-loader
    1. 2.1. angular2-template-loader
    2. 2.2. package.json
    3. 2.3. webpack.config.js
    4. 2.4. app.component.ts
  3. 3. 结束语

因为项目原因又玩上了Angular2(v4.0+),《玩转Angular2》系列用于探索一些灵活或者新的用法。
本文记录改善应用中一些html和css加载的问题。

Component中加载html/css


使用file-loader

上一节我们使用简单粗暴的file-loader生成文件路径方式进行模板加载,我们的组件定义的代码长这样:

1
2
3
4
5
6
7
@Component({
selector: 'app-root',
templateUrl: require('file-loader?name=[path][name].[ext]!./app.component.html')
})
export class AppComponent {
title = 'app works!';
}

这样做会有一些问题:

  1. 使用的时候很不方便,要写一长串。

该方法可以通过在webpack里对file-loader进行配置解决,但可能会产生一些其他问题。本骚年折腾了下没折腾好,估计是姿势不正确吧,大家可以下来试试。

  1. 生成的代码不打包进bundle.js文件。

这样有个很明显的问题,就是生成的代码体积和大小都比较浪费资源。除非是像本骚年之前的项目一样需要远程debug和直接线上修bug,一般来说都不会需要这样处理的。

其他方式

当然,像angular-cli以及Angular2 Webpack Starter这些脚手架和项目,已经对loader进行了调整,最终我们是感受不到对html/css等的文件加载,同时也能很方便地通过sourcemap定位bug。

这里要不使用以上脚手架的话,就得自己想办法实现这个过程了,当然有能力的话自己写个loader也完全没问题,可惜目前本骚年对npm和node的掌握也很是局限(T_T)。实话说,个人觉得使用一个file-loader其实说不定也能解决这样的问题了。

下面是从Angular2 Webpack Starter里面翻到的,其中使用的angular2-template-loader的使用过程。

使用angular2-template-loader


angular2-template-loader

关于安装和使用等说明,都可以参考angular2-template-loader文档

这里我们不再需要file-loader了,同时我们需要添加angular2-template-loader以及raw-loader

其中raw-loader常用于把文件内容作为字符串返回。

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
"name": "angular-free",
"version": "0.0.0",
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --config webpackServer.config.js --host 0.0.0.0 --port 3333 --devtool eval --progress --colors --hot --content-base dist"
},
"dependencies": {
"@angular/common": "~4.1.2",
"@angular/compiler": "~4.1.2",
"@angular/compiler-cli": "~4.1.2",
"@angular/core": "~4.1.2",
"@angular/forms": "~4.1.2",
"@angular/http": "~4.1.2",
"@angular/platform-browser": "~4.1.2",
"@angular/platform-browser-dynamic": "~4.1.2",
"@angular/router": "~4.1.2",
"rxjs": "^5.1.0",
"zone.js": "^0.8.10"
},
"devDependencies": {
"@types/node": "^7.0.18",
"angular2-template-loader": "~0.6.2",
"babel-core": "~6.24.1",
"babel-loader": "~7.0.0",
"babel-polyfill": "~6.23.0",
"babel-preset-latest": "^6.24.1",
"html-webpack-plugin": "^2.28.0",
"raw-loader": "^0.5.1",
"ts-loader": "^2.0.3",
"tslint": "^5.2.0",
"typescript": "~2.2.0",
"webpack": "~2.5.1",
"webpack-dev-server": "~2.4.5"
}
}

这里本骚年也调整了一下依赖对应的版本,毕竟像angular这样的不兼容升级方式,还是做点记号的好。

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 这里调整了loader
rules: [
{
test: /\.ts$/,
use: ["babel-loader", "ts-loader", 'angular2-template-loader'],
exclude: /node_modules/
},
{
test: /\.(html|css)$/,
use: ['raw-loader'],
exclude: [path.resolve(__dirname, 'src/index.html')]
},
{
test: /\.async\.(html|css)$/,
loaders: ['file?name=[name].[ext]']
},
...
]

app.component.ts

1
2
3
4
5
6
7
8
@Component({
selector: 'app-root',
templateUrl:'./app.component.html',
styleUrls: ['app.style.css']
})
export class AppComponent {
title = 'app works!';
}

最终使用的方式如上,与angular2-template-loader官方推荐的require方法不一致,但是这样更加方便了。

结束语


这节主要讲了使用angular2-template-loader替换之前的file-loader,来改善angular2中html文件的引入方式。
此处查看项目代码
此处查看页面效果

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. Component中加载html/css
    1. 1.1. 使用file-loader
    2. 1.2. 其他方式
  2. 2. 使用angular2-template-loader
    1. 2.1. angular2-template-loader
    2. 2.2. package.json
    3. 2.3. webpack.config.js
    4. 2.4. app.component.ts
  3. 3. 结束语