2

I am developing an application using Angular2-seed. I am trying to make a static demo but some resources are not found.

The npm run build.dev creates the following files in the project directory:

project |-- dev |-- app |-- app files... |-- css |-- main.css |-- other css files... |-- index.html |-- tsconfig.json

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>

I get the following error messages:

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

So, the resources not found because the browser tries to find them in the root directory.

However, if I change this:

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

To this:

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

It only works with:

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

But this is really annoying and System is not found yet.

Any idea of how to do it?

Update

I am already injecting css assets and js libraries using project.config.ts file:

// 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
];
marc_aragones
  • 4,344
  • 4
  • 26
  • 38

2 Answers2

0

Don't put direct links to your CSS like that. Instead use project.config file to inject your CSS in your index.html. Look for this file under "tools/config" folder.

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

Marcel Hoekstra
  • 1,334
  • 12
  • 19
Pradeep
  • 3,258
  • 1
  • 23
  • 36
0

You should not inject css files that are in your project directly in your index.html. Main.css is injected by the seed and bootstrap css should be added via project.config.ts. See : https://github.com/mgechev/angular2-seed/wiki/Add-external-scripts-and-styles

Marcel Hoekstra
  • 1,334
  • 12
  • 19