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

Created on 6 Jan 2017  路  9Comments  路  Source: angular/angular-cli

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.

Most helpful comment

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 !)

All 9 comments

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.

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

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

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:
image

image

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

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 !)

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';

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

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

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

JanStureNielsen picture JanStureNielsen  路  3Comments

jmurphzyo picture jmurphzyo  路  3Comments

sysmat picture sysmat  路  3Comments

purushottamjha picture purushottamjha  路  3Comments

jbeckton picture jbeckton  路  3Comments