Ich entwickle eine Anwendung mit Angular2-seed. Ich versuche eine statische Demo zu erstellen, aber einige Ressourcen werden nicht gefunden.Generieren Sie statische Dateien von Angular 2 Seed Projekt

Die npm run build.dev erstellt die folgenden Dateien im Projektverzeichnis:

index.html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<base href="/"> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<title>Dashboard</title> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<!-- inject:css --> 
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css?1474900046924"> 
<link rel="stylesheet" href="/dist/dev/css/main.css?1474900046926"> 
<!-- More css... --> 
<!-- endinject -->

<sd-app>Loading...</sd-app> 

<script> 
// Fixes undefined module function in SystemJS bundle 
function module() {} 
</script> 

<script src="/app/system-config.js"></script> 

<!-- libs:js --> 
<script src="/node_modules/zone.js/dist/zone.js?1474900046920"></script> 
<!-- More libs... --> 
<!-- endinject --> 

<script> 
System.import('app/main') 
    .catch(function (e) { 
    console.error(e, 
     'Report this error at https://github.com/mgechev/angular2-seed/issues'); 
    }); 
</script>

erhalte ich folgende Fehlermeldungen:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///node_modules/bootstrap/dist/css/bootstrap.css?1474900046924 
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///dist/dev/css/main.css?1474900046926 
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/system-config.js 
Uncaught ReferenceError: System is not defined

Also, die Ressourcen nicht gefunden, weil der Browser sie im Stammverzeichnis zu finden versucht.

Allerdings, wenn ich das ändern:

<link rel="stylesheet" href="/dist/dev/css/main.css?1474900046926">

Um dies:

<link rel="stylesheet" href="./css/main.css?1474900046926">

Es funktioniert nur mit:

<link rel="stylesheet" href="/<absolute-path>/dist/dev/css/main.css?1474900046926">

Aber das ist wirklich ärgerlich und System nicht gefunden noch.

Eine Idee, wie es geht?

aktualisieren

ich bereits CSS-Assets und js Bibliotheken project.config.ts Datei am Injektion:

direkte Links zu Ihrer CSS

// Add `NPM` third-party libraries to be injected/bundled. 
this.NPM_DEPENDENCIES = [ 
    ...this.NPM_DEPENDENCIES, 
    { src: 'bootstrap/dist/css/bootstrap.css', inject: true}, 
    // More css and js files 
];

Quelle

2016-09-27 marc_aragones

nicht so sagen. Verwenden Sie stattdessen die Datei project.config, um Ihr CSS in Ihre index.html zu injizieren. Suchen Sie diese Datei im Ordner "tools/config".

Siehe: https://github.com/mgechev/angular2-seed/wiki/Add-external-scripts-and-styles

Quelle

2016-09-27 07:55:35 Pradeep

Ja, ich habe 'project.config.ts' Datei verwendet, um CSS und JS-Dateien zu injizieren. –

@marc_aragones, es scheint ein Problem zu geben, wie das Bootstrap-Paket konfiguriert ist. Wie kommt es, dass Sie den Ordner "bootstrap/dist/dev" haben? Mein Ordner ist wie "bootstrap/dist/css". Was ist die Bootstrap-Version, die du in deinem package.json hast? – Pradeep

'" bootstrap ":"^3.3.7 "' –

Sie nicht CSS-Dateien injizieren sollen, die direkt in Ihrem index.html in Ihrem Projekt sind. Main.css wird vom Seed-Code injiziert und der Bootstrap css sollte über project.config.ts hinzugefügt werden. Siehe: https://github.com/mgechev/angular2-seed/wiki/Add-external-scripts-and-styles

Quelle

2016-09-27 07:59:53

Generieren Sie statische Dateien von Angular 2 Seed Projekt

aktualisieren

Antwort

Verwandte Themen