0

私はAngular2を独学するための小さなプロジェクトを始めています。完全にリリースされていないため、私は Yeoman Generator と Grunt や Gulp などの自動化ツールの使用を避けました。Node Package Manager を使用し、「scripts」プロパティから自動化タスクを実行しています。

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 のフォルダー構造は次のとおりです。

生成された main.css を確認できます

4

1 に答える 1