试图运行Angular 2应用程序 . 在.NET 4.5.2版本的Visual Studio 2015中创建空项目，并使用 tsconfig.json 将所有typescript编译为copy到build目录，我从build目录lib文件夹引用文件 . 但它说"404 main.js not found" .
我需要一种方法来提供构建目录中的内容，而不是存在typescript文件的 src/app 目录 .
我的 tsconfig.json 将ts文件编译成 build/app 目录中的js文件：
{
"compilerOptions": {
"outDir": "build/app",
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"build"
]
}
我的 index.html ：
<html>
<head>
<title>Angular 2 TypeScript Gulp QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="lib/core-js/client/shim.min.js"></script>
<script src="lib/zone.js/dist/zone.js"></script>
<script src="lib/reflect-metadata/Reflect.js"></script>
<script src="lib/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
</body>
</html>
但是在 index.html 中，它试图在路径 src 中查找 main.js 文件，但是 main.js 被编译并存储在 build/app 目录中 . 如何在我的代码中引用它？
我的 systemjs.config.js ：
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app',
'rxjs': 'lib/rxjs',
'@angular': 'lib/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) {
global.filterSystemConfig(config);
}
System.config(config);
})(this);
我的 Gulp.js 档案：
const gulp = require("gulp");
const del = require("del");
const tsc = require("gulp-typescript");
const sourcemaps = require('gulp-sourcemaps');
const tsProject = tsc.createProject("tsconfig.json");
const tslint = require('gulp-tslint');
/**
* Remove build directory.
*/
gulp.task('clean', (cb) => {
return del(["build"], cb);
});
/**
* Compile TypeScript sources and create sourcemaps in build directory.
*/
gulp.task("compile", () => {
var tsResult = gulp.src("src/**/*.ts")
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
return tsResult.js
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("build"));
});
/**
* Copy all resources that are not TypeScript files into build directory.
*/
gulp.task("resources", () => {
return gulp.src(["src/**/*", "!**/*.ts"])
.pipe(gulp.dest("build"))
});
/**
* Copy all required libraries into build directory.
*/
gulp.task("libs", () => {
return gulp.src([
'core-js/client/shim.min.js',
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'reflect-metadata/Reflect.js',
'rxjs/**',
'zone.js/dist/**',
'@angular/**'
], { cwd: "node_modules/**" }) /* Glob required here. */
.pipe(gulp.dest("build/lib"));
});
/**
* Build the project.
*/
gulp.task("build", ['compile', 'resources', 'libs'], () => {
console.log("Building the project ...")
});
我找到了使用lite-server的解决方案我的意思是在Visual Studio代码中运行代码：在 bs-config.json 文件中：
{
"port": 8000,
"files": [
"build/**/*.{html,htm,css,js}"
],
"server": {
"baseDir": "build"
}
}
这将解决VS代码中的问题 . 但是我想将路径重定向到visual studio 2015项目的构建目录 .
任何人都知道如何在Visual Studio 2015中执行browserSync，以便我可以将上面的代码放在它将从构建目录而不是来自 src/app 的文件中提供内容的位置 .
以下是我得到的错误：
无法加载资源：服务器响应状态为404（未找到）http：// localhost：53149 / src / lib / core-js / client / shim.min.js无法加载资源：服务器响应状态为404（未找到）http：// localhost：53149 / src / lib / zone.js / dist / zone.js无法加载资源：服务器响应状态为404（未找到）http：// localhost：53149 / src / lib / reflect-metadata / Reflect.js无法加载资源：服务器响应状态为404（未找到）http：// localhost：53149 / src / lib / core-js / client / shim.min.js无法加载资源：服务器响应状态为404（未找到）http：// localhost：53149 / src / lib / zone.js / dist / zone.js无法加载资源：服务器响应状态为404（未找到）http：// localhost：53149 / src / lib / reflect-metadata / Reflect.js无法加载资源：服务器响应状态为404（未找到）http：// localhost：53149 / src / lib / systemjs / dist / system.src.js无法加载资源：服务器响应wi状态为404（未找到）systemjs.config.js：44未捕获的ReferenceError：未定义系统index.html：16未捕获的ReferenceError：未定义系统
1 回答
您是否尝试将
build/app添加到systemjs.config.js中的包定义中，如：（对不起，无法评论问...）