标签: systemjs

我想在这个帖子中跟踪和更新最新的(并且希望是最简单的)方法来捆绑Angular(版本2,4,...)以便在实时Web服务器上进行生产.

请在答案中包含Angular版本,以便我们可以更好地跟踪它何时转移到更高版本.

我在将类加载到Angular组件时遇到了问题.我一直试图解决它很长一段时间; 我甚至尝试在一个文件中加入它.我有的是:

Application.ts

/// <reference path="../typings/angular2/angular2.d.ts" />

import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NameService} from "./services/NameService";

@Component({
    selector:'my-app',
    injectables: [NameService]
})
@View({
    template:'<h1>Hi {{name}}</h1>' +
    '<p>Friends</p>' +
    '<ul>' +
    '   <li *ng-for="#name of names">{{name}}</li>' +
    '</ul>',
    directives:[NgFor]
})

class MyAppComponent
{
    name:string;
    names:Array<string>;

    constructor(nameService:NameService)
    {
        this.name = 'Michal';
        this.names = nameService.getNames();
    }
}
bootstrap(MyAppComponent);

服务/ NameService.ts

export class NameService {
    names: Array<string>;
    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    getNames()
    {
        return this.names;
    }
}

我一直收到一条错误信息No …

在一个Angular应用程序中,我看到它@Component有属性moduleId.这是什么意思？

当module.id没有在任何地方定义时,该应用仍然有效.它怎么还能运作？

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

我正在创建我的第一个Angular应用程序,我会弄清楚模块加载器的作用是什么.为什么我们需要它们？我试图在Google上搜索和搜索,我无法理解为什么我们需要安装其中一个来运行我们的应用程序？

仅仅用于import从节点模块加载东西是不够的？

我已经按照本教程(使用SystemJS),它让我使用systemjs.config.js文件:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'transpiled', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs': …

一旦Angular应用程序进入生产阶段,您如何部署它们？

到目前为止我所见过的所有指南(甚至在angular.io上)都指望服务器和browserSync的lite服务器反映变化 - 但是当你完成开发时,你如何发布应用程序？

我是否导入页面.js上的所有已编译文件index.html或使用gulp缩小它们？他们会工作吗？在生产版本中我是否完全需要SystemJS？

在angular.io上有一个快速入门教程,它使用typescript和systemjs.现在我已经运行了miniapp,我将如何创建可部署的东西？我找不到任何关于它的信息.

我是否需要任何额外的工具,System.config中的任何其他设置？

(我知道我可以使用webpack并创建一个bundle.js,但我想使用systemjs,因为它在教程中使用)

有人可以使用此设置共享他们的构建过程(Angular 2,TypeScript,systemjs)

我正在使用一个网站Angular2,我有我认为是一个问题.在我的角度页面的第一次加载时,SystemJS正在发出超过500个请求来检索目录中的每个Angular2文件angular2/src.总的来说,第一个负载下载超过4MB,启动时间超过14秒.

我index.html的以下脚本包括:

<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.min.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<script src="libs/jquery/jquery.js"></script>
<script src="libs/lodash/lodash.js"></script>
<script src="libs/bootstrap/js/bootstrap.js"></script>

我的systemJs初始化代码如下所示:

    <script>
      System.config({
        defaultJSExtensions: true,
        paths: {
          '*': 'libs/*',
          'app/*': 'app/*'
        },
        packageConfigPaths: ['libs/*/package.json'],
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));

    </script>

我的公用文件夹具有以下结构:

.
??? img
??? styles
??? app
??? libs
|   ??? angular2
|   ??? systemjs
|   ??? rxjs
|   ??? jquery
| …

我在使用Angular2和SystemJS运行以下版本的JSPM时遇到以下问题(版本:Angular@2.0.0-alpha.27,JSPM @ 0.16.0-beta.2和SystemJS@0.18.0)曾经的打字稿是编译(没有错误)我在浏览器中收到以下错误:

/jspm_packages/npm/angular2@2.0.0-alpha.27/src/util/decorators.js:70 Uncaught reflect-metadata shim is required when using class decorators

现在,当我手动包含文件Reflect.js:\ jspm_packages \npm\reflect-metadata@0.1.0\Reflect.js时,问题就消失了但是下一个问题出现了,说明列表在另一个角度文件中是未定义的.

从system.js和typescript/jspm.io看到下面的bitbucket src中的配置文件(src代码)

https://bitbucket.org/schippie/angular-2-jspm-hello-world/src/8af83f2066e5e3e9eede7db495545234f3b0c04a

我想知道的是,如果它现在甚至可以使用jspm和system.js来检索角度正常运行所需的所有角度包.看作system.js的配置确实明确指出angular取决于它:

"npm:angular2@2.0.0-alpha.27": {
  "fs": "github:jspm/nodelibs-fs@0.1.2",
  "path": "github:jspm/nodelibs-path@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.1",
  "reflect-metadata": "npm:reflect-metadata@0.1.0",
  "rx": "npm:rx@2.5.1",
  "url": "github:jspm/nodelibs-url@0.1.0",
  "zone.js": "npm:zone.js@0.5.1"
},

但它们未被检索(查看网络选项卡)

Angular2应用程序加载缓慢,如何提高负载性能？

我使用Angular2,打字稿和html5.

目前我的应用需要4秒才能加载.我使用Firebase托管并使用cloudflare.

我正在做的事情/信息:

• 我压缩了图像.
• 我缩小了CSS
• 我缩小了js.
• 我在脚本上使用async.
• 我的脚本在我的.
• 脚本大约700kb
• 我使用谷歌速度测试获得65%
• 我使用了libs的缩小版本,例如bootstrap等.
• 使用systemjs.
• 这是使用的种子应用程序:https://github.com/mgechev/angular-seed

流:

当应用程序加载时,它会显示一个蓝屏(这是bootstrap css),然后4秒后应用程序加载并且工作得非常快.但需要4秒钟才能加载.似乎systemjs缩小的app.js文件正在减慢整个应用程序,并且没有足够快地显示视图.

这是我的网站速度测试: https ://www.webpagetest.org/result/161206_F5_N87/

这是我的网站:

https://thepoolcover.co.uk/

如果您需要有关我的应用程序的更多信息以及我可以执行的任何其他操作,请告诉我.

我是Angular和Angular2的初学者.我对工作流程的结构感到困惑.我一直在查看Angular2站点中的示例项目.

如果我错了,请纠正我,但我所知道的是所有的打字稿都是由打字稿编译器转换成javascript的.然后编译的javascript实际上是在浏览器中运行的.

现在,如果我使用ES6导入语句将javascript文件导入typescript,如下所示:

import { NgModule }      from '@angular/core';

为什么我再次需要使用SystemJS来加载它们:

map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

我的意思是,这不是反效果吗？查看ts文件的已转换的javascript,它显示所有import语句都转换为require()语句. 首先,require()在ES5 js文件中是如何工作的,如果是这样的话,那么SystemJS是怎么做的.

这让我很困惑.任何帮助将不胜感激.