标签: systemjs

我为Angular 2 alpha 45构建了一个应用程序,它工作得非常好,但是为了让它工作,我不得不"乱七八糟".我理解Angular 2,但我不明白如何让它开始实际使用Angular 2.

我正在尝试清晰构建'Angular 2:5 min Quickstart'.有很多问题,我将尽可能具体.我想了解为什么这些问题正在发生,并希望如何解决它们.Visual Studio 2015 Update 1,Typescript 1.7.

打字稿配置:快速入门包括tsconfig.json文件.

{  
    "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
 },
 "exclude": [
    "node_modules"
 ]
}

我不确定这是否有效,因为我必须编辑ProjectName.csproj文件并添加行: <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 以摆脱实验装饰器错误. https://github.com/Microsoft/TypeScript/issues/3124似乎建议tsconfig文件需要在/ Scripts中工作,但这对我也不起作用.

我想知道如何使这个tsconfig文件工作,或编辑.csproj文件以获得相同的编译器选项.如果查看Project Properties> Typescript Build.这些重要吗？模块系统应该是:系统？

我的文件结构与Quickstart相同.

app/
    app.component.ts
    boot.ts
node_modules/
    blah
index.html
tsconfig.json
package.json

我使用powershell运行npm install来获取node_modules目录中的所有内容.

import {Component} from 'angular2/core';显示错误.../node_modules/angular2/core';不会显示错误,但是当您构建项目时,会在文件中出现大量构建错误node_moduels/angular2/src/*.现在,我可能会进入并手动修复这些问题,但我觉得如果出现这些错误,配置是错误的.tsconfig似乎想要排除node_modules.为什么我无法使用'angular2/core'而必须使用它的相对路径？如果我在Visual Studio项目中包含node_modules,则会出现大量的构建错误node_modules.另外:我正在做这个干净的构建,因为我无法弄清楚如何将项目从alpha …

我刚刚将Angular更新rc-1为最新版本rc-3.该应用程序使用的是JavaScript ES6和SystemJS.当我使用browsersync运行应用程序时,它可以工作.但是,如果我捆绑应用程序(使用systemjs-builder)然后运行它,我在浏览器控制台中出现此错误

使用类装饰器时,需要使用未捕获的反射元数据填充程序.

问题来自使用@angular/http基本http调用的组件,如果我删除import {Http, HTTP_PROVIDERS} from '@angular/http' ;它有效.

此外,它不会发生在TypeScript上,但它与JS ES5和ES6一起发生.Webpack也不会发生这种情况.

我查看了捆绑的代码,看起来SystemJS在Angular代码之前通过Reflect代码...仅使用es6

index.js

import 'reflect-metadata';
import 'es6-shim';
import 'zone.js';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app.js';
bootstrap(App);

app.js

import {Component} from '@angular/core';
import {Http, HTTP_PROVIDERS} from '@angular/http';
@Component({
  selector: 'App',
  template: '',
  providers: [HTTP_PROVIDERS]
})
export class App {
  constructor(http) {}

  static get parameters() {
    return [[Http]];  
  }
}

我正在尝试使用System.JS将material-ui导入到我的React应用程序中

在我的应用程序中,我这样做:

import {AppBar, Tabs, Tab, Card, CardTitle} from 'material-ui';

这是我的System.JS配置:

System.config({
    baseURL: '/node_modules',
    packageConfigPaths: [
        '*/package.json'
    ],
    packages: {
        '.': {
            defaultExtension: 'js',
            main: 'index.js'
        },
    }
});

它加载了node_modules/material-ui/index.js里面有一堆导入:

var _AppBar2 = require('./AppBar');

var _AppBar3 = _interopRequireDefault(_AppBar2);

var _AutoComplete2 = require('./AutoComplete');

var _AutoComplete3 = _interopRequireDefault(_AutoComplete2);

// ... etc, about 40 of them.

exports.AppBar = _AppBar3.default;
exports.AutoComplete = _AutoComplete3.default;

// ... etc

在包的树结构中,每个模块都存储在它自己的目录下,如下所示:

material-ui/
  index.js
  AppBar/
     AppBar.js
     index.js -- just reexports './AppBar'
  AutoComplete/
     AutoComplete.js
     index.js -- just reexports …

我正在尝试捆绑一个有角度的4.0.0应用程序.

我已经尝试过browserify但是新的angular-loader插件(允许不需要带有templateUrl的组件中的moduleId)不会被调用,因此模板最终会出错路径.

所以我转移到了systemjs-builder,但问题是当它运行该插件时崩溃说文档没有定义.

有没有办法将文档注入构建器？

或者我做错了什么？

这是我正在测试的简单构建器(systemjs-config是角度快速入门).

var path = require("path"); 
var Builder = require('systemjs-builder');

var builder = new Builder('src/frontend', 'src/frontend/systemjs.config.js');

