404(未找到)使用.ts文件
当我加载在我的生产ENV页面错误,我得到以下错误:404(未找到)使用.ts文件
GET http://example.com/Scripts/main.ts 404 (Not Found) error: (SystemJS) XHR error (404 Not Found) loading http://example.com/Scripts/main.ts
这不会对我的dev发生。 ENV。
这发生在我的index.html文件中。我验证了所有路径是否正确,并且路径中存在main.ts
文件。
<script src="/Scripts/systemjs.config.js"></script>
<script>
System.import('/Scripts/main.ts').catch(function(err){ console.error(err); });
</script>
如果我改变我的main.ts
文件main.js
extention,有没有 404错误。
这里是我的systemjs.config.js文件:
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
app: 'app',
'@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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
'rxjs': 'npm:[email protected]',
'ts': 'npm:[email protected]/lib/plugin.js',
'typescript': 'npm:[email protected]/lib/typescript.js',
},
packages: {
app: {
format: 'register',
main: '/Scripts/main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
您的浏览器不明白打字稿,只有打字稿编译器。 TypeScript编译器的输出是JavaScript,所以main.js
是要导入的正确文件。
我无法将所有文件更改为JS ...这并不能真正解决我的问题。 –
我不会告诉你把你的文件改成JS。我告诉你不要在浏览器中包含TypeScript文件。下面是一个类比:如果您编写Java代码,它将被编译为字节码,由Java运行时执行。 Java运行时不知道如何处理.java源文件,它们只能用于字节码。同样,您的浏览器不了解TypeScript。你在TypeScript中编码,编译成JavaScript并在浏览器中使用JavaScript文件。这是它工作的唯一方式。 –
我该如何做到这一点?它是如何工作在我的开发环境? –
请不用理会@Cobus Kruger的回答,他是非常无法理解的。
在开发过程中直接在浏览器中导入TypeScript文件(或动态地将它们捆绑在一起),这与您尝试执行的方式完全相同。绝对不需要运行吞吐任务或任何类型的任何东西来编译您的TypeScript,以用于开发或生产捆绑。
你只是有一些小的配置错误。
请注意下面更新的配置。我把身边的变化
function (global) {
System.config({
defaultJSExtensions: true,
baseURL: "/",
transpiler: 'ts',
typescriptOptions: {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
'rxjs': 'npm:[email protected]',
'ts': 'npm:[email protected]/lib/plugin.js',
'typescript': 'npm:[email protected]/lib/typescript.js',
},
packages: {
// note the differences particularly here
app: {
// assuming Scripts is a subdir of app
main: 'Scripts/main.ts',
defaultExtension: 'ts',
meta: {
"*.ts": {
loader: "ts"
},
"*.js": {
loader: "ts"
}
}
}
}
});
})(this);
多余的空行最后改变你的浏览器引导,让你有以下
<script src="/Scripts/systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
没有,我们从我们能想通这将给我们的应用程序包导入main.ts
视您脚本文件夹是相对于你的应用文件夹中,您可能需要进行一些更改,但显然来自错误的目录。
如果你没有真正有一个文件夹命名为应用包含main.ts,刚刚从应用更改包的名称在packages
财产上述到脚本,然后System.import('Scripts')
。
谢谢。我会在星期天试一下,并相应评分。 –
我刚刚测试了您的解决方案,但它将我返回到之前的相同错误:http://example.com/Scripts/main.ts 404(Not Found)错误。 –
请参阅我在下面发布的答案。您接受的答案是对现代JavaScript工具转译器,工作流程和构建系统的完全无知。因为它是事实上不正确的,所以将其视为公认的答案将是一种耻辱。 –