I'm creating a SPA that have two parts. The landing page that is public and it's used to explain things about the project and to show up a login form. The other part of the application is not public and only registered users can access.
Each part of the site (Home & Dashboard) have different components. The problem I'm facing is that these component have different Javascript files that I already have bundled (home.js & dashboard.js). I've found in Internet different solutions but they do not look right to time.
Some details about the environment is that the application was scaffolded by Angular CLI so webpack is included, in case it makes easier the task.
I would like to know if there is a proper way to do it that meets Angular 2 Good practices.
Any help would be appreciated.
-Inside angular-cli.json there is a section called apps. Inside that there is scripts section you can import your js files there angular cli will bundle that js files into scripts.bundle.js and put it to index.html
"apps": [
{
"scripts": ["../node_modules/jquery/dist/jquery.min.js",
"../node_modules/hammerjs/hammer.js",
"path_to_your_file/dashboard.js",
"path_to_your_file/home.js"]
}
-In another way you can import them inside index.html in classic way.
I'm not sure but i imported 'hammerjs' inside app.module.ts but i think it works because it is a module which installed via npm.
import { MaterialModule } from '#angular/material';
import 'hammerjs';
like this. there is nothing more down about hammerjs. You can turn your js files to module and install them like hammerjs.
Related
I'm creating a utility project that will supply React components and resources to my other projects.
I'd like it to include a set of images (mostly .png files for icons) that can then be imported by the child projects.
I can't figure out how to make this work.
I can export the images from the library, and I can see them, name-mangled, in the node_modules of the child project. So, all good so far.
But, import {imgName} from "myLib" does not include the file in the child project's bundle.
It looks to me like my problem is explained by a clue in https://create-react-app.dev/docs/adding-images-fonts-and-files/:
You can import a file right in a JavaScript module. This tells
webpack to include that file in the bundle.
Presumably, CRA is not triggering this webpack behavior in my case, since I'm importing from another module, not from a file.
How can I get things working?
Assume:
I have complete ownership of the library and child projects, so I can change this solution in whatever way works. I just want to have a single common resource for the images.
I don't want to eject my child projects
Ideally, any complexity should be in the library project. The child projects should have minimal complex tooling. (My intent is for this library to be used by a team of other developers, who will want to focus on their own tasks; not on tooling details)
EDIT (ADDED LATER)
Per the comments in the first answer below, I've created a simple example of my problem. See:
Library repo: github.com/deg/media-file-bug-library
Library package: npmjs.com/package/media-file-bug-library
Client repo: github.com/deg/media-file-bug-client
Just pull the client repo and do yarn install and yarn start. This will bring up a little web page that shows the problem:
SCREEN SNAPSHOT:
The Problem is Not in CRA Trigger. Importing Png File like JavaScript Hides a Magic. Here you are importing a Image and Exporting it which then get Processed by bundler and The Bundled Index Actually Exports The name of the Processed Image File Which in Your Case is corss~nAalnlvj.png. That's Why Your Image is Broken but you are able to render name of File, The Case is Same for microbundle or parcel.
How You Can solve it is by separating your assets and components By Placing Images on separate assets folder and place your images there and then add assets to files in your files in package.json
{
.
.
"files": [ "dist", "assets"],
}
And Then Import Image & Using Like This
import React from 'react'
import ico_cross from 'media-file-bug-library-fix/assets/cross.png'
function App() {
return (
<div className="App">
<img src={ico_cross} alt="im"/>
</div>
);
}
For Further Reference Checkout
Here
A Npm Library For Your Fix I Published Npm media-file-bug-library-fix
enter image description here
hey David I found the solution please do check the above screenshot
as in you package just change in index.modern.js
// WebPack doesnt listen as a path it listen
// var cross = "cross~nAalnlvj.png";
// use import rather than simple name as it generate a full absolute path at parent level so that in child level it can be accessible as an Image
import cross from "./cross~nAalnlvj.png"
I'm working with React Native and using index.js to manage modules. I have many projects consuming from the same components folder, which has a structure like this:
components
|_ComponentOne.js
|_ComponentTwo.js
|_index.js
In which the index.js looks like this:
export * from './ComponentOne.js';
export * from './ComponentTwo.js';
Now lets say I have three projects:
ProjectOne, which uses ComponentOne;
ProjectTwo, which uses ComponentTwo;
ProjectThree, which uses both;
Every project has its own files, but they refer to this same folder to use components (like a shared assets folder). Everything works fine while all the projects have all dependencies for all components.
In another words, I have a problem when one of the projects doesn't install a dependency for one of the components, even when the project doesn't uses that component.
Let's take as an example ProjectOne, which uses only ComponentOne. If ComponentTwo (which is not used in this project) has dependency X, I have to npm install dependency X even on ProjectOne, or an error is given. Again, ProjectOne doesn't use dependency X.
I can only image this happens because the index.js validates all declared exports, even when they're not used.
I'm trying to find an alternative to not be forced to install plugins and other things that I won't even use in my projects. I know that if I remove the index.js and start importing files directly on projects, it will work, but I would like to keep the index.js structure (to be able to use multi import syntax import { ComponentOne, ComponentTwo } from 'components').
Any suggestion?
Update:
The error I get, when I do not npm install dependency X is
Module `X` does not exist in the Haste module map
If I install it, everything works.
I'm using the terminal to install the application directly into an android phone. The JS bundle is automatically created by Metro (RN default).
With lots of help from this excellent article by Nikolas LeBlanc, I'm trying to create an Angular 4 component library:
https://medium.com/#nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e
The problem is this... my library depends on an external JavaScript file - let's call that somefunctions.js.
In a regular Angular 4 application - I've been able to do this by referencing the file in the angular-cli.json file:
"scripts": [
"./app/js/somefunctions.js"
],
... then declare the variables as type any in the typings.d.ts file.
This makes the JavaScript file available to the application, and it works just fine.
However - my goal is to create an Angular 4 component library, and package/publish it to npm.
When I follow the instructions for creating the library - the feature module is packaged without somefunctions.js.
So - if someone else installs my module, they won't have somefunctions.js, and it obviously won't work.
So, I guess I need to know how to tell ng-packagr to bundle the module so that it includes somefunctions.js, and how to set up my module so that my code can reference that file when the module is installed in other applications.
Thanks in advance!
I have an application in development that is in Angular2 using AngularCli, and I want to use it as a "Layout" (like a MasterPage) to another project. Like a big "SPA System".
For example, in the menu we will have the following:
Framework
Page A
Xpto
Page B
The Framework is running in http://localhost:90 and XPTO is running in http://localhost:91. Both of them is running on AngularCli.
I want to create a structure that when I click on Page A or Page B, the browser doesn't reload and it will give an "app" style to the user, loading the page as a SPA ACROSS the sites.
The main reason is to reuse the Javascripts, CSS and many other files from de "Framework" project to other 20 projects. I don't want to replicate all the components, files and etc across those projects.
Today we use MVC3 and the RazorGenerator to create .cshtml as a DLL to reuse the .cshtml from Framework to other modules.
But we want go AngularCli. Is there any way to do that ? If it isn't, is there some way to create a template in AngularCli that can be reused the components and the other files ?
Thank you !
You can put shared Angular components and modules into a separate npm package and use this package as a dependency for other projects.
In order to reference your npm package (I assume it's not hosted at npmjs.com) you can specify a git repository or local path.
Here is an example of package.json
{
"name": "foo",
"version": "0.0.0",
"dependencies": {
"my_git_package": "git+ssh://user#hostname/project.git#commit-ish",
"my_local_package": "file:../foo/bar"
}
}
Take a look at dependencies section here https://docs.npmjs.com/files/package.json
I'm inspecting this Webpack demo project https://github.com/Foxandxss/GermanWords-ng1-webpack. This project contains in several files this line (features/home/index, features/login/index):
import angular from 'angular';
I don't understand - if 'angular' library will be included several times in result js file because this library exists in several source files? I've looked at webpack config file, but can't understand. Please, can you clear this questions?
It's just to be sure that angular will be available for every module. Imagine you use a feature to be a new standalone site, you will have already the code ready. Always think like every feature is a standalone (handle routes, dependencies, controllers, views etc.).
Webpack will handle the dependencies and inject only once angular, dont worry. Like #thsorens says in comments : "All dependencies in your files needs to be imported where it is used."
Oh and for furthermore, i've found this yeoman generator base on Foxandxss work : https://github.com/Aleksion/generator-angular-webpack-babel
Have fun.