systemjs

Bundle Angular 2 app using UMD bundles (not building vendor bundle)

由 守給你的承諾、 提交于 2019-12-04 12:18:58
问题 I'm currently bundling my Angular 2 app with WebPack. We are still spinning rapid cycles, so rather than adding delays to our build and application load process, we want to include the rarely-changing Angular 2 UMD CDN prepared bundles, e.g.: <script src="https://npmcdn.com/@angular/core@2.0.0-rc.3/bundles/core.umd.min.js"></script> <script src="https://npmcdn.com/@angular/common@2.0.0-rc.3/bundles/common.umd.min.js"></script> <script src="https://npmcdn.com/@angular/compiler@2.0.0-rc.3

Unexpected token export

由 随声附和 提交于 2019-12-04 12:18:02
As a new Angular rookie, I am trying to upgrade my previously working Angular 2.0.0-beta17 web-app to Angular 2.3.0. Now I have a problem while loading/booting the app. Here's my setup: For solution purposes, I copied all node_modules in the web directory for now. So no files should be missing. (web directory) ├── index.html ├── js │ ├── boot.js │ ├── boot.js.map │ ├── feedback-form.component.js │ ├── feedback-form.component.js.map │ ├── feedback-form.service.js │ ├── feedback-form.service.js.map │ ├── lib │ │ └── *all node modules* │ ├── ui-molecule.component.js │ └── ui-molecule.component.js

SystemJS versioning for production and cache management (requirejs urlArgs alternative)

由 試著忘記壹切 提交于 2019-12-04 10:42:28
问题 I would like to migrate to SystemJS from requirejs however I am failing to find a solution as requirejs have for module versioning. For example in production (ASP.Net website) I have set RequireJS like this: require.config({ baseUrl: "@Url.Content("~/Scripts/")", urlArgs: "buildNumber=@(File.GetLastWriteTime(ViewContext.Controller.GetType().Assembly.Location).ToBinary().ToString() + typeof(Foundation.MvcApplication).Assembly.GetName().Version)", ... }); It guarantees that the file will be

Component rendered as comment in VueJS + JSPM

由 心已入冬 提交于 2019-12-04 10:02:17
I tried to build simple app using jspm with vue.js. This is my html file: <html> <head> <script src="bundle.js"></script> <!--script src="jspm_packages/npm/vue@2.1.10/dist/vue.min.js"></script--> </head> <body> <div id="app"> {{ message }} </div> </body> </html> My main.js file: import Vue from "vue" const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); I'm building self-executing bundle like this: jspm bundle-sfx main.js bundle.js When I open browser I can see that node div#app is replaced by comment node. You can also see comment node in $el in Vue object: When I use Vue from

微前端框架 single-spa

由 孤街浪徒 提交于 2019-12-04 08:46:10
单体应用对比前端微服务化 普通的前端单体应用 微前端架构 1.基本概念 实现一套微前端架构，可以把其分成四部分（参考：https://alili.tech/archive/11052bf4/） 加载器：也就是微前端架构的核心，主要用来调度子应用，决定何时展示哪个子应用， 可以把它理解成电源。 包装器：有了加载器，可以把现有的应用包装，使得加载器可以使用它们，它相当于电源适配器。 主应用：一般是包含所有子应用公共部分的项目—— 它相当于电器底座 子应用：众多展示在主应用内容区的应用—— 它相当于你要使用的电器 所以是这么个概念：电源(加载器)→电源适配器(包装器)→️电器底座(主应用)→️电器(子应用)️ 总的来说是这样一个流程：用户访问index.html后，浏览器运行加载器的js文件，加载器去配置文件，然后注册配置文件中配置的各个子应用后，首先加载主应用(菜单等)，再通过路由判定，动态远程加载子应用。 2.预备知识 2.1 SystemJs SystemJS提供通用的模块导入途径，支持传统模块和ES6的模块。 SystemJs有两个版本，6.x版本是在浏览器中使用的，0.21版本的是在浏览器和node环境中使用的，两者的使用方式不同。(参考： https://github.com/systemjs/systemjs ) 在微服务中主要充当加载器的角色。 2.2 singleSpa

Angular2: ng2-file-upload : cannot load it correctly using SystemJS

由 和自甴很熟 提交于 2019-12-04 04:43:08
问题 I'm using systemJS to manage my packages so I've added those lines to my systemjs's configuration file : { map: { 'ng2-file-upload': 'node_modules/ng2-file-upload' }, packages: { 'ng2-file-upload': { main: './ng2-file-upload/ng2-file-upload.js', // also tried with './ng2-file-upload.js' defaultExtension: 'js' }, } } I import ng2-file-upload via import { FileDrop, FileUploader } from 'ng2-file-upload'; . But importing causes my application "craches" : my typscript compiler seems works well (I

Typescript Compiler error TS2307: Cannot find module 'jquery'

由 大城市里の小女人 提交于 2019-12-04 04:31:25
I was following JSPM getting started guide and I want to install jquery package so I execute below command. jspm install jquery But when I try to import it in typescript like below import $ from 'jquery' I'm getting a error from typescript compiler saying error TS2307: Cannot find module 'jquery'. Not only for this library for other libraries I'm getting the same error. You need to include type definitions for jquery in the compilation context, you can grab them from https://github.com/DefinitelyTyped/DefinitelyTyped 来源： https://stackoverflow.com/questions/35102441/typescript-compiler-error

Unexpected value 'FileUploadModule' imported by the module 'UploaderModule' - ng2-file-upload

由 好久不见. 提交于 2019-12-04 03:31:32
问题 Using angular 2.0.1 (release) and ng2-file-upload 1.1.0 (latest version) I am getting the above error upon running this code. I am using jspm with systemjs to bundle my app (all fully up-to-date). import {Component, NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FileUploadModule} from 'ng2-file-upload'; @Component({ selector: 'uploader', templateUrl: '/build/templates/uploader.html' }) export class UploaderComponent { uploader = new FileUploader({url: '

How to create angular2 library which could be supported by all script loaders

由 ぃ、小莉子 提交于 2019-12-03 11:36:41
How can I create a javascript file that contains an Angular 2 module that can be used by other applications, but is loaded at runtime directly from a centralized server and is NOT bundled into a specific application's code? Think of this as a CDN for an Angular 2 library. The requirement is that the consumers of this library will include a single script on their page. It is a requirement to implement it this way, so I am not interested in any answers that suggest bundling the library into the individual application's output files. The library script must be loaded directly from the library's

jspm / jQuery / TypeScript - module “jquery” has no default export

由 冷暖自知 提交于 2019-12-03 10:43:33
问题 I'm trying to bootstrap a web app using TypeScript and jspm & system.js for module loading. I'm not getting very far. After installing jspm, and using it to install jQuery: jspm install jquery And the basics: <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.import('main'); </script> main.ts: import $ from "jquery"; export class Application { constructor() { console.log($); } } The TypeScript won't compile because "Module 'jquery' has no default
订阅 systemjs