Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
If we want to create a service in an external library that we will install in other projects as a dependency how do we annotate the service?
Do we use use:
#Injectable({
providedIn: 'root'
}
)
Without adding a module configuration to go with it. What if we want the library's service to be registered in a lazy loaded module. How should that type of service be annotated and declared in the module loading the service?
For root loaded modules these are the steps
ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib
Remove everything except for my-lib.service.ts.
And make sure to update public-api.ts so that it only exports the service:
/*
* Public API Surface of my-lib
*/
export * from './lib/my-lib.service';
Then build the library and install it into other angular projects. Angular will dependency inject the service when it is declared in the constructor of directives.
I'm still curious how to go about registering the service in lazy loaded modules consuming the library and how should the service be annotated in these cases?
Related
This question already has answers here:
What is the meaning of the "at" (#) prefix on npm packages?
(4 answers)
Closed 4 years ago.
I'll see imports in React that look like:
import {object} from '#library/component'
What is the # referring to and what kind of import is this? Thanks!
These are scoped packages
Scopes are a way of grouping related packages together, and also affect a few things about the way npm treats the package.
The import is using a specifically named import vs the default import which can be used to namespace exports.
It's just not limited to React only but it's a part of npm and many other framework also use it (Angular etc). In addition to what Lance mentioned here are some advantages of it.
We don’t have to worry if the name exists - just name it.
We don’t have to worry that someone else will publish into our scope - only scope members have the permission.
We don’t have to switch the npm registry in order to install and publish the packages - we assign a specific registry for the scope.
It is possible generate a service with angular cli and add it as a provider in the app.module.ts in a single step or using an special option in the ng g service command?
When a execute:
$ ng g service services/backendApi
installing service
create src/app/services/backend-api.service.spec.ts
create src/app/services/backend-api.service.ts
WARNING Service is generated but not provided, it must be provided to be used
Next to it, (and according to the WARNING message) I usually add it to provider section on app.module.ts using the text editor:
#NgModule({
declarations: [
AppComponent,
...
],
imports: [
....
],
providers: [BackendApiService],
bootstrap: [AppComponent]
})
It is possible to do it with a single step, to automatize this?
Actually, it is possible to provide the service (or guard, since that also needs to be provided) when creating the service.
The command is the following...
ng g s services/backendApi --module=app.module
Edit
It is possible to provide to a feature module, as well, you must give it the path to the module you would like.
ng g s services/backendApi --module=services/services.module
Angular 6+ Singleton Services
The recommended approach for a singleton service for Angular 6 and beyond is :
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root',
})
export class UserService {
}
In fact the CLI --module switch doesn't even exist any more for registering a service at the app level because it doesn't need to modify app.module.ts anymore.
This will create the above code, without needing to specify a module.
ng g s services/user
So if you don't want your service to be a singleton you must remove the providedIn code yourself - and then add it manually to providers for a component or lazy loaded module. Doesn't look like there is currently a switch to not generate the providedIn: 'root' part so you need to manually remove it.
Looks like in Angular v11 and higher, we don't have option "s" anymore:
ng g service services/backendApi
or like that:
ng g service services/backendApi --flat --skipTests=true
Specify paths
--app
--one
one.module.ts
--services
--two
two.module.ts
--services
Create Service with new folder in module ONE
ng g service one/services/myNewServiceFolderName/serviceOne --module one/one
--one
one.module.ts // service imported and added to providers.
--services
--myNewServiceFolderName
serviceOne.service.ts
serviceOne.service.spec.ts
slight change in syntax from the accepted answer for Angular 5 and angular-cli 1.7.0
ng g service backendApi --module=app.module
Add a service to the Angular 4 app using Angular CLI
An Angular 2 service is simply a javascript function along with it's associated properties and methods, that can be included (via dependency injection) into Angular 2 components.
To add a new Angular 4 service to the app, use the command ng g service serviceName. On creation of the service, the Angular CLI shows an error:
To solve this, we need to provide the service reference to the src\app\app.module.ts inside providers input of #NgModule method.
Initially, the default code in the service is:
import { Injectable } from '#angular/core';
#Injectable()
export class ServiceNameService {
constructor() { }
}
A service has to have a few public methods.
In Angular 5.12 and latest Angular CLI, do
ng generate service my-service -m app.module
ng generate service userService
//shorthand for creating service
ng g s serviceName
**
When you fire this command it will automatically registered inside providers array.
**
providers: [
UserService
]
In Command prompt go to project folder and execute following:
ng g s servicename
run the below code in Terminal
makesure You are inside your project folder in terminal
ng g s servicename --module=app.module
This question already has an answer here:
How to make directives and components available globally
(1 answer)
Closed 6 years ago.
I am using ng-bootstrap with angular 2. I have it imported in my app.module and it's working fine.
I am lazy-loading another module and ng-bootstrap components are not working in that. They work if I import ng-bootstrap module again in the lazy-loaded module.
My question is: Do I need to import 3-rd party modules again in every module I write or there is some way of making them to work by some setting ?
PS: I am a newbie to angular 2
You have to import a module in whatever module you want to use components, directives or pipes of the imported module. There is no way around it.
What you can do is to create a module that exports several other modules (like for example the `BrowserModule` that exports `CommonModule`.
#NgModule({
declarations: [CoolComponent, CoolDirective, CoolPipe],
imports: [MySharedModule1, MySharedModule2],
exports: [MySharedModule1, MySharedModule2, CoolComponent, CoolDirective, CoolPipe],
})
export class AllInOneModule {}
#NgModule({
imports: [AllInOneModule]
})
class MyModule {}
This way you make everything exported by AllInOneModule available to MyModule.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a lot of js files in my View(html page),and I wonder if there is a way to
combine all my js reference to one ref .
You can use webpack to compile your javascript files and create a bundle file.
Webpack has a lot of documentation and tutorials.
If you're using .NET MVC, have a look at
http://www.asp.net/mvc/overview/performance/bundling-and-minification
If you are developing using plain JS & HTML, gulp could be an alternative with the gulp-bundle package.
var gulp = require('gulp'),
bundle = require('gulp-bundle');
gulp.task('bundle', bundle('./app/*.js', {
appDir: 'app',
buildDir: 'dist',
minify: true
}));
which would take all js files in the app directory, bundle them and minify to the 'dist' directory.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a script.js included in the website of my customer. This customer uses requirejs but he append script.js at the end of the body without explicitly using requirejs to load it.
In script.js i have libraries that are amd compatible and other not. The problem is that requirejs automatically load library which are amd. And i can't access them in my own library which is not amd compatible.
Do you have any idea ?
Thanks
RequireJs has the ability to "shim" configuration. In your requirejs configuration call, use the following (from the requirejs page). Backbone in this case is not a requirejs module and used as an example.
requirejs.config({
shim: {
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
}
})
You can then use Backbone just like any other module:
define(['backbone'], function (Backbone) {
return Backbone.Model.extend({});
});