We Keep Coding

ES6 Modules : Importing a module in an Angular component

I have an ES6 module where I am exporting a library. I want to be able to use this module in an Angular component. I cannot have the library files locally within my Angular app, neither can I publish the library as an NPM package.
Can I host the module in a dev server, and use the server URL to import the module in my Angular component?
I tried things like
component.ts
import * as lib from "...url";
or adding this in index.html
<script src = "..url"/>
Neither of them have worked. What can I try next?

Using NPM packages client-side with nuxt

I'm very new to nuxt and javascript and I'm trying to figure out how to use my app's dependencies client-side. I have them listed in my nuxt.config.js and installed with npm. I also have a file in the /plugins directory that imports them (not sure if this is good or not). Here is where I run into trouble: I have two scripts located in my /static directory that need to take advantage of my npm packages. Putting an import statement in those scripts causes an error. Importing the packages in the script section of the page vue file also doesn't work. How can I use npm packages in scripts that are included in pages client-side?

Can you provide a more information, about which kind of error is happening and which kind of packages did you try to install?
In this example I am going to show you how I included in my nuxt project npm package vuelidate
after installing vuelidate:
add to nuxt.config.js
plugins: [
{ src: "~/plugins/vuelidate", mode: "client" },
],
create vuelidate.js file in my plugin folder (plugin/vuelidate.js)
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate);
after that I can use vuelidate in my .vue components (no always necessary to import something because in our 2 stage Vue.use(Vuelidate) we already installed vuelidate globally)
<script>
import { required, minLength } from "vuelidate/lib/validators";
export default {
name: "OrderByLinkForm",
components: {},
...
};
</script>

import js module in js file in vuejs2

I've started a project with the new vue-cli 3.0 and I've added the qwery npm module in node package.json
npm i qwery
and in my-file.js which is at same level as main.js I import it the following way:
import {qwery as $q} from "qwery"
The build goes ok however in the browser $q is undefined and webpack has imported it as qwery__WEBPACK_IMPORTED_MODULE_8__.
Clearly I'm not doing it the right way can somebody give me a hint what I'm doing wrong?

You need to import it like this
import $q from 'qwery';

Importing just DefaultUrlSerializer class into an Angular project without entire router module

Following import statement pulls entire router module into the final webpack bundle.
import { DefaultUrlSerializer } from '#angular/router';
Is there a way to just import the DefaultUrlSerializer without other irrelevant module ?
I'm using Webpack module builder and Angular Cli for AOT/production builds.

No, you cannot do that unless you build the Angular yourself. The npm package doesn't ship modules separately, but as a one bundle in the UMD format:
node_modules
#angular
router
bundles
router.umd.js
No matter how you import DefaultUrlSerializer, webpack will include the contents of the entire router.umd.js in the final build as it can't extract code from a file.

Injecting a module into angular as module not found

I can't seem to inject a module into my angular app.
I am trying to import the following module which is installed through bower using:
bower install angular-pagedown --save
This seems to load fine within the bower-components folder which is in the following folder structure:
clinet
------app
---------bower-components
-------------------angular-pagedown
-------------------pagedown
When I try inject the module as it says in the instructions using 'ui.pagedown' which is indeed the name of the module, I use the following code in app.js:
import _Auth from '../components/auth/auth.module';
import account from './account';
import admin from './admin';
import navbar from '../components/navbar/navbar.component';
import footer from '../components/footer/footer.component';
import main from './main/main.component';
import questionsCreate from
'./questionsCreate/questionsCreate.component';
import questionsShow from './questionsShow/questionsShow.component';
import constants from './app.constants';
import util from '../components/util/util.module';
import socket from '../components/socket/socket.service';
import './app.scss';
angular.module('filQuestionsApp', [ngCookies, ngResource, ngSanitize,
'btford.socket-io', uiRouter,
uiBootstrap, _Auth, account, admin, 'validation.match', navbar,
footer, main, questionsCreate,
questionsShow, constants, socket, util, 'ui.pagedown'
])
I seem to get the following error when trying to use the module:
Module 'ui.pagedown' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I seem to be doing something really wrong with bower and angular together, I'm also getting 400 errors in terms of formatting and I'm not sure on the injection process.

How angular-pagedown work:
bower install angular-pagedown --save
This will also install pagedown dependencies.
Import these files in your HTML:
pagedown/Markdown.Converter.js
pagedown/Markdown.Sanitizer.js
pagedown/Markdown.Extra.js
pagedown/Markdown.Editor.js
angular-pagedown/angular-pagedown.js
angular-pagedown/angular-pagedown.css
If you're using a build tool like grunt/gulp's main-bower-files, you don't need to import the files manually.
But add this in your bower.json
"overrides": {
"pagedown": {
"main": [
"Markdown.Converter.js",
"Markdown.Sanitizer.js",
"Markdown.Extra.js",
"Markdown.Editor.js",
"wmd-buttons.png"
]
}
}
Include dependency in your app angular.module("yourApp", ["ui.pagedown"]);