我在Angular2项目中使用SystemJS.我为TypeScript使用tsconfig文件.我想使用gulp来连接和缩小我的生产版代码.我在解决代码方面遇到了问题:每次尝试连接文件时都会得到"angular"未定义或"system"未定义.我试图修改我尝试从节点模块加载文件的顺序,但是我没有成功.
我想知道你们是否有这个问题,并找到答案吗？
这是我的gulp文件:
var gulp = require('gulp'),
.....
var paths = {
dist: 'dist',
vendor: {
js: [
'node_modules/systemjs/dist/system.src.js',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/angular2/bundles/router.dev.js'
...
],
css: []
},
app: {
templates: [
'app/**/*.html',
'!node_modules/*.html'
],
scripts: [
'app/**/*.ts',
'app/config.ts',
'app/app.ts'
]
}
};
var tsProject = ts.createProject('tsconfig.json', {
out: 'Whatever.js'
});
gulp.task('dev:build:templates', function () {
return gulp.src(paths.app.templates)
.pipe(ngHtml2Js({
moduleName: 'Whatever',
declareModule: false
}))
.pipe(concat("Whatever.tpls.min.js"))
.pipe(gulp.dest(paths.dist));
});
gulp.task('prod:build:templates', function () {
return gulp.src(paths.app.templates)
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(ngHtml2Js({ …我需要将后端URL传递给我的Angular2应用程序,因为生产和开发服务器托管在不同的位置.
我知道我可以在外部config.json中存储这些东西并在启动时加载.但是,在应用程序启动之前,这似乎是对服务器的不必要的额外调用.
或者,我现在做的是创建一个全局变量,我根据构建注入gulp.我的应用程序不是需要可重用的库我不相信我应该遇到意外的全球名称冲突.但这不是一个好习惯.
我想知道是否有第三个更好的解决方案？
以下场景:我构建了一个使用REST API的Angular应用程序(可以使用Elixir或RoR或其他任何东西构建).在开发过程中,我希望Angular使用与生产中不同的API(可能包含测试数据,可能是因为我同时构建了API并且它在我的机器上运行).
此外,我团队的其他成员可能还想使用其他本地API地址.这意味着这不应该进入版本控制系统.
因此,例如api_base_url可能是http://localhost:4000对我,http://testapi.local对我的同事和http://api.example.com生产.
该api_base_url值应该在多个组件中可用.
处理这个问题的好方法是什么？
目前,我仍然围绕着整个Angular 2概念.我过去使用过AngularJS(1),我喜欢它.
所以目前我正在开始一个新项目并想到为什么不开始使用Angular 2.现在我知道每个人都在使用Typescript而不是javascript.但是,我仍然不确定如何在一个简单的Web托管服务器(PHP,HTML,MySQL,Javascript等)上运行项目.
我知道我可以在我的Linux服务器上运行npm start,但是如何将它放在托管服务器上呢？我不能将Typescript编译为javascript,这样我就可以在浏览器中使用它而无需运行npm吗？我读了一些关于JSPM和其他几个的东西,但我不确定这是否是我需要的,也不知道如何使用JSPM或类似的东西(例如使用JSBPM的"5分钟以下快速启动").
我知道Angular 2有一个javascript部分,这对我有用.但是没有编码示例,您在互联网上找到的所有内容都是Typescript.因此我无法继续在javascript中运行Angular 2,因为缺少教程.
简而言之,我不介意使用Typescript,但我只想要一个纯粹的javascript作为结果,我可以导入HTML并从那里开始.
另外在旁注问题上,运行生产时是否需要存在所有node_modules？
教程的奖励积分可以解释这一点!
谢谢!
对于Angular2项目,我如何连接从typescript生成的所有JavaScript文件并将它们添加到我的index.html文件中.
我正在使用Angular2,typescript和gulp.
目前我没有连接它从typescript文件生成的javascript文件.
我无法尝试这样做并将它们添加到我的index.html文件中.
另外,一旦我完成了这个,我需要缓存清理,以便让浏览器保持请求javascript文件.
这是我的index.html文件:
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My App</title>
<base href="/"></base>
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes"/>
<!-- Css libs -->
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<!-- inject:css -->
<!-- <link rel="stylesheet" href="/css/styles.81dd14d5.css"> -->
<!-- endinject -->
<!-- Js libs -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script type="text/javascript" src="/safariPolyFix.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
defaultJSExtensions: true,
typescriptOptions: {
emitDecoratorMetadata: true,
},
packages: {
'angular2-google-maps': {
defaultExtension: 'js' …这是https://github.com/systemjs/builder/issues/611的交叉帖子
我正在尝试使用systemjs-builder 0.15.16 buildStatic方法捆绑我的Angular 2 rc 1应用程序.角度组件具有视图以及脚本外部的一个或多个样式表.它们以两种方式之一在@Component元数据中引用
使用绝对路径:
@Component({
templateUrl: 'app/some.component.html',
styleUrls: ['app/some.component.css']
})
使用现在推荐的相对路径:
@Component({
moduleId: module.id,
templateUrl: 'some.component.html',
styleUrls: ['some.component.css']
})
我的应用程序使用相对路径,事情一直很好.今天我决定使用systemjs-builder's buildStatic.每当存在相对路径时,生成的文件都会抛出404错误,因为浏览器正在取localhost/some.component.html而不是localhost/app/some.component.html.下面是我的gulpfile.js的相关部分
var appDev = 'dev/';
var appProd = 'app/';
var typescript = require('gulp-typescript');
var tsProject = typescript.createProject('tsconfig.json');
var Builder = require('systemjs-builder');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('build-ts', function () {
return gulp.src(appDev + '**/*.ts')
.pipe(sourcemaps.init())
.pipe(typescript(tsProject))
.pipe(sourcemaps.write())
.pipe(gulp.dest(appProd));
});
gulp.task('bundle',['build-ts'], function() {
var …