![](/img/trans.png)
[英]Angular2 Typescript app throws 404 on components when js extension not specified
[英]Angular2 Quckstart seed: how to get Karma to load injected typescript with correct .js extension without 404?
我正在使用Angular2 快速入門種子項目... Karma很好地加載了所有默認規范。 當我添加一個名為src/ng-testing/router-stubs.ts
的模擬src/ng-testing/router-stubs.ts
可以編譯為.js
。 但是,當我運行Karma時,得到了404,因為它試圖加載不帶擴展名的/base/ng-testing/router-stubs
。
由於ng-testing/
正確存在於我的src/
因此應將其包含在因果配置中的通配模式中。 src/**/*.js
我只是將其與規范文件中的常規angular / typescript導入一起導入(加載並編譯為.js即可):
import { AppComponent } from './app.component';
import { RouterLinkStubDirective, RouterOutletStubComponent } from '../ng-testing/router-stubs';
如何使其加載擴展程序? 不管我將這個文件放在什么文件夾中, testing/
或src/ng-testing/
它仍然嘗試加載無擴展名。
如果需要,則進行Karma conf:
module.exports = function(config) {
var appBase = 'src/'; // transpiled app JS and map files
var appSrcBase = appBase; // app source TS files
// Testing helpers (optional) are conventionally in a folder called `testing`
var testingBase = 'testing/'; // transpiled test JS and map files
var testingSrcBase = 'testing/'; // test source TS files
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter')
],
client: {
builtPaths: [appBase, testingBase], // add more spec base paths as needed
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
customLaunchers: {
// From the CLI. Not used here but interesting
// chrome setup for travis CI using chromium
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
files: [
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Paths loaded via module imports:
// Angular itself
{ pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
{ pattern: appBase + 'systemjs.config.js', included: false, watched: false },
{ pattern: appBase + 'systemjs.config.extras.js', included: false, watched: false },
'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
// transpiled application & spec code paths loaded via module imports
{ pattern: appBase + '**/*.js', included: false, watched: true },
{ pattern: testingBase + '**/*.js', included: false, watched: true },
// Asset (HTML & CSS) paths loaded via Angular's component compiler
// (these paths need to be rewritten, see proxies section)
{ pattern: appBase + '**/*.html', included: false, watched: true },
{ pattern: appBase + '**/*.css', included: false, watched: true },
// Paths for debugging with source maps in dev tools
{ pattern: appBase + '**/*.ts', included: false, watched: false },
{ pattern: appBase + '**/*.js.map', included: false, watched: false },
{ pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
{ pattern: testingBase + '**/*.js.map', included: false, watched: false}
],
// Proxied base paths for loading assets
proxies: {
// required for modules fetched by SystemJS
'/base/src/node_modules/': '/base/node_modules/'
},
exclude: [],
preprocessors: {},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
})
}
那是system.config.js
。 它只是為應用程序路徑設置環境默認擴展名。 可以將測試文件夾放在其中,也可以包括帶有默認擴展名的src
軟件包。
packages: {
app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.