Angular-cli: How to configure Webpack loaders

[httpdigest]

This is just a simple question, I hope: How do I configure webpack 2 loaders with angular-cli?
I need to pack also .json files using the file loader. But whenever I try to import "my.json"; the ng build process exits with You may need an appropriate loader to handle this file type.
But when I run ng init projectname there is no webpack.config.js to edit.

[mirwaqaskhan]

@httpdigest if you find anything on this, please let me know too, i will do the same if i find something related on this.
thanks

[httpdigest]

I just had a look at angular-cli's internal sources (under ~/AppData/Roaming/npm/node_modules/angular-cli/models/webpack-build-common.js), and it looks like it already is able to handle .json files.
I just needed to npm install the json-loader.

EDIT: I don't know, however, how one can augment or completely replace the internal webpack configuration file.

[httpdigest]

Oh, the actual use-case for me happened to be able to just copy some files into the dist folder.
We apparently did this in the past via the webpack file or raw loader and doing a require() on it so that webpack would pick the file up/recognize it.
Is there any other way to tell angular-cli and ultimately webpack to pick up files and copy them to the dist folder?

[ciesielskico]

Put them in the src/assets folder and in your angular-cli.json have this config:

"apps": [
        {
            "root": "src",
            "outDir": "dist",
            "assets": "assets"
....

[httpdigest]

Thanks alot! Did not know about that assets folder.
Is there a way to avoid angular-cli creating the "assets" folder inside the "dist" folder, but instead just copy the content of src/assets into dist, much like cp src/assets/* dist/ ?

[ciesielskico]

I don't know any option like that. Although I've read somewhere that when nearing final status, the CLI team will look into ways to implement addons or more customization options, so I think it is just a matter of time.

[httpdigest]

Okay, thank you. I will stay with the best-practice approach of having the "assets/" folder, then.

[sdeuvarow]

Hi, sorry if the question is too stupid, but after moving the json files to the assets folder, how do I import them in my component?

I'm trying so:

import * as translationEN from '../assets/resources/locale-en.json'; import * as translationES from '../assets/resources/locale-es.json';

But I'm getting errors:

ERROR in [default] ....\workspaceFrontend\src\app\app.component.ts:10:31
Cannot find module '../assets/resources/locale-en.json'.

ERROR in [default] ....\workspaceFrontend\src\app\app.component.ts:11:31
Cannot find module '../assets/resources/locale-es.json'.

Folders structure:
workspaceFrontend\src\app...
workspaceFrontend\src\assets\resources...
workspaceFrontend\src\assets\fonts...
workspaceFrontend\src\assets\images...
workspaceFrontend\src\assets...

ng --version
angular-cli: 1.0.0-beta.18
node: 6.9.1
os: win32 x64

tsc -v
Version 2.0.0

npm -v
3.10.6

thanks!

[dotansimha]

There is a solution for custom loaders? I wan't to use custom loader for a specific type of files.
Can't use this at the moment because angular-cli does not let you change the Webpack config file.
My only solution at the moment is to use myLoader!myFile when importing the file...

[tschuege]

@sdeuvarow Did you find a solution to that problem? I want to load the .json files containing the translated strings dynamically at runtime using the angular-cli.

[sdeuvarow]

Hi tschuege, I import the files by:

var enlang = require("../assets/lang-en.json");
var eslang = require("../assets/lang-es.json");

Then I'm using them so:

    this.locale.addLanguage('en');
    this.localization.addTranslation('en', enlang);

    this.locale.addLanguage('es');
    this.localization.addTranslation('es', eslang);

I think that is all I do ..

[tomof]

@sdeuvarow I also faced the same problem, but I was able to solve it with reference to this article. It may be too late ..

TypeScript Officeal Document: https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#wildcard-character-in-module-names

[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._}