Faul laden Anwendungsstile mit Angular CLI

Für alle, die globale CSS-Skripts in .angular-cli.json ohne Hash laden möchten, schrieb ich folgendes Skript (z. B. 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);
});

Führen Sie dieses Skript dann nach der Installation von npm über die npm-Skripts in package.json aus

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

Da ich die akzeptierte Antwort nicht kommentieren kann, werde ich sie als separate Anmerkung hinzufügen. Bitte verschieben Sie sie dorthin und löschen Sie sie bei Bedarf. Die akzeptierte Antwort basiert also auf einer separaten CSS-Datei. Da Angular 6 Sie können weder --extract-css- noch -ec-Flags in package.json für ng serve und extractCss: true in angular.json für serve config verwenden. Sie können jedoch this verwenden, damit es funktioniert. Dann können Sie Ihren Lazy-Style laden, indem Sie den this -Ansatz mit Promise für APP_INITIALIZER verwenden.

Ich weiß, dass dies ein alter Beitrag ist, aber ich habe kein vollständiges Beispiel gefunden, nur Fragmente, um Lazy Loading in Angular für CSS-Dateien oder js-Dateien zu implementieren. Dies ist eine Lösung mit Angular 7.1.4-Version und faulem Laden von font-awesome 4.7 und bootstrap 4.

1. Installiere bootstrap und font-awesome 

   npm install --save font-awesome bootstrap

2. Bearbeiten Sie Ihre Datei angle.json, um sicherzustellen, dass der Compiler getrennte Dateien im Ordner dist generiert

      "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"
         }
       ], 
   

Parametererklärungen:

"input": "der Ort, an dem der Befehl aus dem ersten Schritt Bootstrap und font-awesome herunterladen wird" 

"Lazy": "Durch den Wert von true wird sichergestellt, dass der Compiler die Dateien bootstrap.min.css und font-awesome.css nicht in die kompilierten Dateien einbettet Dateien, die an den Browser gesendet werden "

"bundleName": "ist der Name, den Sie im Ordner dist finden."

3. Gemäß this answer müssen Sie in index.html das folgende script innerhalb des header - Tags unter dem <base href="/"> hinzufügen.

     <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>
   

HINWEIS:window.onload = function () wird verwendet, um sicherzustellen, dass die Seite geladen wird (weil sich unsere Dateien im Format dist im Format .js befinden; dies ist der schnelle Weg für Angular) kompilieren)

4. Führen Sie diesen Befehl aus, um die Anwendung zu kompilieren 

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

HINWEIS: beim Build verwenden wir --extract-css = false, um .js -Dateien zu generieren

Testen

• Gehen Sie in den Browser und ändern Sie ihn in dev (F12 oder Rechtsklick und Element untersuchen).
• Wählen Sie die Registerkarte Netzwerk 
• Drücken Sie Strg + Umschalttaste + R, um die Seite neu zu laden

Sie müssen in der Lage sein zu sehen, dass die bootstrap.js und font-awesome.js wie im Foto separat geladen werden. Außerdem können Sie die Seite ohne style für einen Moment sehen. => Dies ist der Moment, in dem der Style gut geladen wird nachdem das DOM geladen ist