I have 2 separated Angular projects.
For each of them, I run the following CLI command:
ng build --prod --output-hashing=none
It creates the following files for each project:
runtime.js
polyfills.js
main.js
Now I want to import the projects into another project, which is a simple javascript project (not Angular project).
I know that the order is important and that runtime.js and polyfills.js appear twice.
So I made sure that these files are the same (because I use the same Angular version in both projects).
The imports in the simple javascript project look something like this:
<script src="runtime.js"></script>
<script src="polyfills.js"></script>
<script src="main1.js"></script>
<script src="main2.js"></script>
Unfortunately, only one of the projects seems to work this way (and there are no exceptions).
If I'll import only main1.js or only main2.js they will work properly.
I guess the problem is the dependency libraries I use in each project, that maybe override each other, but I don't know what I can do about it.
UPDATE:
Not sure if it's relevant, but in each Angular project, I use #angular/elements in order to publish the components I need. something like this:
export class AppModule {
constructor(private injector: Injector) {
const elem = createCustomElement(MyFirstComponent, { injector });
customElements.define('my-first-element', elem);
}
ngDoBootstrap() {}
}
Then in the javascript project, I use it like this:
var elem1 = document.createElement('my-first-element');
container.append(elem1);
var elem2 = document.createElement('my-second-element');
container.append(elem2);
Check the <app-root></app-root> tag in your index.html.
You may need 2 different selector for your AppComponent:
// app.component.ts for the first project
selector: 'app-root-one',
// app.component.ts for the second project
selector: 'app-root-two',
Related
I am trying to create a simple JS/ESM based Angular example. It has been a while since I have been in the angular space and I see there are really 2 options
Using the UMD lib (I would like to avoid this)
Use the ESM2015 folder and load using ESM (this is what I would like to do)
I try doing this like...
<html>
<head></head>
<body ng-app="jrg-module">
<jrg-element></jrg-element>
<jrg-app></jrg-app>
<script type="module">
import { Component } from "//unpkg.com/#angular/core/esm2015/index.js";
import { platformBrowserDynamic } from "//unpkg.com/#angular/platform-browser-dynamic/esm2015/index.js"
import {ShadowElement, CREATE_ELEMENT} from "//unpkg.com/#jrg/ui/target/jrg-ui.esm.mjs";
class JrgElement extends ShadowElement {
constructor() {
super("<h1>CustomElement</h1>");
this.render();
}
}
CREATE_ELEMENT("jrg-element", JrgElement, {});
const MyComponent = Component({
selector:"jrg-app",
template:"<h1>Angular</h1>"
}).Class({
constructor: function() {}
});
const app = platformBrowserDynamic().bootstrapModule(MyComponent)
</script>
</body>
</html>
But (after taking forever to download 500+ files) I get
Uncaught TypeError: Error resolving module specifier “rxjs”. Relative module specifiers must start with “./”, “../” or “/”.
Can I use the ESM version in the browser or do I have to use UMD? If I can use ESM from the browser is there a link to an example?
I swear Angular used to have a dropdown for their examples where you could switch between TS and JS but I don't see it now.
Have you tried out the website stackblitz it has plenty of angular examples of setting up a new project.
You can also do ng new my-app from the cli to generate a new project locally.
Angular has moved away from javascript in favor of typescript, so you will have to use ESM
I am importing lodash into my project, but the main script doesn't use more than 5 lodash functions, I don't want to fill my project with unused/inactive code, is there a way to check the whole project structure and delete the inactive code on bundle/on build?
Example:
index.html
<body>
<script src="lodash.js"></script>
<script src="app.js"></script>
</body>
lodash.js
function a() {
console.log('Hi')
}
function b() {
console.log('I am not used anywhere')
}
app.js
...
document.getElementById('main').addEventListener('click', a)
...
Function b() is not used in the project.
Question:
How to get rid of inactive code function b() automatically?
What you want is called Tree Shaking, a pattern that decides which code is dead code and should not be included in the bundle. One of the requirements to use this with Webpack is to use ES Modules. If you're using already webpack to bundle app.js, you should import to import lodash inside your project, instead of adding it as a dependency in your html file.
Keep in mind that this will only work if lodash is using ES Modules, if that's not the case there's always lodash-es
I need to import a library in my vue component, in the documentation I explain how to install it using npm (already do this step) but not how to import it into a vue component, this is the way in which it explains how to use the files:
<link href="node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
<script src="node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
<script src="node_modules/webdatarocks/webdatarocks.js"></script>
and this is the way to instantiate the library:
<script>
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
</script>
So what is the best way to call this in my component?
This is a bit heavy.
The library is is not develop in module-like system, so the solution is make the js file imported as global.
A good library would be like const WebDataRocks = require("WebDataRocks"); or with imports, but the library is made only for end-client.
First Part - Add the JS file to the global web client
To use WebDataRocks you have to get the global variable, to get the global variable you have to inyect, as common javascript on html but with webpack.
Here are a solution for this
Webpack - How to load non module scripts into global scope | window
You have to do this for webdatarocks.toolbar.min.js and webdatarocks.js
Second Part - Add the CSS
You have some options, the easy way i found to do this is use require in your <script> zone:
require('../node_modules/webdatarocks/webdatarocks.js')
Good luck! 😁
If something fails check the paths and let us know more information about it
Alternative solution (But worse)
If you are going to use this script in a internet system, you could insert the script and CSS in the HTML. For this do:
Open index.html
Add this code on the head section:
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
Rebuild
Extracted from WebDataRocks React Example
Important! this is unsafe ☣ ⚠
Make this only if you are sure about what this mean
If the webdatarocks CDN's fails, your app will also fails.
Hope it helps :)
I did this and it works:
import WebDataRocks from 'webdatarocks'
import '#/../node_modules/webdatarocks/webdatarocks.min.css' // # is resolved to src/ folder
I didn't import the toolbar as I don't need it:
WebDataRocks({
container: '#pivot',
toolbar: false,
...
})
I have a project that is using ng-metadata (https://github.com/ngParty/ng-metadata) to build a handful of Angular 1.5 modules. I have a test module/component that looks like this:
import { NgModule, Component, Inject, Input, Output, EventEmitter } from 'ng-metadata/core'
import { platformBrowserDynamic } from 'ng-metadata/platform-browser-dynamic'
#Component({
selector: 'test',
template: require('./test.template.html')
})
class TestComponent {
#Input() type: string;
constructor() {
console.log(`test: ${this.type}`)
}
}
#NgModule({
declarations: [TestComponent]
})
class HeroModule {}
platformBrowserDynamic().bootstrapModule(HeroModule)
Everything seems happy when compiled and I'm now attempting to use the module in another project (that is not using ng-metadata but has a compatible version of Angular).
I'm simply including the shims as directed by the ng-metadata docs and the JavaScript file that contains the module described above (built by webpack). I have a new module in this project that wants to list the HeroModule as a dependency. I've tried a few things:
// attempt 1:
angular.module('my-consuming-module', ['ui.router', 'hero'])
// attempt 2:
angular.module('my-consuming-module', ['ui.router', 'heroModule'])
// attempt 3:
angular.module('my-consuming-module', ['ui.router', 'hero-module'])
All always end up with the same Error: $injector:nomod Module Unavailable error from Angular.
If I'm using ng-metadata to build my modules, what are the names I use to list them as dependencies in another project?
Finally figured this out! It's amazing what happens when you carefully read documentation...
Found in the Manual Angular 1 Bootstrap section of ng-metadata's docs:
You can still leverage ng2 way of components registration without ng-metadata bootstrap, but you have to manually create your Angular 1 module from an ng-metadata #NgModule using the bundle helper function.
I ended up being able to do the following:
// REMOVED platformBrowserDynamic().bootstrapModule(HeroModule)
const Ng1AdminModule = bundle(HeroModule).name;
export const AppModule = angular.module('hero', [Ng1AdminModule]);
And then my hero module becomes accessible to the my-consuming-module just as I expected. The bundle helper function was the key to figuring this out.
You need to import those module from their respective locations and inject it inside your angular module
//ensure `angular`, `angular-ui-router` should be there in `map` of systemjs.config.js
import * as angular from 'angular';
import * as uiRouter from 'angular-ui-router';
import { heroModule} from './hero.module';
angular.module('app',[ uiRouter, heroModule]);
Check references here
I have the following files. All I want to do is to be able to create different components that are injected. How do I achieve this using require.js? Here are my files:
main.js
define(function(require) {
'use strict';
var Vue = require('vue');
var myTemplate = require('text!myTemplate.html');
return new Vue({
template: myTemplate,
});
});
myTemplate.html
<div>
<my-first-component></my-first-component>
</div>
MyFirstComponent.vue
<template>
<div>This is my component!</div>
</template>
<script>
export default {}
</script>
I'm going to assume you're using webpack as explained in the Vue.js docs, or else your .vue file is useless. If you're not, go check how to set up a webpack Vue app first, it's what lets you use .vue files.
import Menubar from '../components/menubar/main.vue';
Vue.component('menubar', Menubar);
That's how you add e.g. a menubar component to the global scope. If you want to add the component to just a small part of your app, here's another way of doing it (this is taken from inside another component, but can be used in exactly the same manner on your primary Vue object):
import Sidebar from '../../components/sidebar/main.vue';
export default {
props: [""],
components: {
'sidebar': Sidebar
},
...
You can load components without webpack, but I don't recommend it, if you're gonna keep using Vue (which I strongly suggest you do) it's worth it to look into using webpack.
Update
Once again, really, really, really consider using webpack instead if you're gonna be continuing with Vue.js, the setup may be slightly more annoying but the end result and development process is waaaay better.
Anyway, here's how you'd create a component without webpack, note that without webpack you can't use .vue files since the .vue format is part of their webpack plugin. If you don't like the below solution you can also use e.g. ajax requests to load .vue files, I believe there is a project somewhere out there that does this but I can't find it right now, but the end result is better with webpack than with ajax anyway so I'd still recommend going with that method.
var mytemplate = `<div>
<h1>This is my template</h1>
</div>`
Vue.component('mycomp1', {
template: mytemplate
});
Vue.component('mycomp2', {
template: `
<div>
Hello, {{ name }}!
</div>
`,
props: ['name'],
});
As you can see, this method is A LOT more cumbersome. If you want to go with this method I'd recommend splitting all components into their own script files and loading all those components separately prior to running your actual app.
Note that `Text` is a multi line string in javascript, it makes it a little easier to write your template.
And as I said, there is some project out there for loading .vue files using ajax, but I can't for the life of me find it right now.