I am running browserify on my code, it is as follows:
import './app';
//——————————————————————————————————————————————————//
// Components
//——————————————————————————————————————————————————//
import './components/_ntToggleClass';
app is simply
const app = angular.module('app', []);
while files in components are, well, components. But they are using forementioned app:
app.directive('ntToggleClass', () => {
... }
When I put everything in one file by hand, all worked. But after I used browserify on this, I am getting
Uncaught ReferenceError: app is not defined
When I look inside the code, both var app and the directive are there.
I've slapped together a quick sample on github. This will give you a working repository that runs browserify.
I've removed my previous comments, as I think the repo should answer your questions.
edit: I think I just now got your question, you were trying to create a global variable app to just be used in each other file?
This is impossible when using browserify, any variable that isn't required in your file will be returning undefined.
When using browserify, just require whatever you need.
A friend of mine came with help ;-)
I am using Babel (I thought thas was obvious, since I used import not require) for my coding (Babelify with es2015, to be precise), so, as I have import, I need export too.
Solution is very simple, all I had to do is to put
export default app;
at the end of my app.js file and then import it using
import app from '../app';
into my directives/components etc.
I think it's about definition ordering.
const app = angular.module('app', []);
This part should be top of below part:
app.directive('ntToggleClass', () => {
... }
Related
So, I know there are a lot of similar questions here, I read all, as well as several web articles. Still, I cannot find a solution. I simply want to import es modules from lodash. Currently using rollup via codekit app.
Simply doing one of the following, will always end up in an empty js file:
import each from 'lodash-es';
import { each } from 'lodash-es';
import each from 'lodash-es/forEach';
import each from 'node_modules/lodash-es';
They all will end with the empty (currently compiling in iife):
(function () {
'use strict';
})();
Why?
If the function isn't used in the code in any way, it will get stripped from the production output due to a process called tree shaking. It's an optimization that looks at code imports and then eliminates any unused code as a result.
It turns out that was the case here as each wasn't used and it was imported only.
sorry a rookie question, I am using react and typescript (via create-react-app) and if I have some totally non-UI javascript code (a module I am working on to work with some REST api), something along the lines like this:
src/lib/rest.tsx
export const getUser = async function (
username: string,
) {
let response = await fetch(`http://localhost:3000/api/auth/`, {
username
});
return response;
};
I am wondering how can I test this function locally in a REPL or browsers's dev tools, before putting it into real use. I think I have two difficulties right now:
webpack seems not even packaing this module into the code now, if I open Chrom's dev tools I can see other tsx files but not this one, simply becasue I am not importing this module anywhere I think.
even if it is packaged I dont know how to import this module in a REPL or the dev tool console because first I dont know what is the correct syntax here, Would it be import src/lib/rest.tsx? Also seems I cannot import any module in a REPL because import can only happen inside a module.
The workflow here is just I have written some simple typescript function and I want to run them in a REPL like enviorment so I can make sure they are working before using it anywhere or starting to write unit/integration tests against them.
Thanks!
1 is correct, your new module is not imported and thus not bundled by webpack.
I don't think you could use import syntax in console atm. But there are 2 ways you could try.
Just import your code in one of the bundled file, if you are using dev server, change will be reflected to browser automatically:
import { getUser } from '../../lib/rest';
getUser().then(console.log);
Or attach it to window so you could play with it in console:
import { getUser } from '../../lib/rest';
if (typeof window !== 'undefined') {
window.getUser = getUser;
}
I am writing an angular component and got a open source module working with npm install. Now I made some some changes and want to import the javascript file like so
import { ModuleName } from './../../ModuleFolder/ModuleName';
When I place the cursor above the ModuleName inside the bracket, I see the highlighted red error saying Module has not export member 'ModuleName';
In my ts code, I have referenced the Module like so
object: ModuleName; which is also complaining.
I google and the post says using npm install but I don't want to add this module to my node_module list. I am moving the folder out to make my customization.
I also tried the following but it is not working
import './../../ModuleName.bundle.min.js';
I am wondering does the name of the Module needs to be registered somewhere to be able to reference it in my component?
Thanks for any help.
Use 'declare' after the import statements
declare const _moduleName;
For example:
I am using Swiper.js library using cdn. In my angular component, I refer it using a declare keyword.
declare const Swiper;
var mySwiper = new Swiper('.swiper-container', { /* ... */ });
I got external libraries working in Angular by following the following links
https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af
I created my project using angular 2 CLI. However I am wondering how I can stop using the crazy imports like
import { SomeSharedComponent } from '../../../shared/some-shared-component';
I am using what the angular cli generated for me. So, is it possible to use something like
import { SomeComponent } from 'app/shared/components/some-component'
Thanks
The best approach is to use TypeScript v2.0 or newer (still in beta). The reason is that it gives you the ability to use path mappings.
This would allow you to define a path map named app-shared and then use that to point to the desired shared component: app-shared/some-shared-component
I had the same problem and resolve it by using a symbolic link referencing the shared folder. You should also add it to system-config.js.
import { SomeSharedComponent } from './shared/';
with the following declaration in system-config.js.
const barrels: string[] = [
(...)
// App specific barrels.
'app',
'app/shared',
/** #cli-barrel */
];
I would be interested by a cleaner solution.
Edit:
You should also include an index.ts in the shared folder with the following content.
export * from './some-shared-component';
Then you can use the import statement without the name of the component.
import SomeSharedComponent from ''../../../shared/'
However, it still requires the relative path part.
I have made a Plunker to clarify the usage from the Angular2 hero tutorial. See in particular the following files.
app/relative/hero-relative.component.ts
app/shared/my-shared.component.ts
app/hero-search.component.ts
You should have a look at this issue about the Angular2 style guide. This question could also be interesting.
I think for a complete solution (without relative path) we will have to wait until webpack module manager is adopted by Angular CLI as stated in the GitHub issue. A webpack preview is already available.
I have gone through 2ality article on Modules, however, I am confused, how does the system know to treat a module as a module?
import React from "react";
import { hello } from "./hello.js";
var Ctrl = React.createClass ({
render : function () {
return (
<div .... random data
></div>
);
}
});
export default Ctrl;
To me, a module is just a file with global code written in it. We reference the module via its filename.
However, I wonder how does this all gel together when we build the production build.
How does the system know that this is a module & not just global varaibles being declared?
Is it the import / export commands that actually make it say: 'aha, this is a module!'
Excuse the newbie question.
Is it the import / export commands that actually make it say: 'aha, this is a module!'
Yes!
More precisely, the import keyword instructs the JavaScript engine (or transpiler) to load an external file as a module.
if by system you mean the browser, it doesn't know, you normally use another tool that implements the idea of modules for you, and it transforms (puts in code) that act as a module system for you that the browser understands.
some tools like do this is require in node, browserify, webpack
that*, not like