Angular-cli: [Q] Webpack: 3rd party dependencies? Plugins?

[Namek]

1. How do I install 3rd party dependencies when there is no angular-cli-build.js and src/system-config.ts? And there is no webpack config?
2. How do I plug in webpack plugins like autoprefixer for my CSS styles?

When referring to https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md there is no instruction for migration of the dependencies.

EDIT: any translation of https://github.com/angular/angular-cli/wiki/3rd-party-libs to the new webpack branch would be great. Or is this impossible yet?

[deebloo]

1. the build and system config file were just there for system js config. Since the cli is now using webpack you should just be able to import your dependencies in directing.

Ex:
npm i --save moment

import * as moment from 'moment';

Currently webpack is blackboxed. I know there have been discussions of allowing extensibility

[Daredzik]

but what if wanna use js not in npm ?

[Namek]

How about sortablejs?

To explain more, the package in npm is named sortablejs, however the important .js file is has name Sortable.js (and minified version - Sortable.min.js). Typings were named sortablejs. So previously I have imported it this way:

import Sortable = require('Sortable')

after configuring it in the angular-cli-build.json

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
       // ...
       'sortablejs/Sortable.min.js',
    ]
  });
};

and mapping it in src/system-config.ts:

const map: any = {
   // ...
   'Sortable': 'vendor/sortablejs/Sortable.min.js',
};

Plus, the typings had namespace Sortablejs.

[deebloo]

@Daredzik are you using a different package manager other then npm?

@Namek you should just be able to do import * as sortablejs from 'sortablejs';

[comfroels]

@deebloo I have a very similar question. However the package off npm I am using is StratumUI and is a SCSS/CSS library. How do I pull this in with the styleUrls? It seems like webpack has no idea that it's there since I'm not import-ing it into JS. I tried to also link to my main app.component.scss and @import it through there, but couldn't get any URLs to actually load it from the node_modules

EDIT: Mine is now solved and fix. To import SCSS files from node_modules with webpack you add a tilde (~) in front of the file path.... If you want to use StratumUI for example @import '~stratumui/css/main'

[Namek]

@deebloo sounds cool, but it doesn't work.

Module '"C:/Users/Namek/_play/ng-test_webpack_cli/node_modules/@types/sortablejs/index"' resolves to a non-module entity and cannot be imported using this construct.

Installation:

npm install --save sortablejs
npm install --save @types/sortablejs

I tried adding sortablejs into tsconfig.json -> types

[Daredzik]

@deebloo no i dont use other package manager, but i have standalone js library wich i want to use. I store it in vendor directory.
Now how i can include it ?

[deebloo]

if it is something used as a global you can put it in the public directory and include it in your index.html file. Or put it somewhere in src and then at your root component say import 'patch/to/my/file'

[pablodenadai]

Dupe https://github.com/angular/angular-cli/issues/1551

[filipesilva]

Thanks @deebloo for the great answers in this issue!

There's a couple of different issues being discussed here:

• Instructions for adding third party libs have been added to the README (see https://github.com/angular/angular-cli/issues/1551)
• Globally loading of CSS is being addresses in https://github.com/angular/angular-cli/pull/1633
• Globally loading JS is still being tracked in https://github.com/angular/angular-cli/issues/1717

I'm closing this issue because there are others that better capture the different parts of the problem.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}