title: Using Angular CLI unable to load images on tomcat server without doing image bundling
body: <p>I am working on Angular 4/ Angular CLI project.</p>
  
  <p>Folder Structure on Tomcat server when deploy.</p>
  
  <pre><code>tomcat/
  ------Webapp/
  -----------assets/bgr.svg
  </code></pre>
  
  <p>WebApp folder</p>
  
  <p><a href="https://i.stack.imgur.com/WnJnR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WnJnR.png" alt="WebApp Folder"></a></p>
  
  <p>main.bundle.js</p>
  
  <pre><code>// module
  exports.push([module.i, ".myimg{\r\n    background: url('/assets/bgr.svg') no-repeat center center fixed;\r\n    background-size: cover;\r\n}", ""]);
  </code></pre>
  
  <p>Index.html</p>
  
  <pre><code>&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Cliskeleton&lt;/title&gt;
    &lt;base href="./"&gt;
  </code></pre>
  
  <p>base href is './' because i am using tomcat to deploy my application.</p>
  
  <p>angular.cli</p>
  
  <pre><code> "assets": [
          "assets",
          "favicon.ico"
        ],
  </code></pre>
  
  <p>app.component.css</p>
  
  <pre><code>.myimg{
      background: url('~/assets/bgr.svg') no-repeat center center fixed;
  }
  </code></pre>
  
  <p>i can use relative path ('../assets/bgr.svg') here. But relative path bundles image and placed it in dist folder and i have hundred of images so it makes dist folder very big. So I don't want to use relative path.</p>
  
  <p>I have tried 'assets/bgr.svg' also but i get an error as below.</p>
  
  <pre><code>ERROR in ./src/app/app.component.css
  Module not found: Error: Can't resolve './assets/bgr.svg' in 'D:\Research\CLISkeleton\cliskeleton\src\app'
   @ ./src/app/app.component.css 6:61-88
   @ ./src/app/app.component.ts
   @ ./src/app/app.module.ts
   @ ./src/main.ts
   @ multi webpack-dev-server/client?http://localhost:4300 ./src/main.ts
  </code></pre>
  
  <p>Is there any way such that i can place all my images in 'assets' folder and reference it. </p>