个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
26
4
我正在尝试为 Angular2+Typescript (+SystemJS+Gulp4) 创建自己的入门项目，但是在从与 JavaScript 相同的文件夹中编译 TypeScript 切换并访问时遇到了一些问题node_modules 文件夹将所有内容放入 dist 文件夹(使用 dist/js 编译 JavaScript 和 dist/js/lib 对于 vendor 文件(angular2.dev.js、http.dev.js、router.dev.js、Rx。 js, system.src.js 等)).
您可以找到完整的项目 on github (souldreamer/event-planner) .
是否有人愿意看一看我做错了什么？它可能是 index.html 中的 SystemJS 配置，因为根据我尝试的配置，我要么没有实际加载 boot.js(网络选项卡显示一切都已加载，但 System.import() promise 永远不会解决)，或者像 core_1.Component is not a function 或 core_1 这样的错误.Input 不是函数 当我还添加了 InputComponent 时。
注意:在您考虑将此标记为重复之前，我在过去几天一直在网络和 StackOverflow 上搜索，并尝试了我能找到的所有变体，所以它不是真的一个重复的问题(即使有很多类似的问题)。
这里包含一些我认为可能相关的部分，以防您不想查看完整项目:
TypeScript 编译(Gulp4 任务):
function tsCompile() {
var tsResult = gulp
.src(['./app/**/*.ts', './typings/**/*.ts'])
.pipe(sourcemaps.init())
.pipe(tsc(tsc.createProject('tsconfig.json')));
return merge([
tsResult.dts.pipe(gulp.dest('./typings/typescriptApp.d.ts')),
tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dist/js'))
]);
}
tsconfig.json
{
"compilerOptions": {
"outDir": "dist/js",
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules"
]
}
index.html
<head>
<base href="/">
<link rel="stylesheet" href="styles.css">
<!-- inject:libs -->
<!-- add wanted libs to gulpfile -->
<!-- this is replaced by the gulp task runner -->
<!-- lib order: -->
<!-- angular2-polyfills, system.src, Rx, -->
<!-- angular2.dev, router.dev, http.dev -->
<!-- endinject -->
<script>
System.config({
baseUrl: './', // same result with this omitted
transpiler: 'typescript', // same result with this omitted
defaultJSExtensions: true,
bundles: {
'./js/lib/angular2.dev.js': ['angular2/*']
},
packages: {
js: {
format: 'register',
defaultExtension: 'js'
}
},
paths: {
'angular/http': './js/lib/router.dev.js',
'angular/router': './js/lib/http.dev.js',
'angular2/*': './js/lib/angular2.dev.js',
'rx/*': './js/lib/Rx.js'
}
});
System.import('js/boot')
.then(
function() {console.log('loaded')},
console.error.bind(console)
);
</script>
</head>
<body>
<main-app>Loading...</main-app>
</body>
</html>
boot.ts(实际的 Angular2 应用程序无关紧要，它应该按原样工作，错误不在此处，为了完整起见包含在内)
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './components/app.component';
bootstrap(AppComponent, []);
app.component.ts(实际的 Angular2 应用程序无关紧要，它应该按原样工作，错误不在此处，为了完整性而包括在内'清酒)
import {Component} from 'angular2/core';
import {InputComponent} from './input.component';
@Component({
selector: 'main-app',
template: `<h1>Hi!</h1>
<input-component label="A"></input-component>
<input-component label="B"></input-component>
`,
directives: [InputComponent]
})
export class AppComponent {
}
input.component.ts(实际的 Angular2 应用程序无关紧要，它应该按原样工作，错误不在此处，为了完整性而包括在内'清酒)
import {Component, Input} from 'angular2/core';
@Component({
selector: 'input-component',
template: `
<label [attr.for]="inputName">{{label}}
<input #input [attr.id]="inputName" type="text"></label>
`,
styles: [
`label { color: red; }`
]
})
export class InputComponent {
public static latestId: number = 0;
private inputId: number = InputComponent.latestId;
@Input() public label: string = '';
constructor() {
InputComponent.latestId++;
}
get inputName(): string {
return 'input-' + this.inputId;
}
}
最佳答案
我设法找到了解决方案，System.config() 参数错误。这是任何有类似问题的人的工作版本:
System.config({
packages: {
js: {
format: 'register',
defaultExtension: 'js'
}
}
});
其余部分显然会自行处理。
关于javascript - 如何让 Angular2 在生成的分发文件夹中工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34752047/
26
4
0
我在使用NetBeans 6.8时遇到以下问题。我通过项目属性->库->编译选项卡->添加JAR /文件夹添加带有jar的文件夹。在下一个窗口中，我选择文件夹，然后选择“复制到库文件夹”。但是，我仍然
我的网站有一个域别名。我想知道如何将 domainA.ext 的请求重定向到 https://domainA.ext/folderA和对 domainB.ext 的请求到 http://domainB
我应该在 Eclipse 中构建的 Android 项目中创建自己的自定义菜单文件夹吗？例如，我想创建一种出现在所有 Activity 中的标题。我知道菜单应该在 res/menu 文件夹中的 XML
我正在使用 VS2008 和 .net 3.5。我在我的解决方案中创建了一个类库(Myproject.Controllers)。在这个类下，我添加了一个 Controllers 文件夹。在文件夹中我添
我有一个包含生成后步骤的 Visual Studio 2012 扩展项目，我想在其中将 .dll 和 .AddIn 文件复制到当前用户的 Visual Studio 2012 AddIns 文件夹中。
我在专有的 linux 发行版中有一些自动下载。 他们去临时暂存盘。我想在它们完成后将它们 move 到主 RAID 阵列。我能看到的最好方法是检查磁盘上的文件夹，看看内容是否在最后一分钟发生了变化。
我目前正在使用 SVN 对我的软件项目进行版本控制。在一个正在进行的项目中，我有主干，用于客户的共同功能和规范以及分支，用于客户特定的。 有没有办法在每次执行此类操作时标记一些不应合并到分支中的文
这个问题在这里已经有了答案: How to exclude a directory in find . command (45 个回答) 8 年前关闭。 如何删除文件夹中的所有内容并排除特定文件夹和文
如何在特定目录中创建具有当前日期和时间的文件夹或文件？ DateTimeFormatter f = DateTimeFormatter.ofPattern("uuuuMMdd HHmmss") ; L
有没有办法在系统文件资源管理器的左侧“文件夹”栏中打开文件或文件夹？如果没有这个，我必须打开文件资源管理器并一直导航到该文件夹所在的位置才能操作文件，这确实很不方便。对于大多数带有这样导航栏的工具
预期:我使用 go get 安装包，它在 src 文件夹中创建了所有必要的文件夹，但它们只出现在 pkg/mod 文件夹中，我不能使用它们。 现实:它说它正在下载，完成，然后什么都没有。 一切都在 W
说 foo.zip包含: a b c |- c1.exe |- c2.dll |- c3.dll 哪里a, b, c是文件夹。 如果我 Expand-Archive .\foo.zip -Destin
不久前我正在删除 var 文件夹中 Magento 的缓存。我可能是错的，但我认为我犯了一个错误，而不是删除 var/cache 中的所有内容，而是意外删除了 var 中的所有内容。 Magento
我在 svn 存储库的单独文件夹中有一些代码项目。 现在我在删除文件时遇到一些问题:大多数时候一切顺利，但有时当我从磁盘删除文件或文件夹时， checkin 过程会出现各种错误。 所以我想知道:在sv
有没有什么方法可以用很少的R命令行自动删除所有文件或文件夹？我知道 unlink() 或 file.remove() 函数，但对于这些函数，您需要定义一个字符向量，其中包含您想要的文件的所有名称删除。
用于在文件夹中查找不符合Get-Childitem的LastWriteTime过滤器日期范围标准的文件的powershell命令是什么？ 因此，请检查目录中是否包含不包含在01/10/2012(十月1
我正在为我工作的公司内部使用的应用程序之一编写 NSIS 安装程序，安装过程工作正常，所有 REG 键都已创建，文件夹和服务也没有问题，该应用程序使用。出于某种我无法理解的原因，卸载过程不起作用。
我有一个 Excel 文件，并且在同一文件夹中还有一个包含我想要包含的 CSV 文件的文件夹。使用“来自文件夹”查询，第一步将给出以下查询: = Folder.Files("D:\OneDrive\D
我在docker中玩ScyllaDB。为了使ScyllaDB在docker生产设置中最有效地运行，它需要一个XFS格式的磁盘。 您知道如何在Linux和MacO中创建XFS容器卷，磁盘文件吗？ 谢谢
我应该编写一个函数，其中包含之前每次与该数字相乘的乘积 基本上是这样的: > productFromLeftToRight [2,3,4,5] [120,60,20,5] 我应该使用高阶函数，例如折叠
我是一名优秀的程序员,十分优秀！