We Keep Coding

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

I want to use a raw-loader with my Angular 7 to import text files into my TypeScript source code. I've found plenty of information on the subject and spent a few hours trying to get it to work, but I can not get it to work.
I start by creating a new project
ng new example --defaults --minimal
I create a text file at /src/app/example.txt with the message "Hello World"
I then modify the app.component.ts file to import this text file.
import {Component} from '#angular/core';
import str from 'example.txt';
alert(str);
#Component({
selector: 'app-root',
template: ``,
styles: []
})
export class AppComponent {
}
I see a Cannot load module "example.txt" error in WebStorm, and when I run ng build and I get the following error.
ERROR in src/app/app.component.ts(2,17): error TS2307: Cannot find module 'example.txt'
So I Googled how to resolve this issue and I found this answer.
How to import JSON File into a TypeScript file?
I then add a /src/typings.d.ts file with the following contents, and this fixes the error in WebStorm.
declare module "*.txt" {
const value: string;
export default value;
}
I run ng build again and the error message changes to say it can't find the module.
Module not found: Error: Can't resolve 'example.txt' in 'C:\work\temp\example\src\app'
After some lengthy Googling, I figure that I need to add a raw-loader to Angular using a custom webpack configuration. Which leads me to this blog post with instructions.
https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21
So I install custom-webpack
npm i -D #angular-builders/custom-webpack
I edit my angular.json so that the build uses extra-webpack.config.js like so.
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
},
I create the extra-webpack.config.js in the same folder as angular.json with the following contents.
module.exports = {
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
}
]
}
};
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'
I have been unable to get past this point, and everything I've Googled so far seems to imply that this is how it's supposed to be done. Module not found error messages are very broad and I can not find anything specific to Angular 7.

I figured it out, and the answer was on the raw-loader documentation page. At the bottom it explains that you have to prefix the import path with raw-loader!
https://webpack.js.org/loaders/raw-loader/#examples
import {Component} from '#angular/core';
import str from 'raw-loader!./example.txt';
alert(str);
#Component({
selector: 'app-root',
template: ``,
styles: []
})
export class AppComponent {
}
I found this very difficult to figure out. You have to figure out how to get TypeScript to recognise the modules, then you have to configure Angular to use the loader and then you have to know how to correctly import the file.
None of the Google search results showed everything together as it related to Angular 7. So I found this turns up in search results for other people.

Working in Angular 9,10 with Ivy
So I finally got it working, from this comment on an issue, here's the steps I took, if anyone else is looking for help.
yarn add -D #angular-builders/custom-webpack raw-loader
Change angular.json to use #angular-builders/custom-webpack
...
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.partial.js"
},
...
"serve": {
"builder": "#angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "PROJECTNAME:build"
},
...
add file webpack.partial.js next to angular.json
module.exports = {
module: {
rules: [
{ test: /\.(txt|md)$/, loader: 'raw-loader' }
]
}
};
add type declaration in file ./types/textfile.d.ts
declare module '!raw-loader!*' {
const contents: string;
export = contents;
}
make sure that your tsconfig file knows about textfile.d.ts
{
"compilerOptions": {
...
"typeRoots": ["node_modules/#types", "./types"],
... // ^ this is important
}
import your text files using require syntax
import { Component } from '#angular/core';
const myText = require('!raw-loader!./my-text-file.txt');
#Component({
template: `<pre>{{myText}}</pre>`,
})
export class ChangeLogComponent {
myText = myText;
}
Done! The project should serve/build in angular 9,10 now

CKeditor component with angular 4

I am a newbie in Angular4
I want to integrate CKeditor in Angular4
As i follow this url but it's for Angular 2 not working in Angular 4.
As i have check there
System.config({
"map": {
"ng2-ckeditor": "npm:ng2-ckeditor",
},
"packages": {
"ng2-ckeditor": {
"main": "lib/index.js",
"defaultExtension": "js",
},
}
});
but there is no any option for System.config in Angular 4
Then i have integrated froala but it gives licence error and also not allow to configure and i tried but it's not effecting
How can i integrate CKeditor in Angular4?

I assume you use angular-cli to create your angular 4 project , you dont need system.config in angular-clli, that only used in system.js, and the code you have there is telling system.js where to find the ckeditor module.
in case you not clear, just check whether your project have an 'angular-cli.json' file, if there is, then you can follow the below steps:
use npm install ng2-ckeditor to install the ng2-ckeditor
in your app.module.ts, you should have something like this
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { CKEditorModule } from 'ng2-ckeditor';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CKEditorModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and then
in your index.html add
<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
inside head section. alternatively, you can save the js file inside your project, then insde .angular-cli.json file, add the file of that file into scripts array
then you are good to use ckeditor in your angular 4 project

Angular2 Grid error

