Systemjs配置为在Angular2中加载templateUrl

当angularj使用systemjs时遇到问题。Systemjs配置为在Angular2中加载templateUrl

的index.html

System.config({ 
    packages: { 
     'app': { 
       format: 'register', 
       defaultExtension: 'js' 
     }, 
     'angular2': { 
       defaultExtension: 'js' 
     }, 
     'rxjs': { 
       defaultExtension: 'js' 
     } 
    }, 
    paths: { 
     '*': 'dist/*', 
     'app/*': 'dist/app/*', 
     'angular2/*': 'node_modules/angular2/*', 
     'rxjs/*': 'node_modules/rxjs/*' 
    } 
}); 

System.import('app/main.js').then(null, console.error.bind(console));

app.js

import {NavbarComponent} from './components/navbar/navbar'; 
@Component({ 
    selector: 'main-app', 
    templateUrl: './app/app.html', 
    directives: [RouterOutlet, NavbarComponent] 
})

这是结构：

当运行服务：

dev: { 
     port: 8080, 
     host: "127.0.0.1", 
     open: '/', 
     root: '.', 
     file: "index.html", 
     wait: 1000 
    },

所有.js文件加载与路径http://127.0.0.1:8080/dist/app/.../....js
但templateUlr负载路径http://127.0.0.1:8080/app/.../...js
如何配置加载templateUrl与路径js文件？

来源

2016-01-13 Sophia

我认为问题出在您的文件结构中。当然，文件结构不正确，这就是为什么没有找到HTML路径。如果可能的话，发布你的文件结构 –

嗨@PardeepJain，我为结构添加了图像，并配置了运行服务。 – Sophia

你必须提供像src/app/app.html这样的src文件夹的路径@ –

我发布这个答案，因为评论这一个太长了！

首先作为你的问题的答案 - 你必须从我的评论之后，现在正在工作的src文件夹给出路径。其次，你是在谈论.map files--

是的，你可以配置自动映射路径时，负载templateUrl你必须做出一些吞掉任务如下：

把这个代码在gulpfile.js

gulp.task('compile-ts', function() { 
    var sourceTsFiles = [ 
     config.allTs, 
     config.allcompoTs 
    ]; 

    var tsResult = gulp 
     .src(sourceTsFiles) 
     .pipe(sourcemaps.init()) 
     .pipe(tsc(tsProject)); 

    return tsResult.js 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest(config.tsOutputPath)); 
});

而这个是你的gulp.config.js

module.exports = function() { 

    var config = { 
     allTs : 'src/*.ts', 
     allcompoTs: 'src/**/*.ts', 
     tsOutputPath : 'dist/', 
     index : 'index.html' 
    }; 
    return config; 
};

现在你可以根据哟配置一口任务你的要求。希望它能帮助你！

来源

2016-01-13 10:55:25

感谢@Pardeep，我建立了成功。我运行我的应用程序，加载文件形式'dist'，并通过路径'http：//127.0.0.1：8080/dist/app/app.js'加载加载'.js'，并通过路径'http加载'.html' ：//127.0.0.1：8080/app/app.html'（它错了）。我不希望将'templateUrl'形式'app/app.html'更改为'dist/app/app.html'。任何想法这个问题。这是我的应用程序https://github.com/Sophia-nguyen/myApp/tree/master。你能帮我检查一下吗？ – Sophia

这里有什么错？它有权从应用程序文件夹加载HTML，从dist文件夹加载js不是吗？ –

像这样，我在'src'文件夹中编写代码，然后编译到'dist'文件夹。之后，我配置运行服务器，但如果我用'root：'。''定义服务器，它将加载'.html'文件，路径为'http：//127.0.0.1：8080/app/app.html' >>找不到。如果我用'root：'dist /''''node-modules'定义服务器未找到。我不知道如何在'dist'中运行带有内容的服务器:( – Sophia

Systemjs配置为在Angular2中加载templateUrl

回答

相关问题