web-dev-qa-db-ja.com

Angular CLIを使用したアプリケーションテーマスタイルの遅延読み込み

テーマ設定のために<link />のhrefを切り替えようとしています。SCSSテーマは、node_modulesでシンボリックリンクされている私のモノリポジトリのパッケージフォルダにあります。これらをコンパイルして参照できるようにする必要があります。

私は次の修正された問題に遭遇しました： angular/angular-cli＃3401 で、同様の何かを実装しようとしています：

"styles": [
    "styles.scss",
    {
        "input": "../node_modules/@org/themes/dark.scss",
        "output": "dark",
        "lazy": true
    }
],

私の理解（おそらく正しくない）は、これによりdark.scssファイルがdist/dark.bundle.cssにコンパイルされ、 http：// localhost：4200/dist/dark。 bundle.css ですが、期待どおりに動作していません。私は何かを誤解していますか、これを完全に間違っていますか？

アプリで遅延読み込みできるnode_modulesからSCSSファイルをコンパイルするにはどうすればよいですか？代わりに試すことができる別の/より良いアプローチはありますか？

追記：

  • Angular version 4.2.4
  • Angular CLIバージョン1.3.0の使用
  • このアプローチのドキュメント
  • 私はmonorepoで働いているので、node_modules/@org/themesはシンボリックリンクです
  • 上記に問題がある場合は、ng serve --preserve-symlinksオプションを使用してみました。違いはありませんでした

私は Angular Material docs Webサイトがこの問題に取り組む の方法を調査しましたが、提供する前にSCSSファイルをassetsディレクトリのCSSファイルにコンパイルするカスタムビルドスクリプトがあるようですアプリケーション。上記の修正された問題はこのステップの必要性を取り除いたと思いましたが、おそらくそうではなかったでしょう。これはそれができる唯一の方法ですか？

解決した

@Kuncevicに感謝します。 --extract-cssフラグがありませんでした。

作業構成：

"styles": [
    "styles.scss",
    {
        "input": "../node_modules/@org/themes/src/dark.scss",
        "output": "themes/dark",
        "lazy": true
    }
],

そして、次のサーブスクリプトを使用すると、 http：// localhost：4200/themes/dark.bundle.css からアクセスできます。

ng serve --extract-css --preserve-symlinks

angularsassangular-cli
16
jjenzz

"lazy": trueを設定すると、index.htmlに表示されなくなりますが、そのバンドルを遅延ロードするメカニズムがないため、 コメント を確認してください：

遅延オプションは実際には何も遅延ロードしません。アプリケーションの起動時に実行されないようにするだけです。

最初は"lazy": trueは少し混乱することに同意します。

ng buildを実行すると、ビルドで何が出力されるかを実際に確認し、cliによって生成されたすべてのファイルを分析できます。

あなたがするとき：

{
    "input": "../node_modules/@org/themes/dark.scss",
    "output": "dark",
    "lazy": true
}

http：// localhost：4200/dark.bundle.js でファイルに直接アクセスできるはずですが、index.htmlを設定しても、"lazy": trueには表示されません

開発モードでdark.bundle.cssではなくdark.bundle.jsバンドルを取得する場合は、--extract-cssフラグを使用できます。

開発モードでCLIがjsバンドルにスタイルを生成する理由は、この方法の方がはるかに速いためです。 ng buld --prodのように製品ビルドを実行すると、芽はデフォルトで.cssに出力されます。

11
kuncevic.dev

これは古い投稿であることはわかっていますが、Angularに遅延読み込みを実装するフラグメントのみの完全な例をCSSファイルまたはjsファイル。これはAngular 7.1.4バージョンとfont-awesome 4.7との遅延読み込みのソリューションです=）ブートストラップ4

  1. bootstrapとfont-awesomeをインストールします

    npm install --save font-awesomeブートストラップ

  2. angular.jsonファイルを編集して、コンパイラーがdistフォルダ

    _   "styles": [
      "src/styles.css",
      {
        "input": "./node_modules/font-awesome/css/font-awesome.css",
        "lazy": true,
        "bundleName": "font-awesome"
      },
      {
        "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css",
        "lazy": true,
        "bundleName": "bootstrap"
      }
    ], 
