bug when installing Angular-bootrstap - javascript

i am trying to install Angular bootrstap
https://ng-bootstrap.github.io/#/home
they say it is not compitable with the angular cli ver > 9
but they say
"
If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add ng-bootstrap library to it
"
i saw this video https://youtu.be/CflqAqLLBEE?t=64
he is using this line
ng add #ng-bootstrap/schematics
for him it is working fine
but for me and for others in the comments it make a bug when compile with ng s -o
i think it is because he is using angular 9 and i am using angular 10
i know angular 11 just published i am still in the beginning of understanding the concepts :)
i will try to install it the regular way with the cdn and stuff but it is not come with the same benefits as ng bootstrap :(
screenshot of the bug
https://drive.google.com/file/d/1r4dCncwwCl1SEDPy0FY_XyDtNWWdKSXH/view?usp=sharing

It's just create a new Angular Project and run
ng add #ng-bootstrap/ng-bootstrap
In your app.module you can import the module you want,e.g.
import {NgbPaginationModule, NgbAlertModule} from '#ng-bootstrap/ng-bootstrap';
NgModule({
declarations: [...],
imports: [
...
NgbDatepickerModule,
NgbAlertModule,
],
...
})
And use it
<ngb-alert>hello word!</ngb-alert>
<ngb-datepicker></ngb-datepicker>
<ngb-rating rate="8"></ngb-rating>
My Angular version is 10.0.2
I just update to Angular 11
ng update #angular/cli #angular/core --allow-dirty
And is working too

Related

Angular - Cannot find name CookieService

I've installed ngx cookie in my angular project, but unfortunatelly It's not recognized in my app.. I don't know what to do..
I saw in my node_modules folder ngx-cookie is there, but somehow it's not recognized in my app..
Here is my node_module:
It's also in my package.json
I worked with ngx-cookie before and I never had any issue, I simply used commands like this (In case I want specific version):
npm install ngx-cookie#2.0.1
And to latest version I used this command:
npm i ngx-cookie
But when I try to use it in my project it gaves me an error:
Any kind of help would be awesome
Thanks guys
Cheers!
You need to add CookieService in your module with CookieModule.forRoot() and as an import at the top of the page using import { CookieService } from 'ngx-cookie';

How to add node module to Angular project if is not schematics enabled?

Cannot use ng add and npm install doesn't meet the requirements which are somewhat unclear.
How do I add an node module to angular app/project? I've installed it with npm install so what's next?
I tried adding it into scripts array in angular.json but is caused just error "require is not defined"
If I understand correctly, the answer to "what's next" is this:
In your angular.json file, add the scripts to the scripts tag:
"scripts": [
"../node_modules/itsFolder/dist/js/its.js",
// Add any other scripts here
],
This includes the script as part of the build process.
Also, check out the answers here: Use external javaScript library in angular 4 application
Example:
import * as md5 from 'js-md5'
ngOnInit(){
console.log(md5(""));
}
Soruce: https://www.freecodecamp.org/forum/t/can-i-use-npm-packages-directly-inside-angular-2/132935/6
NOTE: I have tested this and it works. You can include any npm package and try in Angular 'ts' file, knowing what you are doing with it and how to do it.
Thank You!
Below steps might help you to start your first project in Angular. Nicely explained here
Go to https://nodejs.org/en/download/ and select npm version based on your OS (Windows or Mac)
To check npm is installed, run npm -v. it will give you installed npm version.
Another commands to install latest npm
npm install -g #angular/cli
To check available CLI commands type this.
Now you can use below commands to Create New Angular 4 Project
ng new first-project
It will create Angular project first-app and will install required npm packages.
To start project, you can use
ng serve
To create Angular 4 Component
ng g component cities
How to create Router for The Newly Component
To make access the new component, we have to make routing for it. Open and edit src/app/app.module.ts the add this import.
import { RouterModule } from '#angular/router';
imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot([ { path: '', redirectTo: 'newComponentName'},
{ path: 'componentname', component: ComponentName } ])
]
Next, replace all tags in src/app/app.component.html with this tag.
<router-outlet></router-outlet>

Unexpected value '...' imported by the module '...'. Please add a #NgModule annotation

Using Angular.
Steps:
Cloned this simple UI lib that demonstrates the current Angular package standards: https://github.com/jasonaden/simple-ui-lib
Created a new test app with ng new testApp
npm link the simple-ui-lib/dist
npm link simple-ui-lib in the testApp
Imported the example module from simple-ui-lib into testApp:
In the app.module.ts file:
import { BoxModule } from 'simple-ui-lib';
...
#NgModule({
...
imports: [
...
BoxModule
]
})
Webpack compiles fine, but I get this error in the browser and nothing loads:
compiler.es5.js:1540 Uncaught Error: Unexpected value 'BoxModule'
imported by the module 'AppModule'. Please add a #NgModule annotation.
I've tried:
Clearing my npm cache
Re-installing all node modules
Forcing all Angular modules to be the same version in both projects
Checked that all Angular modules are the same version in both projects
Checked that the TypeScript version is the same in both projects
Using other sample module packages instead of simple-ui-lib
Created an entirely new project with the same setup
Downgrading the rollup version used in simple-ui-lib to a build from January
If I console log the BoxModule, I can see the value exists and it seems to be registered as an #NgModule, so I'm confused about what this error is trying to tell me.
I've seen this error around in my searches, but it looks like they are almost always caused by a version mismatch between the library and the host application. In my case, the versions are the same.
Versions:
TypeScript: 2.2.0
#angular/cli: 1.0.4
#angular/common: 4.1.3
Any ideas?
Update: Investigating more, looks like this is a problem with #angular/cli itself. Opened a bug here: https://github.com/angular/angular-cli/issues/6429, but if you have any suggestions please let me know.
Try to use es6 compiler instead of es5.
I encountered similar issue before and chaging the compilation mode solved the problem
I also recommand you To use the last angular cli version and upgrade to angular 5

Import angularjs minified version

I'm using webpack, angular 1.x and have the following code
import angular from 'angular';
which works good, but the problem is that included file is too big (angularjs - 1.15mb). It will be better of course to use minified version of angularjs, but when I change code to
import angular from 'angular/angular.min.js';
it doesn't work properly, I mean it seems like angular.min.js doesn't export appropriate angular object.
What's the right way to use minified version of library?
I've found github issue regarding the problem, it's good idea to use exports-loader. My solution is:
webpack.config.js
...
// Add alias, so webpack looks for minified version of angular
resolve: {
alias: {
angular: "angular/angular.min.js"
}
}
...
// Add exports loader for angular
modules: {
loaders: [
{
test: /angular\.min\.js$/,
loader: 'exports?angular'
}
]
}
After this configuration we can easily import minified version of angular using the following command
let angular = require('angular');
// or es6 version
import angular from 'angular';
U can use angular cli and just type
ng build -prod
Then your minified file are in dist foldeer. It must be smaller, and u can upload that ini your public_html

Changing import package alias from angular2 to #angular

How can I change package alias to use in import?
I'll use ng2-bootstrap and it searches for #angular/core and I'm referencing it as angular2/core. It's crashing my screen!
Since Angular 2.0.0-rc.0, all dependencies have been in this new "#angular/" form rather than the "angular2/" one. If you want to revert back, you simply have to change your dependencies in your package.json file to the version of Angular 2 you want.
"dependencies": {
"angular2: "2.0.0-beta.17"
}
Angular 2.0.0-beta.17 is the latest version that uses the older angular dependency.

Categories