小编san*_*074的帖子

当我在` http:// localhost/overview '时,模块沿着这条路径加载:

http://localhost/app/modules/overview/overview.module.js

但是当我转向页面http://localhost/overview/users然后按F5(刷新页面)时,我收到错误:

Error: Unexpected token <
  Evaluating http://localhost/overview/app/modules/overview/overview.module

发生错误是因为URL不正确,他应该是这样http://localhost/app/modules/overview/overview.module.

如何让它正常工作？

这是项目结构:

这是systemjs tsconfig:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  }
}

这是systemjs配置:

(function (global) {
    System.config({
        baseURL: "/",
        paths: {
            'npm:': '/node_modules/'
        },
        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/forms': …

我在不同的文件中有两个类：

export class ActionsCollection{
    constructor(greeting :string){
        this.greet(greeting);
    }

    public greet(greeting :string) {
        return "<h1>"+greeting+"</h1>";
    }
} 

和

import {ActionsCollection} from "./actionsCollection";

class Greeter extends ActionsCollection{
    constructor(public greeting: string) {
        super(greeting); 
    }
}

alert(new Greeter("Hello, world!"));

Greeter在这样的文件中生成，其中存在require行("./ actionsCollection")。但是我想确保所有文件（* .ts）都只在一个文件main.js中生成，不需要require。我可以那样做吗？如果是这样，怎么办？

ps同时，对于装配，您可以使用标准的WebStorm工具和Gulp。而且，除了gulp的模块之外。

有一个测试项目,其结构:

它是文件*.ts:

////// greeter.ts
import {ActionsCollection} from "./actionsCollection";
class Greeter extends ActionsCollection{

}
var greeter = new Greeter();
alert(greeter.greet("Hello, world!"));

////// actionsCollection.ts

export class ActionsCollection{

    public say (){

    }

    public greet(greeting :string) {
        return "<h1>"+greeting+"</h1>";
    }
}

///// newTS.ts

export class NewTS{
    public foo (){
        return "<h1>foo</h1>";
    }
}

这是gulpfile:

var gulp = require('gulp');
var debug = require('gulp-debug');
var webpack = require('gulp-webpack');
gulp.task('default', function() {
    return gulp.src('ts/greeter.ts')
        .pipe(webpack({
            output: {
                filename: 'main.js'
            },
            resolve: {
                extensions: ['', '.webpack.js', '.web.js', '.ts', …

这是我的服务器代码，下一个片段渲染角度home.comnponent：

app.get("*", (req, res) => {
    res.render(
        `../${CLIENT_DIST_DIR}/index`,
        {
            req: req,
            res: res,
            providers: [
                {
                    provide: REQUEST, useValue: (req)
                },
                {
                    provide: RESPONSE, useValue: (res)
                },
                {
                    provide: "ORIGIN_URL",
                    useValue: (`${http}://${req.headers.host}`)
                }
            ]
        },
        (err, html) => {
            if (err) {
                Log.error("NG render error", err);
                throw err;
            }
            res.send(html);
        }
    );
});

这是我home.component的错误：

@Component({
    selector: "app-home",
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    constructor(private http: TransferHttpService,
                @Inject(AppStorage) private appStorage: Storage) {
    }

    ngOnInit(): …