Question

尝试运行Angular 2应用。在.NET 4.5.2版本的Visual Studio 2015中创建空项目，并使用tsconfig.json将所有typescript编译成copy到build目录，我从build目录lib文件夹引用文件。但它说＆＃34; 404 main.js未找到＆＃34; 。

我需要一种方法来提供构建目录中的内容，而不是存在打字稿文件的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中，它试图在路径main.js中查找src文件，但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

无法加载资源：服务器响应状态为404   （未找到）systemjs.config.js：44未捕获的ReferenceError：系统是   未定义index.html：16未捕获的ReferenceError：系统不是   定义

Answer 1

您是否尝试将build/app添加到systemjs.config.js中的包定义中，如：

var packages = {
    'app': { defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'build/app': { main: 'main.js', defaultExtension: 'js' }

};

（抱歉，不能发表评论......）

找不到Angular 2资源main.js，从build目录（使用gulp推送）而不是src / app路径

1 个答案: