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

回答

相關問題