Please provide us with the following information:
Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Mac OSX Sierra
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
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'
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
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.
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:
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._
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!
)