Angular2を教える小さなプロジェクトを開始します。私はYeoman GeneratorとGruntやGulpのような自動化ツールを使用しています。 Node Package Managerを使用していて、 "スクリプト"プロパティからオートメーションタスクを実行しています。Angmark2プロジェクトでnpm node-sassとconcurrentを使用してブラウザでページが更新されない
私は、lite-server、typescript、およびnode-sassを同時にインストールしました。ローカルサーバーが正常に動作するソースファイルを変更するときに "watch"タスクを実行すると、TypeScriptクラスを変更すると更新されますが、生成されたにもかかわらずCSSがロードされていないことがわかりましたcss
が正しい私のソースscss
ファイルを修正するとき。ブラウザにはCSSは一切ロードされません。これは私のpackage.jsonです。scripts
オブジェクトのウォッチスクリプト/タスクを見ることができます。
{
"name": "my-first-angular2",
"version": "0.0.1",
"private": true,
"scripts": {
"clean": "rm -f ./*.js; rm -f ./*.js.map; rm -f ./intermediates/*.js; rm -f ./intermediates/*.js.map",
"tsc": "./node_modules/.bin/tsc",
"tsc:w": "./node_modules/.bin/tsc -w",
"node-sass": "node-sass styles/ -o styles/",
"node-sass:w": "node-sass -w styles/ -o styles/",
"serve": "./node_modules/.bin/live-server --host=localhost --port=8080 .",
"watch": "concurrent \"npm run tsc:w\" \"npm run node-sass:w\" \"npm run serve\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.16",
"es6-promise": "3.0.2",
"es6-shim": "0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.6",
"tslint": "3.7.0-dev.2",
"typescript": "^1.8.10",
"zone.js": "0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^0.8.1",
"bootstrap-sass": "^3.3.6",
"node-sass": "^3.6.0"
}
}
生成されたCSSファイルはstyles/main.css
と呼ばれ、ので、私のindex.html
<!doctype html>
<html>
<head>
<title>My First Angular2 App</title>
<!-- Libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Stylesheet -->
<link href="styles/main.css">
</head>
<body>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app.js')
.then(null, console.error.bind(console));
</script>
<angular2></angular2>
</body>
</html>
にいずれかが私が間違っているのかを見ることができますように私はそれにリンクされて?私は、コンソールやコマンドラインにエラーは表示されません(実際はすべて正常に動作しています)。ここに私のフォルダ構造は、Atom IDEである: