Using raw-loader inline (import "raw!....") leads to compilation error in ng build

[AlexBachmann]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Mac OSX Sierra

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
angular-cli: 1.0.0-beta.24
node: 6.7.0
os: darwin x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

Created a component and tried to load an XML File using the raw-loader of webpack:

import formXml from 'raw!./form.xml'

The log given by the failure.

Normally this include a stack trace and some more information.

ERROR in ./src/app/frontend/user/login/login.component.ts Module build failed: Error: /Applications/XAMPP/xamppfiles/htdocs/tekkl/src/app/frontend/user/login/login.component.ts (4,21): Cannot find module 'raw!./form.xml'.) at _checkDiagnostics (/Applications/XAMPP/xamppfiles/htdocs/tekkl/node_modules/@ngtools/webpack/src/loader.js:116:15) at /Applications/XAMPP/xamppfiles/htdocs/tekkl/node_modules/@ngtools/webpack/src/loader.js:141:17 @ ./src/app/frontend/user/user.module.ts 12:0-57 @ ./src async @ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js @ ./~/@angular/core/src/linker.js @ ./~/@angular/core/src/core.js @ ./~/@angular/core/index.js @ ./src/main.ts @ multi main

Mention any other details that might be useful.

The XML file is loaded without a problem using ng serve. It is during the compilation of ng build that this error is thrown.

---

Thanks! We'll be in touch soon.

[filipesilva]

Using explicit loaders isn't a usecase that the CLI caters for. It might work with some loaders and in some cases, but we don't test it, nor recommend it.

[blackholegalaxy]

So what's the recommanded way to load such content in angular-CLI?

[daggerok]

is there any updates?
i need somehow get raw content from files

[admosity]

I have this requirement as well and found out you can get it working by installing raw-loader and then use this kind of import format:

import * as testMd from 'raw-loader!./test.md';

Sample below of loading a raw markdown file:

I had a use case for rendering some markdown. I'm working on a PR for allowing experimental webpack configuration.

[FDIM]

in case someone wants to load svgs this way (e.g. sprite) it is possible to override loader that is configured in webpack:
let icons = require('!raw-loader!../../../styles/assets/icons/icons.svg'); (note the extra !)

[hjalmers]

In case someone stumbles upon this thread, a nicer way would be to add the following to typings.d.ts

declare module '!raw-loader!*' {
  const contents: string;
  export = contents;
}

and then just use

import * as staticFile from '!raw-loader!./demo.component';

[toch88]

Unfortunately it give me an error:
app.js:9 Uncaught ReferenceError: exports is not defined at app.js:9

after transpilation I am getting

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vertex_glsl_1 = __importDefault(require("!raw-loader!./shaders/vertex.glsl"));
console.log(`${vertex_glsl_1.default}`);
//# sourceMappingURL=app.js.map

[raulrene]

@FDIM 's version worked. For me declaring a module in typings.d.ts like @hjalmers suggested worked, but continued giving a compilation error.

[angular-automatic-lock-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.}