How do I get angular 2 cli to copy css and other necessary files to dist folder

Question

I have set up an angular 2 typescript solution and added the material angular 2 npm package.

npm install -g angular-cli
ng new PROJECT_NAME
cd PROJECT_NAME
ng build

Everything is nicely copied from my scaffolded source folder to a dist folder.

Then I add the angular 2 material npm package:

npm install ng2-material --save

But what do I do from here? How do I tell the build command to copy the necessary files from node_modules to the dist folder.

And where is the magic located that makes sure that these files get copied to the dist/vendor folder?

<body>
  <timer-app>Loading...</timer-app>

  <script src="vendor/es6-shim/es6-shim.js"></script>
  <script src="vendor/systemjs/dist/system-polyfills.js"></script>
  <script src="vendor/angular2/bundles/angular2-polyfills.js"></script>
  <script src="vendor/systemjs/dist/system.src.js"></script>
  <script src="vendor/rxjs/bundles/Rx.js"></script>

  <script src="vendor/angular2/bundles/angular2.dev.js"></script>
  <script src="vendor/angular2/bundles/http.dev.js"></script>
  <script src="vendor/angular2/bundles/router.dev.js"></script>
...

My package file ends up looking like this: https://gist.github.com/nikolaj-kaplan/e85d5805fd67c3ba3f1f

I hope my confusion comes from a lack of knowledge about npm. And not angular cli. (Because more people will be able to help me). But I haven't got a whole lot of experience in either.

Edit:

I did like this: https://stackoverflow.com/a/35900837/564623

module.exports = function (defaults) {
  var app = new Angular2App(defaults, {
      vendorNpmFiles: [
          'node_modules/ng2-material/dist/ng2-material.css'
      ]
  });
  return app.toTree();
}

Now my files are copied. Still don't understand how the other files in the dist-folder gets copied. The vendorNpmFiles array was empty.

I don't know if angular-cli can already do this, but i use gulp after npm update to copy the vendor files from the node_modules folder :) — Poul Kruijt
– Poul Kruijt, Commented Mar 11, 2016 at 19:50
All the script files from my html-snippet above are copied from the nodes_module folder to the dist-folder when I call the ng build or ng serve. But I can't figure out how this happens and how I get it to work with new modules. — Nikolaj
– Nikolaj, Commented Mar 11, 2016 at 22:21
@Nikolaj: I'm facing the same problem - need to use typescript-collections and bootstrap, but it doesn't copy its fileds to dist/vendor/whatever. Did you figure it out? I believe the installed package needs a packages.json specially crafted to make this work out of the box - I saw some specific properties in some packages that work, namely _location, _installable, etc, which seems to affect this behaviour. +1 — jweyrich
– jweyrich, Commented Apr 7, 2016 at 16:10

Antoine · Accepted Answer · 2016-04-27 09:46:16Z

3

You don't need node_modules/ prefix, vendorNpmFiles automatically search in node_modules

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'ng2-material/dist/ng2-material.css'
    ]
  });
};

answered Apr 27, 2016 at 9:46

Antoine

731 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jason Swett Over a year ago

In case it's not clear, this is angular-cli-build.js (if I'm not mistaken).

Jason Swett Over a year ago

And if it helps, I believe the link tag would be: <link rel="stylesheet" href="vendor/ng2-material/dist/ng2-material.css">.

Antoine Over a year ago

Yep in angular-cli-build.js, sorry ;-)

Hantsy Over a year ago

The latest angular-cli switched to webpack, there is no angular-cli-build.js now.

Pablo Ezequiel Inchausti · Accepted Answer · 2017-02-27 23:39:35Z

1

With a project created with angular-cli you have the file .angular-cli.json where you should add the css in the "styles" section array, for example, to include the bootstrap css inside node_modules I add the following line:

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

I hope this help you

edited Feb 27, 2017 at 23:39

answered Feb 27, 2017 at 23:17

Pablo Ezequiel Inchausti

21.3k7 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

How do I get angular 2 cli to copy css and other necessary files to dist folder

Edit:

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit:

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related