Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 7 years ago
Reactions:1
Comments:9 (3 by maintainers)

Top GitHub Comments

16reactions

FDIMcommented, Jan 19, 2018

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

16reactions

blackholegalaxycommented, Jan 28, 2017

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

Top Results From Across the Web

How to configure raw-loader in Angular 7 to load text files?

I try building again ng build but get the same error. Module not found: Error: Can't resolve 'example.txt' in 'C:\work\temp\example\src\app ...

raw-loader - webpack - JS.ORG

A loader for webpack that allows importing files as a String. ... By default, raw-loader generates JS modules that use the ES modules...

webpack/webpack - Gitter

One thing I'm stuck on is inline overrides. I had this in my unit tests: const samples = require.context("!!raw-loader!./test-data", false, /xml$/i); , which ......

Cannot find module" when using inline webpack loaders with ...

Trying to use a webpack raw-loader for an HTML file inline resulted in an error: TS2307: Cannot find module. Here's how to fix...

Angular 5 Tutorial: Guide to Your First Angular 5 App - Toptal

Some developers will tell you that it's better to use React and build your own components without much additional code. But that may...