I am a complete newbie to anything related Javascript, but I need to develop a rich webapp and I trying to learn Angular2 with Typescript.
I am using Angular 2 (version 2.4.2)
I am attempting to use the angular2-grid plugin
When I try to install it, I get this worrying result:
$ npm install angular2-grid
first-app#0.0.0 /home/nick/dev/angular2/first-app
├── UNMET PEER DEPENDENCY #angular/core#2.4.2
└── angular2-grid#0.11.2
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN angular2-grid#0.11.2 requires a peer of #angular/core#2.0.0 but none was installed.
If I ignore the warmings and then try and use it anyway, I get this error in the browser log:
Can't bind to 'ngGrid' since it isn't a known property of 'div'.
Here is my component:
import { Component } from '#angular/core';
import { NgGridModule } from 'angular2-grid';
#Component({
selector: 'app-mygrid',
template: `
<h1>My First Angular 2 App</h1>
<div class="grid" [ngGrid]="{\'max_cols\': 6, \'auto_resize\': true}">
<div class="grid-item" [ngGridItem]="{\'sizex\': 2, \'sizey\': 3}">
</div>
</div>
`,
styles: []
})
export class MygridComponent implements OnInit {}
Is the error in the log related to the warning when I tried to install the angular2-grid? Did it not install? How can I correct this?

Here is a workaround until the problem is fixed:
We inject the components in our src folder like it is our components (look like vendoring).
Create an angular2-grid folder somewhere in your src folder (for example, I placed it in src/app) and copy paste NgGrid.css, main.ts + components / directives / modules / interfaces folders
Import it in your app module : import { NgGridModule } from './angular2-grid/modules/NgGrid.module'; (The path is relative of where you put your angular2grid, here is on the root of app folder)
Use this lib as described in the repo's readme but adapt your dependency path (example in app.component.ts: import { NgGridConfig, NgGridItemConfig } from "./angular2-grid/interfaces/INgGrid";
We do it for the project: project with angular2-grid

Did you import the "NgGridModule" in your root module like below example?
//Root module
import { NgModule, enableProdMode } from '#angular/core'
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic'
import { BrowserModule } from '#angular/platform-browser'
import { MygridComponent } from './mygridcomponent'
import { NgGridModule } from 'angular2-grid';
#NgModule({
imports: [ BrowserModule, NgGridModule ],
declarations: [ MygridComponent ],
providers: [],
bootstrap: [ MygridComponent ]
})
export class AppModule { }
// main entry point
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Modules with Angular 2 CLI

I'm ramping up on Angular 2 and have created my project using Angular 2 CLI's
ng new <my project name>
However, I noticed that this project doesn't include an app.module.ts file by default.
When I try creating my own file and setting it up with my default settings
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
#NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I get a build error saying
... #angular/core has no exported member 'NgModule'.
Any ideas on how to get the module file to work with Angular CLI?
Thanks

May be due to reasons please make sure
please update all your #angular dependencies in package.json to at least "2.0.0-rc.5"
check this property in tsconfig.json file
moduleResolution": "node", // <-----
like here https://stackoverflow.com/a/38900745/5043867

Angular2: how to use bootstrap-tagsinput properly

I'm trying to use bootstrap-tagsinput library in my Angular2 project. The library is installed using package.json file:
"dependencies": {
...
"bootstrap-tagsinput": "^0.7.1",
...
}
Now I have a bootstrap-tagsinput folder in node_modules. I want to use tagsinput in a specific component. I saw there is a bootstrap-tagsinput-angular.js file in the node_modules/bootstrap-tagsinput/dist directory, but I can't managed to use it properly.
Am I supposed to add the JS file in my index.html so bootstrap-tagsinput will be available for all components? Or is there a way to import it just where it is needed?
In other way, is there a way to do something like this:
mycomponent.component.html:
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput"/>
mycomponent.component.ts:
import {Component, AfterViewInit} from '#angular/core';
import {TagsInputComponents} from 'bootstrap-tagsinput'; // Something like that?!?
#Component({
...
})
export class MyComponentComponent implements AfterViewInit {
ngAfterViewInit():any {
$('input').tagsinput('refresh');
}
}
thanks a lot for your help!

I can see some issue in using bootstrap-tags-input with angular batter to use ngTagsInput if you using angular.
Please see more details at : ngTagsInput , demo

the boostrap-tagsinput is a directive. So you can need somethings as follow:
Step 1: Import boostrap-tagsinput
import {TagsInputComponents} from 'bootstrap-tagsinput';
Step 2: Add to directives
#Component({
...
directives: [TagsInputComponents],
...
})
then use it in your view.
Hope this help!

For anyone looking for an easier solution. I ended up using angular2-tag-input
First you'll have to run your node command prompt
npm install angular2-tag-input --save
Then include it in your module
// In one of your application NgModules
import {RlTagInputModule} from 'angular2-tag-input';
#NgModule({
imports: [
RlTagInputModule
]
})
// In one of your component templates
<rl-tag-input [(ngModel)]="tags" placeholder="Testing placeholder"></rl-tag-input>
// In one of your component ts file
var tags= ['tag1','tag2','tag3']