_

パラメータの説明：

"input"： "最初のステップのコマンドがbootstrapおよびfont-awesomeをダウンロードする場所"

"lazy"： "trueの値は、コンパイラがbootstrap.min.cssおよびfont-awesome.cssファイルをブラウザに送信されるコンパイル済みファイルに

"bundleName"： "distフォルダにある名前です"

  1. this 回答によると、index.htmlに次のscriptをheaderタグの下の_<base href="/">_

    _  <script>
     window.onload = function () {
      function loadScript(scriptUrl) {
        const script = document.createElement('script');
        script.src = scriptUrl;
        document.body.appendChild(script);
      }

      loadScript('font-awesome.js');
      loadScript('bootstrap.js');
    }

 </script>
_

注：window.onload = function ()は、ページがロードされていることを確認するために使用されます（これは、ファイルがdistは。js形式です;これはAngularをコンパイル）

  1. このコマンドを実行して、アプリケーションをコンパイルします

    ng build --extract-css = false --prod

注：ビルドでは-extract-css = falseを使用して。jsファイル

テスト

  • ブラウザーに移動し、それをdevに変更します（F12または右クリックして要素を検査）
  • [ネットワーク]タブを選択します
  • ハードリロードのためにCtrl + Shift + Rを押します

写真のようにbootstrap.jsとfont-awesome.jsが別々に読み込まれていることを確認できる必要があります。また、スタイルのないページを一瞬見ることができる=>これは、スタイルが適切に読み込まれた瞬間です。 DOMが読み込まれた後

enter image description here

4
Rzv Razvan

承認された回答にコメントを付けることはできないため、別の回答として重要なメモを提供します。そこに移動し、必要に応じてここから削除してください。したがって、受け入れられた回答は別のCSSファイルに基づいています。 Angular 6あなた できない なので、_--extract-css_で_-ec_の_package.json_フラグを_ng serve_に使用しないまたは_extractCss: true_ in _angular.json_ for serve configセクション。ただし、 this アプローチを使用して機能させることができます。次に、次のコマンドを使用して遅延スタイルをロードできます this _APP_INITIALIZER_を約束するアプローチ。

3
Halfist

ハッシュなしで遅延ロードされた.angular-cli.jsonでグローバルcss sciptsを使用したい人のために、次のスクリプトを記述しました（例：patch-ng-cli.js）

const fs = require('fs');

const stylesFileToPatch = "node_modules/@angular/cli/models/webpack-configs/styles.js";

const regex = /extraPlugins\.Push\(.*\}\)\)\;/;
const patchContent = `
        // PATCHED CONTENT START
        const globalStyles = utils_1.extraEntryParser(appConfig.styles, appRoot, 'styles');
        extraPlugins.Push(new ExtractTextPlugin({ filename: getPath => {
            const generatedFileName = getPath(\`[name]\${hashFormat.extract}.bundle.css\`);
            const name = generatedFileName.split(".")[0];
            const globalAppStylesConfigEntry = globalStyles.find(path => path.output === name);
            if (globalAppStylesConfigEntry && globalAppStylesConfigEntry.lazy){
                console.log(\`\${name} will not be hashed due to lazy loading\`);
                return \`\${name}.bundle.css\`
            }
            console.log(generatedFileName);
            return generatedFileName;
        }}));
        // PATCHED CONTENT END
`;


fs.readFile(stylesFileToPatch, (err, data) => {
    if (err) { throw err; }

    const text = data.toString();

    const isAlreadyPatched = !!text.match("PATCHED CONTENT");

    if (isAlreadyPatched) return console.warn("-- already patched --", stylesFileToPatch);

    console.log('-- Patching ng-cli: ', stylesFileToPatch);
    const patchedContent = text.replace(regex, patchContent);

    const file = fs.openSync(stylesFileToPatch, 'r+');
    fs.writeFile(file, patchedContent, () => console.log("-- Patching -- OK"));
    fs.close(file);
});

次に、package.jsonのnpmスクリプトを介してnpmをインストールした後、このスクリプトを実行します

"postinstall": "node ./patch-ng-cli.js",
2
riemerio