テーマ設定のために<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ファイルをコンパイルするにはどうすればよいですか?代わりに試すことができる別の/より良いアプローチはありますか?
追記:
4.2.4
1.3.0
の使用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
"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
に出力されます。
これは古い投稿であることはわかっていますが、Angularに遅延読み込みを実装するフラグメントのみの完全な例をCSSファイルまたはjsファイル。これはAngular 7.1.4バージョンとfont-awesome 4.7との遅延読み込みのソリューションです=)ブートストラップ4
bootstrapとfont-awesomeをインストールします
npm install --save font-awesomeブートストラップ
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フォルダにある名前です"
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をコンパイル)
このコマンドを実行して、アプリケーションをコンパイルします
ng build --extract-css = false --prod
注:ビルドでは-extract-css = falseを使用して。jsファイル
テスト
写真のようにbootstrap.jsとfont-awesome.jsが別々に読み込まれていることを確認できる必要があります。また、スタイルのないページを一瞬見ることができる=>これは、スタイルが適切に読み込まれた瞬間です。 DOMが読み込まれた後
承認された回答にコメントを付けることはできないため、別の回答として重要なメモを提供します。そこに移動し、必要に応じてここから削除してください。したがって、受け入れられた回答は別のCSSファイルに基づいています。 Angular 6あなた できない なので、_--extract-css
_で_-ec
_の_package.json
_フラグを_ng serve
_に使用しないまたは_extractCss: true
_ in _angular.json
_ for serve
configセクション。ただし、 this アプローチを使用して機能させることができます。次に、次のコマンドを使用して遅延スタイルをロードできます this _APP_INITIALIZER
_を約束するアプローチ。
ハッシュなしで遅延ロードされた.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",