I'm trying to include hello.js in my angular 5.0.2 project.
Below is the cli version
I have added the script file to the angular-cli.json file.
"scripts": [
"./js/hello.js",
"./js/hello.polyfill.js",
]
The path is correct as i'm also loading style in the angular-cli.json which are loading fine.
In my service file i'm importing hello as below:
declare var hello: any;
declare var gapi: any;
but when i run ng build the console shows the error:
Cannot find module 'hello'.
If i load the files through script tag in the index.html the code and imports works fine .Only when i add it to the angular-cli.json file it stops working.
Please guide
Thanks
Edit the scripts array in angular-cli.json or angular.json.
You must also specify the assets folder:
"scripts": [
"./assets/js/hello.js",
"./assets/js/hello.polyfill.js",
]
Related
I am trying to import a module from a generated Angular library bundle located inside a vendor subfolder under src/.
index.html
<head>
...
<script type="text/javascript" charset="utf-8" src="./vendor/example/bundles/example.umd.js"></script>
</head>
Nevertheless, I am having some troubles importing module from this in my app.module.ts. Please, any idea of how to do it?
It seems that #angular/core and #angular/common peerDependencies of angular library should also be bundled inside script to work correctly.
I will appreciate any kind of help
You shouldn't add a <script> tag that refers to a local file because this local file won't be included in the build.
Instead, use the scripts configuration section of the angular.json file, like this:
"scripts": [
{ "input": "src/vendor/example/bundles/example.umd.js" }
]
This will embed the example.umd.js file inside a dedicated file of the Angular's build. As it's packaged as UMD, an object will be attached to window which contains the API of the library you are importing.
In order to stop TypeScript for complaining about a non-existent variable, just add this: declare var example; (replace example with the real name of the global object).
I have an Angular 7 app that use pure javascript files from the node_modules folder. All files are referenced correctly but when I run the next command:
ng serve -o
#or
ng build #without any advanced configuration
But when I run the build command:
ng build --configuration=pre
The output deployed app doesn't show any error but the library is not loaded and executed correctly.
Is there any available configuration to load that library from node_modules in order to use within our Angular 7 projects?
For sake of reference the library used is: mapbox-gl-draw-rectangle-mode
I think you need to add the references to this libraries in angular.json file in the section "scripts" inside "build -> options" key as follow:
"build": {
...
"options": {
...
"scripts":[
"{path to js file in node_modules or where is storage}"
]
}
}
For the first time I am using Yarn. I have installed the latest version of Laravel Boilerplate (http://laravel-boilerplate.com/) and there is used Yarn.
My need is to include the JS library DataTables (https://datatables.net/).
Unfortunately I am new to Yarn and I am not sure if I am making everything right, because I get the error:
[Show/hide message details.] ReferenceError: $ is not defined
which is on the this line:
$(document).ready(function() {
...
This is telling me that it cannot find the jquery library, but it should be there.
Here is the webpack.mix.js code:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.setPublicPath('public');
mix.sass('resources/sass/frontend/app.scss', 'css/frontend/frontend.css')
.sass('resources/sass/backend/app.scss', 'css/backend/backend.css')
.js('resources/js/frontend/app.js', 'js/frontend/frontend.js')
.js([
'resources/js/backend/before.js',
'resources/js/backend/app.js',
'resources/js/backend/after.js'
], 'js/backend/backend.js')
.extract([
'jquery',
'datatables.net-dt',
'bootstrap',
'popper.js/dist/umd/popper',
'axios',
'sweetalert2',
'lodash',
'#fortawesome/fontawesome-svg-core',
'#fortawesome/free-brands-svg-icons',
'#fortawesome/free-regular-svg-icons',
'#fortawesome/free-solid-svg-icons'
]);
if (mix.inProduction() || process.env.npm_lifecycle_event !== 'hot') {
mix.version();
}
Every time I call the command "yarn prod" in order to create the CSS and js files, but the DataTables are not working.
Did I miss something?
Thanks in advance!
It's not because of yarn. Yarn is a package manager, it doesn't run any part of your application's code so cannot generate an error like yours. Yarn is just for downloading packages and manage their dependencies.
Then comes Laravel Mix for you, which is just a wrapper around Webpack. Webpack reads your application code, handles your require and import commands in your .js files and then generates your bundles.
How to make it work:
I suppose you did run the yarn command (without params) in your project root once when you installed Laravel Boilerplate. There should be a lot of packages inside your node_modules directory (more than 900).
Then you did run yarn add -D datatables.net-dt also. Now you should have a datatables.net and a datatables.net-dt folder inside node_modules.
I see you've added datatables.net-dt in your webpack.mix.js, this is OK! You don't need any other require( 'datatables.net-dt' )( window, $ ); as said in the documentation. That one line in your webpack.mix.js is enough! DataTable will be inside your vendor.js.
Now create an example table with attribute id="example" in your index.blade.php then add this code to the bottom of your resources\js\frontend\app.js:
$(document).ready(function() {
$('#example').DataTable();
});
Then run yarn dev to let Webpack generate your bundles (compiled js files) and view your site in the browser. Following these, it should be working on a fresh install install of Laravel Boilerplate, without any error. I've just tested id now, works like charm.
Your possible bug:
$ is not defined tells that some part of your code is trying to use jQuery before it has been loaded.
It's important that you must write your codes using jQuery (shortened $) inside your resources\js\frontend\app.js or in a separate .js which is later required/imported into this file! It's because jQuery and other vendor packages like DataTable are stored in vendor.js, which must be loaded before any calls to them.
So don't use custom <script> tags in your html's <head> tag for your app code because that will be loaded and executed before any other defined in the bottom of your <body> tag!
Have a look at this file resources\views\frontend\layouts\app.blade.php. In the bottom of the body tag you'll see this:
<!-- Scripts -->
#stack('before-scripts')
{!! script(mix('js/manifest.js')) !!}
{!! script(mix('js/vendor.js')) !!}
{!! script(mix('js/frontend.js')) !!}
#stack('after-scripts')
Your resources\js\frontend\app.js and all its imported scripts will be compiled to this js/frontend.js file.
How jQuery is imported in Laravel Boilerplate:
This is done well by default, you don't have to bother with it. Open your resources\js\bootstrap.js and see these two lines:
import $ from 'jquery';
window.$ = window.jQuery = $;
This file will then imported by frontend/app.js. So write your code here and you'll be fine...
PS.: If this doesn't helps you to make it work, you should edit your question and provide more info on your sources. A screenshot for example taken from your Chrome DevTools, showing the lines of your JavaScript where the error occurred.
I'm using roots (http://roots.cx) and I want to include a library from a node_module in my page. I've npm install foo and the library is on disk.
I've tried adding foo to the extensions in app.coffee and restarted the watcher but the path it's rendering is to the node_modules folder which does not resolve from the browser.
extensions: [
js_pipeline(files: 'node_modules/foo/lib/foo.js', 'assets/js/*.coffee'),
css_pipeline(files: 'assets/css/*.styl')
]
and in the page source I get
<script src='node_modules/foo/lib/foo.js'></script>
What is the correct way to include a library from a node module?
Try this instead with the ./ since it's only a file and not a module, like this:
extensions: [
js_pipeline(files: './node_modules/foo/lib/foo.js', 'assets/js/*.coffee'),
css_pipeline(files: 'assets/css/*.styl')
]
Otherwise try to extract or copy the file from the node_modules and put it in a separate folder
I am trying to use the r.js optimizer to build all of my dependencies into a single file. Here is my file structure:
app
bin
src
css
main.css
js
libs
raphael-2.1.0
eve.js
raphael.amd.js
raphael.core.js
raphael.svg.js
raphael.vml.js
jquery-1.8.0.js
require-2.0.5.js
main.js
build.js
index.html
r.js
Here are the contents of build.js:
({
baseURL: 'js',
dir: '../bin',
paths: {
'jquery': 'libs/jquery-1.8.0',
'raphael': 'libs/raphael-2.1.0/raphael.amd'
},
name: 'main',
removeCombined: true
})
The 'libs/raphael-2.1.0/raphael.amd' dependency loads everything else in the raphael-2.1.0 directory. The app works as expected if I visit app.local/src, it loads the modules at runtime via require with a single script tag in my index.html file like this:
<script src="js/libs/require-2.0.5.js" data-main="js/main.js" type="text/javascript" charset="utf-8"></script>
However, if I try to run the command node r.js -o src/build.js from app, I get an error like:
Error: ERROR: module path does not exist: /app/src/main.js for module named: main. Path is relative to: /app
at /app/r.js:14215:31
... and everything gets copied into bin "as is". If I add 'main': 'js/main' to the paths object, then r.js can't find jquery and raphael, if I ad js/ to the jquery and raphael paths then libs/raphael-2.1.0/rapheal.amd's dependency declarations are wrong. If I update those, then everything builds as expected, but now the app at app.local/src/index.html is broken. Also, I thought that was the point of having a baseURL property in the build file no? It looks to me like baseURL is being ignored. What am I doing wrong?
As most things in JavaScript, the baseUrl setting is case sensitive. Change URL to Url and see if it helps.