builder .bundle('main.js', 'bundle.js') 
.then(function() {   
     console.log('Build complete'); 
}) 
.catch(function(err) {   
     console.log('Build error');   
     console.log(err); 
});

我正在使用我希望包含在另一个项目中的SystemJS构建器构建一个包.我遇到的问题是捆绑包A和捆绑包B可能都包含一个"主"模块,当我捆绑它们并将它们包含在另一个项目中时,它们会发生冲突,一切都会中断.

SystemJS构建器是否有更好的命名空间方式？或者防止捆绑模块被导出？还是我应该使用另一种工具？

希望这是一个简单的问题.我正在尝试使用es6 import-from样式导入MongoDB.如果我导入使用节点要求它工作正常.

let mongo = require('mongodb');
let MongoClient = mongo.MongoClient;

但是,如果我以es6方式导入它,它会在没有错误或日志的情况下中断.

import {MongoClient} from 'mongodb';

但是在编译/运行时它不会中断它只会在我尝试使用MongoClient执行任何操作时中断.

这是我的Db Manager课程 -

import {MongoClient} from 'mongodb';

export class DbManager {

  constructor() {
    console.log('Constructing DB Connection');
  }

}

当我运行我的服务器时,我从其他管理器和事件中获取了几个日志.

mycomputer myuser$ ./start.sh
Server Constructing
Route Manager Constructing
Initializing Route: Static
Constructing DB Connection
http server started on port: 8000

但是,如果我执行MongoClient的console.log,则根本没有输出.

import {MongoClient} from 'mongodb';

export class DbManager {

  constructor() {
    console.log('Constructing DB Connection');
    console.log(MongoClient);
  }

}

输出看起来像这样 -

mycomputer myuser$ ./start.sh
mycomputer myuser$

没有编译错误,所以我不明白为什么这不起作用.此外,我不明白为什么没有任何日志!这是最后发生的事情之一,至少应该记录,直到我想到这一点.如果你想 …

我angular-cli用于开发,我使用以下命令和代码来构建我的项目.

npm install angular-cli (angular-cli:1.0.0-beta.10)

ng new my-app

ng g component lazy-me

然后添加一个app.router.ts包含以下脚本的文件

import { provideRouter, RouterConfig } from '@angular/router';
import { AppComponent } from './app.component';
// import { LazyMeComponent } from './+lazy-me/lazy-me.component';

const appRoutes : RouterConfig = [
  {path: '', component: AppComponent},
//   {path: 'lazyme', component: LazyMeComponent}
  {path: 'lazyme', component: 'app/+lazy-me#LazyMeComponent'}
];

export const APP_ROUTER_PROVIDER = [
    provideRouter(appRoutes)
];

并改变了我的主要内容如下

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode,
    SystemJsComponentResolver, 
    ComponentResolver } from '@angular/core';
import …

我有一个Angular 2 RC7应用程序,我使用SystemJS加载JavaScript文件.

这是我对SystemJS的当前配置:

(function (global) {

System.config({

    defaultExtension: 'js',
    defaultJSExtensions: true,

    paths: {
        'npm:': 'node_modules/'
    },

    // Let the system loader know where to look for things
    map: {

        // Our app is within the app folder
        app: 'app',

        // Angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

        // Other libraries
        'rxjs': 'npm:rxjs',
        'ng2-translate': 'node_modules/ng2-translate'

    },

    // Tell the system loader how to load when no filename and/or no …

我的应用程序使用JSPM和SystemJS进行模块加载,并使用angular.

我的config.js文件有角度图,如:

"angular": "github:angular/bower-angular@1.5.8"

所以,当我这样做时import angular from 'angular',我从config.js文件中指定的Path获取angular.js 文件.非常好.

现在要求是我想在应用程序中使用缩小的第三方javascript文件(angular.min.js).但是jspm 注册表中没有缩小的文件
所以我的应用程序的初始加载时间很长,因为有很多大文件,例如angular.js,browser.js等需要花费太多时间来加载.

我知道,我可以做一个jspm bundle递归缩小所有依赖文件,包括供应商的文件.但我的问题是:

1 -是否可以直接使用JSPM的供应商缩小文件(angular.min.js)？使用供应商的缩小文件而不是将它们缩小为自己是好的,不是吗？

2 -如果上面的一个不可能,那么我如何只捆绑我的应用程序特定文件并仍然能够使用(单独捆绑)minified angular.js文件？

这里推荐的方法是什么？

我阅读了许多说SystemJS和SASS转换工作的博客,但我在网上看到的每个例子似乎都预先处理SASS处理(通过类似gulp的任务运行器),然后JavaScript代码导入生成的CSS.

我希望能够做的是让我的JavaScript文件直接导入SASS文件(并让我的SystemJS加载器在运行中转换为CSS).这仅用于开发目的,对于生产,我计划构建一个包含所有内容的静态文件.这可能吗？如果是这样,通常如何做？

附加信息:我也在使用Angular2和Typescript.

谢谢.