Я начинаю небольшой проект, чтобы научиться Angular2. Поскольку он выпущен не полностью, я избегал использования Yeoman Generator и инструментов автоматизации, таких как Grunt или Gulp. Я использую диспетчер пакетов Node и запускаю свои задачи автоматизации из свойства «скрипты».
Я установил одновременно lite-server, typescript и node-sass. Когда я запускаю задачу «наблюдать» для обновления, когда я изменяю свои исходные файлы, локальный сервер работает нормально, это обновляется, когда я изменяю любой из моих классов 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:
